From 25dcee33282ddbb1a36e5e0637bd45964a8e5a4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Wed, 14 Aug 2024 10:34:33 +0200
Subject: [PATCH 01/53] WIP(ui-top-nav-bar): wip

---
 packages/__docs__/components.ts               |   2 +-
 packages/__docs__/src/App/index.tsx           | 427 ++++++++++--------
 packages/__docs__/src/index.html              |   3 +
 .../ui-top-nav-bar/src/MobileTopNav/README.md | 107 +++++
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 136 ++++++
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  40 ++
 packages/ui-top-nav-bar/src/index.ts          |   2 +
 7 files changed, 529 insertions(+), 188 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/README.md
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/props.ts

diff --git a/packages/__docs__/components.ts b/packages/__docs__/components.ts
index 5cb71d0db0..c88d7c0309 100644
--- a/packages/__docs__/components.ts
+++ b/packages/__docs__/components.ts
@@ -128,7 +128,7 @@ export { ToggleBlockquote } from './src/ToggleBlockquote'
 export { InstUISettingsProvider } from '@instructure/emotion'
 export { Drilldown } from '@instructure/ui-drilldown'
 export { SourceCodeEditor } from '@instructure/ui-source-code-editor'
-export { TopNavBar } from '@instructure/ui-top-nav-bar'
+export { TopNavBar, MobileTopNav } from '@instructure/ui-top-nav-bar'
 export { TruncateList } from '@instructure/ui-truncate-list'
 export {
   canvas,
diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 05010c9974..37b1a25afe 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -27,8 +27,7 @@ import {
   createContext,
   LegacyRef,
   ReactElement,
-  SyntheticEvent,
-  createRef
+  SyntheticEvent
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
@@ -37,7 +36,7 @@ import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
-import { Mask } from '@instructure/ui-overlays'
+import { MobileTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import { Tray } from '@instructure/ui-tray'
 import { Link } from '@instructure/ui-link'
@@ -58,7 +57,7 @@ import { Nav } from '../Nav'
 import { Theme } from '../Theme'
 import { Select } from '../Select'
 import { Section } from '../Section'
-import IconsPage from '../Icons'
+import { Icons } from '../Icons'
 import { compileMarkdown } from '../compileMarkdown'
 
 import { fetchVersionData, versionInPath } from '../versionData'
@@ -71,11 +70,9 @@ import type { AppProps, AppState, DocData, LayoutSize } from './props'
 import { propTypes, allowedProps } from './props'
 import type {
   LibraryOptions,
-  MainDocsData,
-  ParsedDocSummary
+  MainDocsData
 } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
-import type { Spacing } from '@instructure/emotion'
 
 type AppContextType = {
   themeKey: keyof MainDocsData['themes']
@@ -102,10 +99,6 @@ class App extends Component<AppProps, AppState> {
   _mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
   _defaultDocumentTitle?: string
   _controller?: AbortController
-  _heroRef: React.RefObject<Hero>
-  _navRef: React.RefObject<Nav>
-  _skipToMainButtonRef?: HTMLElement
-  _mainContentRef?: HTMLElement
 
   constructor(props: AppProps) {
     super(props)
@@ -124,12 +117,9 @@ class App extends Component<AppProps, AppState> {
       themeKey: undefined,
       layout: 'large',
       docsData: null,
-      versionsData: undefined,
+      versionsData: null,
       iconsData: null
     }
-
-    this._heroRef = createRef()
-    this._navRef = createRef()
   }
 
   fetchDocumentData = async (docId: string) => {
@@ -144,6 +134,7 @@ class App extends Component<AppProps, AppState> {
       docData.componentInstance = everyComp[components[0]][components[1]]
     } else {
       docData.componentInstance =
+        // eslint-disable-next-line import-x/namespace
         EveryComponent[docId as keyof typeof EveryComponent]
     }
     return docData
@@ -154,16 +145,6 @@ class App extends Component<AppProps, AppState> {
     return this.setState({ versionsData })
   }
 
-  mainContentRef = (el: Element | null) => {
-    this._mainContentRef = el as HTMLElement
-  }
-
-  focusContent = () => {
-    if (this._mainContentRef) {
-      this._mainContentRef.focus()
-    }
-  }
-
   scrollToElement() {
     const [_page, id] = this.getPathInfo()
 
@@ -178,6 +159,35 @@ class App extends Component<AppProps, AppState> {
     }
   }
 
+  /**
+   * Get every static prop from an object (inherited ones too)
+   * @param object The object to check
+   * @returns {Set<string>} the properties
+   */
+  getAllPropNames(object: Record<string, any>) {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    let obj: object | null = object
+    const props: Set<string> = new Set()
+    // exclude some common static props for performance
+    const invalidKeys = [
+      '$$typeof',
+      'render',
+      'propTypes',
+      'selector',
+      'defaultProps',
+      'displayName',
+      'generateComponentTheme'
+    ]
+    while (obj) {
+      const keys = Object.keys(obj)
+      keys.forEach((k) => {
+        if (!invalidKeys.includes(k)) props.add(k)
+      })
+      obj = Reflect.getPrototypeOf(obj)
+    }
+    return props
+  }
+
   componentDidMount() {
     this._defaultDocumentTitle = document.title
     this.updateKey()
@@ -205,7 +215,6 @@ class App extends Component<AppProps, AppState> {
     const errorHandler = (error: Error) => {
       logError(error.name === 'AbortError', error.message)
     }
-    document.addEventListener('keydown', this.handleTabKey)
 
     fetch('icons-data.json', { signal })
       .then((response) => response.json())
@@ -216,10 +225,13 @@ class App extends Component<AppProps, AppState> {
     fetch('markdown-and-sources-data.json', { signal })
       .then((response) => response.json())
       .then((docsData) => {
-        this.setState({
-          docsData,
-          themeKey: Object.keys(docsData.themes)[0]
-        })
+        this.setState(
+          {
+            docsData,
+            themeKey: Object.keys(docsData.themes)[0]
+          },
+          this.scrollToElement
+        )
       })
       .catch(errorHandler)
   }
@@ -299,9 +311,7 @@ class App extends Component<AppProps, AppState> {
   }
 
   handleMenuOpen = () => {
-    this.setState({ showMenu: true }, () => {
-      this._navRef.current?.focusTextInput()
-    })
+    this.setState({ showMenu: true })
   }
 
   handleMenuClose = () => {
@@ -332,33 +342,6 @@ class App extends Component<AppProps, AppState> {
     }
   }
 
-  focusMainContent = () => {
-    if (this._heroRef?.current?.focusMainContent) {
-      this._heroRef.current.focusMainContent()
-    } else if (this._mainContentRef?.focus) {
-      this._mainContentRef.focus()
-    }
-  }
-
-  handleTabKey = (event: KeyboardEvent) => {
-    if (event.key === 'Tab') {
-      if (document.activeElement === document.body) {
-        event.preventDefault()
-        this.focusSkipToMainButton()
-      }
-    }
-  }
-
-  skipToMainButtonRef = (el: Element | null) => {
-    this._skipToMainButtonRef = el as HTMLElement
-  }
-
-  focusSkipToMainButton = () => {
-    if (this._skipToMainButtonRef) {
-      this._skipToMainButtonRef.focus()
-    }
-  }
-
   renderThemeSelect() {
     const themeKeys = Object.keys(this.state.docsData!.themes)
     const smallScreen = this.state.layout === 'small'
@@ -428,9 +411,13 @@ class App extends Component<AppProps, AppState> {
         }
       >
         <Heading level="h1" as="h2" margin="0 0 medium">
-          Icons
+          Iconography
         </Heading>
-        <IconsPage glyphs={iconsData!.glyphs} />
+        <Icons
+          packageName={iconsData!.packageName}
+          selectedFormat={key}
+          formats={iconsData!.formats}
+        />
       </View>
     )
 
@@ -451,12 +438,7 @@ class App extends Component<AppProps, AppState> {
         }
         // eslint-disable-next-line no-param-reassign
         data.children = children
-        this.setState(
-          {
-            currentDocData: data
-          },
-          this.scrollToElement
-        )
+        this.setState({ currentDocData: data })
       })
       return (
         <View as="div" padding="xx-large 0">
@@ -467,45 +449,44 @@ class App extends Component<AppProps, AppState> {
     const { themes } = this.state.docsData!
     const { layout, themeKey, versionsData } = this.state
     const { olderVersionsGitBranchMap } = versionsData || {}
-    let legacyGitBranch: string | undefined = undefined
+    let legacyGitBranch
 
-    if (olderVersionsGitBranchMap && versionInPath) {
+    if (olderVersionsGitBranchMap) {
       legacyGitBranch = olderVersionsGitBranchMap[versionInPath]
     }
 
     const themeVariables = themes[themeKey!].resource
     const heading = currentData.extension !== '.md' ? currentData.title : ''
     const documentContent = (
-      <View as="div" padding="x-large none none">
+      <View
+        as="div"
+        padding={
+          layout === 'small' || layout === 'medium'
+            ? 'x-large none none large'
+            : 'x-large none none'
+        }
+      >
         {this.renderThemeSelect()}
-        <View
-          elementRef={this.mainContentRef}
-          tabIndex={0}
-          aria-label="main content"
-        >
-          <Section id={currentData.id} heading={heading}>
-            <Document
-              doc={{
-                ...currentData,
-                legacyGitBranch
-              }}
-              description={currentData.description}
-              themeVariables={themeVariables}
-              repository={repository}
-              layout={layout}
-            />
-          </Section>
-        </View>
+        <Section id={currentData.id} heading={heading}>
+          <Document
+            doc={{
+              ...currentData,
+              legacyGitBranch
+            }}
+            description={currentData.description}
+            themeVariables={themeVariables}
+            repository={repository}
+            layout={layout}
+          />
+        </Section>
       </View>
     )
-    const padding: Spacing =
-      layout === 'small' ? 'large small large small' : 'large'
-    return this.renderWrappedContent(documentContent, padding)
+    return this.renderWrappedContent(documentContent)
   }
 
   renderWrappedContent(
     content: ReactElement[] | ReactElement,
-    padding: Spacing = 'large'
+    padding: any = 'large'
   ) {
     return <ContentWrap padding={padding}>{content}</ContentWrap>
   }
@@ -514,11 +495,10 @@ class App extends Component<AppProps, AppState> {
     const { library, docs, themes } = this.state.docsData!
     const { layout } = this.state
 
-    const themeDocs: ParsedDocSummary = {}
+    const themeDocs: Record<string, any> = {}
 
     Object.keys(themes).forEach((key) => {
       themeDocs[key] = {
-        title: key,
         category: 'themes'
       }
     })
@@ -530,7 +510,6 @@ class App extends Component<AppProps, AppState> {
           repository={library.repository}
           version={library.version}
           layout={layout}
-          ref={this._heroRef}
         />
       </InstUISettingsProvider>
     )
@@ -590,54 +569,28 @@ class App extends Component<AppProps, AppState> {
   renderContent(key?: string) {
     const doc = this.state.docsData!.docs[key!]
     const theme = this.state.docsData!.themes[key!]
+    let icon
+    if (this.state.iconsData && this.state.iconsData.formats) {
+      icon =
+        this.state.iconsData.formats[
+          key as 'icons-svg' | `icons-react` | 'icons-font'
+        ]
+    }
     const { repository } = this.state.docsData!.library
 
     if (!key || key === 'index') {
       return this.renderHero()
     }
     if (key === 'CHANGELOG') {
-      return (
-        <View
-          elementRef={this.mainContentRef}
-          tabIndex={0}
-          aria-label="changelog page main content"
-        >
-          {this.renderChangeLog()}
-        </View>
-      )
-    } else if (key === 'icons') {
-      return (
-        <View
-          elementRef={this.mainContentRef}
-          tabIndex={0}
-          aria-label="icons page main content"
-          as={'div'}
-        >
-          {this.renderIcons(key)}
-        </View>
-      )
+      return this.renderChangeLog()
+    } else if (key === 'iconography' || icon) {
+      return this.renderIcons(key)
     } else if (theme) {
-      return (
-        <View
-          elementRef={this.mainContentRef}
-          tabIndex={0}
-          aria-label="theme page main content"
-        >
-          {this.renderTheme(key)}
-        </View>
-      )
+      return this.renderTheme(key)
     } else if (doc) {
       return this.renderDocument(key!, repository)
     } else {
-      return (
-        <View
-          elementRef={this.mainContentRef}
-          tabIndex={0}
-          aria-label="error page main content"
-        >
-          {this.renderError()}
-        </View>
-      )
+      return this.renderError()
     }
   }
 
@@ -690,7 +643,6 @@ class App extends Component<AppProps, AppState> {
               shape="circle"
               color="secondary"
               size="medium"
-              aria-expanded={true}
             />
           </InstUISettingsProvider>
         </View>
@@ -706,7 +658,7 @@ class App extends Component<AppProps, AppState> {
           sections={this.state.docsData!.sections}
           docs={this.state.docsData!.docs}
           themes={this.state.docsData!.themes}
-          ref={this._navRef}
+          icons={this.state.iconsData}
         />
       </View>
     )
@@ -765,24 +717,6 @@ class App extends Component<AppProps, AppState> {
     ) : null
   }
 
-  renderSkipToMainButton = () => {
-    return (
-      <View
-        as={'button'}
-        onClick={this.focusMainContent}
-        tabIndex={0}
-        css={this.props.styles?.skipToMainButton}
-        borderRadius="small"
-        display="inline-block"
-        padding="small"
-        background="primary"
-        elementRef={this.skipToMainButtonRef}
-      >
-        Skip to main content
-      </View>
-    )
-  }
-
   render() {
     const key = this.state.key
     const { showMenu, layout, docsData, iconsData } = this.state
@@ -790,6 +724,29 @@ class App extends Component<AppProps, AppState> {
     if (!docsData || !iconsData) {
       return <LoadingScreen />
     }
+
+    const brandSvg = (
+      // eslint-disable-next-line jsx-a11y/anchor-is-valid
+      <a
+        style={{
+          width: '28px',
+          height: '28px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        href="#"
+      >
+        <svg
+          viewBox="0 0 1920 1920"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="#fff"
+        >
+          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+        </svg>
+      </a>
+    )
+
     return (
       <AppContext.Provider
         value={{
@@ -798,40 +755,136 @@ class App extends Component<AppProps, AppState> {
           themes: docsData.themes
         }}
       >
-        <div css={this.props.styles?.app}>
-          <Global styles={this.props.styles?.globalStyles} />
-          {showMenu && layout === 'small' && (
-            <Mask onClick={this.handleMenuClose} />
-          )}
-          {this.renderSkipToMainButton()}
-          {this.renderNavigation()}
-          <div
-            css={this.props.styles?.content}
-            aria-label={key || docsData.library.name}
-            ref={this.handleContentRef}
-          >
-            {!showMenu && (
-              <div css={this.props.styles?.hamburger}>
-                <InstUISettingsProvider>
-                  <IconButton
-                    themeOverride={{
-                      secondaryBorderColor: '#343434'
-                    }}
-                    onClick={this.handleMenuOpen}
-                    elementRef={this.handleMenuTriggerRef}
-                    renderIcon={IconHamburgerSolid}
-                    screenReaderLabel="Open Navigation"
-                    shape="circle"
-                    aria-expanded={false}
-                  />
-                </InstUISettingsProvider>
-              </div>
-            )}
-            {this.renderContent(key)}
-            {this.renderFooter()}
-          </div>
+        <div
+          style={{
+            position: 'relative',
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box'
+          }}
+        >
+          <MobileTopNav brand={brandSvg} />
+          <p>
+            1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            2 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            4 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            5 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            6 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            7 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            8 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            9 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            10 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            11 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            12 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            13 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            14 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            15 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            16 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            17 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            18 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            19 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
+          <p>
+            20 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+            Molestias excepturi a blanditiis, aspernatur repellat repellendus
+            dolores cum labore eligendi architecto asperiores, dolor quisquam
+            sequi mollitia quibusdam, cumque id ab amet?
+          </p>
         </div>
-        {this.renderLegacyDocWarning()}
       </AppContext.Provider>
     )
   }
diff --git a/packages/__docs__/src/index.html b/packages/__docs__/src/index.html
index 583325669c..96a9a8d9a2 100644
--- a/packages/__docs__/src/index.html
+++ b/packages/__docs__/src/index.html
@@ -44,6 +44,9 @@
         font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont,
           'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
           'Droid Sans', 'Helvetica Neue', sans-serif;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
       }
 
       #app {
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/README.md b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
new file mode 100644
index 0000000000..7fd75d41fe
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
@@ -0,0 +1,107 @@
+---
+describes: MobileTopNav
+---
+
+POC mobile top nav
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const brandSvg = (
+    <a style={{width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center'}} href="#">
+      <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+    <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+</svg>
+    </a>
+  )
+  return (
+    <div style={{position: 'relative', width: '420px', maxWidth: '100%', boxSizing: 'borderBox'}}>
+      <MobileTopNav brand={brandSvg}/>
+      <p>
+        1
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+}
+
+render(<Example />)
+```
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
new file mode 100644
index 0000000000..dae154106d
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -0,0 +1,136 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+// import { useState, useEffect, useContext } from 'react'
+
+import { useState } from 'react'
+import { jsx, useTheme } from '@instructure/emotion'
+import type { MobileTopNavProps, MobileTopNavOwnProps } from './props'
+
+import { IconButton } from '@instructure/ui-buttons'
+import {
+  IconHamburgerSolid,
+  IconEyeSolid,
+  IconXSolid
+} from '@instructure/ui-icons'
+
+/**
+---
+category: components
+---
+**/
+const MobileTopNav = ({
+  lightMode = false,
+  brand,
+  styles
+}: MobileTopNavProps) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <div css={{ ...styles.container, ...styles.containerHeight(open) }}>
+      <div
+        css={{
+          height: '54px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between'
+        }}
+      >
+        {brand}
+        <span
+          css={{
+            display: 'flex',
+            gap: '12px'
+          }}
+        >
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={lightMode ? 'secondary' : 'primary-inverse'}
+          >
+            <IconEyeSolid />
+          </IconButton>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={lightMode ? 'secondary' : 'primary-inverse'}
+            onClick={() => setOpen((open) => !open)}
+          >
+            {open ? <IconXSolid /> : <IconHamburgerSolid />}
+          </IconButton>
+        </span>
+      </div>
+    </div>
+  )
+}
+
+const generateStyles = (props, theme) => {
+  const { lightMode } = props
+  return {
+    container: {
+      padding: `0 ${theme.spacing.small}`,
+      backgroundColor: lightMode
+        ? theme.colors.ui.surfacePageSecondary
+        : theme.colors.ui.surfaceDark,
+      color: lightMode
+        ? theme.colors.contrasts.grey125125
+        : theme.colors?.contrasts?.white1010,
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: '100%'
+    },
+    containerHeight: (open: boolean) => {
+      return {
+        height: open ? '100%' : '54px',
+        position: open ? 'absolute' : 'relative'
+      }
+    }
+  }
+}
+
+// eslint-disable-next-line react/display-name
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC = withStyles(generateStyles)(MobileTopNav)
+
+export { SC as MobileTopNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
new file mode 100644
index 0000000000..841c08cc29
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ReactNode } from 'react'
+
+type MobileTopNavOwnProps = {
+  lightMode?: boolean
+  brand?: ReactNode
+}
+
+type MobileTopNavStyle = {
+  container: {
+    [key: string]: string | number
+  }
+}
+
+type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle }
+
+export type { MobileTopNavProps, MobileTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index 55aaf9e219..f82f86862f 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -67,3 +67,5 @@ export type {
   TopNavBarUserProps,
   TopNavBarUserOwnProps
 } from './TopNavBar/TopNavBarUser/props'
+
+export { MobileTopNav } from './MobileTopNav'

From 5bafd81ee046298b0d13052c52e7d4496b9dbde3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20S=C3=A1ros?= <balazs.saros@instructure.com>
Date: Thu, 22 Aug 2024 16:40:04 +0200
Subject: [PATCH 02/53] WIP(ui-top-nav-bar): wip

---
 packages/__docs__/src/App/index.tsx           |  51 ++++-
 .../ui-top-nav-bar/src/MobileTopNav/README.md |  12 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 208 +++++++++++++-----
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  17 +-
 4 files changed, 215 insertions(+), 73 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 37b1a25afe..102d2def97 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-undef */
 /*
  * The MIT License (MIT)
  *
@@ -725,26 +726,24 @@ class App extends Component<AppProps, AppState> {
       return <LoadingScreen />
     }
 
+    const lightMode = false
     const brandSvg = (
-      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-      <a
-        style={{
-          width: '28px',
-          height: '28px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}
+      <IconButton
+        screenReaderLabel="Canvas Brand"
         href="#"
+        withBackground={false}
+        withBorder={false}
       >
         <svg
           viewBox="0 0 1920 1920"
           xmlns="http://www.w3.org/2000/svg"
           fill="#fff"
+          width="28px"
+          height="28px"
         >
           <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
         </svg>
-      </a>
+      </IconButton>
     )
 
     return (
@@ -763,7 +762,37 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <MobileTopNav brand={brandSvg} />
+          <MobileTopNav brand={brandSvg} lightMode={lightMode}>
+            <MobileTopNav.BtnRow>
+              <IconButton
+                withBackground={false}
+                withBorder={false}
+                screenReaderLabel="burgir"
+                color={lightMode ? 'secondary' : 'primary-inverse'}
+              >
+                <IconAnalyticsLine />
+              </IconButton>
+              <IconButton
+                withBackground={false}
+                withBorder={false}
+                screenReaderLabel="burgir"
+                color={lightMode ? 'secondary' : 'primary-inverse'}
+              >
+                <IconAlertsLine />
+              </IconButton>
+            </MobileTopNav.BtnRow>
+            <MobileTopNav.BreadCrumb>
+              <Link href="#" isWithinText={false} color="link-inverse">
+                <div
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                >
+                  <IconArrowOpenStartLine />
+                  Back
+                </div>
+              </Link>
+            </MobileTopNav.BreadCrumb>
+            <MobileTopNav.Title>Courses</MobileTopNav.Title>
+          </MobileTopNav>
           <p>
             1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
             Molestias excepturi a blanditiis, aspernatur repellat repellendus
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/README.md b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
index 7fd75d41fe..32fd6797e8 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/README.md
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/README.md
@@ -9,16 +9,16 @@ POC mobile top nav
 type: example
 ---
 const Example = () => {
+  const lightMode = false
   const brandSvg = (
-    <a style={{width: '28px', height: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center'}} href="#">
+    <IconButton screenReaderLabel="Canvas Brand" href="#">
       <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
-    <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
-</svg>
-    </a>
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+      </svg>
+    </IconButton>
   )
   return (
-    <div style={{position: 'relative', width: '420px', maxWidth: '100%', boxSizing: 'borderBox'}}>
-      <MobileTopNav brand={brandSvg}/>
+    <div>
       <p>
         1
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index dae154106d..867835e1c2 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 /*
  * The MIT License (MIT)
  *
@@ -23,18 +24,13 @@
  */
 
 /** @jsx jsx */
-// import { useState, useEffect, useContext } from 'react'
-
-import { useState } from 'react'
+import { Children, Fragment, useState, useEffect } from 'react'
+import type { PropsWithChildren } from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
-import type { MobileTopNavProps, MobileTopNavOwnProps } from './props'
+import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
-import {
-  IconHamburgerSolid,
-  IconEyeSolid,
-  IconXSolid
-} from '@instructure/ui-icons'
+import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
 
 /**
 ---
@@ -44,35 +40,28 @@ category: components
 const MobileTopNav = ({
   lightMode = false,
   brand,
-  styles
+  styles,
+  children
 }: MobileTopNavProps) => {
   const [open, setOpen] = useState<boolean>(false)
 
+  useEffect(() => {
+    const body = document.getElementsByTagName('body')[0]
+    body.style.overflow = open ? 'hidden' : 'visible'
+  }, [open])
+
+  const getSubComponent = (displayName: any) => {
+    return Children.map(children, (child: any) => child).filter(
+      (child: any) => child?.type?.displayName === displayName
+    )
+  }
+
   return (
-    <div css={{ ...styles.container, ...styles.containerHeight(open) }}>
-      <div
-        css={{
-          height: '54px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}
-      >
+    <div css={styles.container(open)}>
+      <div css={styles.topBar}>
         {brand}
-        <span
-          css={{
-            display: 'flex',
-            gap: '12px'
-          }}
-        >
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel="burgir"
-            color={lightMode ? 'secondary' : 'primary-inverse'}
-          >
-            <IconEyeSolid />
-          </IconButton>
+        <span css={styles.btnRow}>
+          {!open && getSubComponent('BtnRow')}
           <IconButton
             withBackground={false}
             withBorder={false}
@@ -80,42 +69,151 @@ const MobileTopNav = ({
             color={lightMode ? 'secondary' : 'primary-inverse'}
             onClick={() => setOpen((open) => !open)}
           >
-            {open ? <IconXSolid /> : <IconHamburgerSolid />}
+            {open ? <IconXLine /> : <IconHamburgerLine />}
           </IconButton>
         </span>
       </div>
+
+      <div style={styles.content(open)}>
+        {getSubComponent('BreadCrumb')}
+        {getSubComponent('Title')}
+        <p>
+          1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+        <p>
+          11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+          quibusdam, cumque id ab amet?
+        </p>
+      </div>
     </div>
   )
 }
 
-const generateStyles = (props, theme) => {
+const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%'
+      }
+    },
+    topBar: {
       padding: `0 ${theme.spacing.small}`,
-      backgroundColor: lightMode
-        ? theme.colors.ui.surfacePageSecondary
-        : theme.colors.ui.surfaceDark,
-      color: lightMode
-        ? theme.colors.contrasts.grey125125
-        : theme.colors?.contrasts?.white1010,
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      width: '100%'
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
     },
-    containerHeight: (open: boolean) => {
+    content: (open: boolean) => {
       return {
-        height: open ? '100%' : '54px',
-        position: open ? 'absolute' : 'relative'
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '54px',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
       }
+    },
+    btnRow: {
+      display: 'flex',
+      gap: '12px'
     }
   }
 }
 
-// eslint-disable-next-line react/display-name
+const BtnRow = ({ children }: PropsWithChildren) => {
+  return <Fragment>{children}</Fragment>
+}
+
+BtnRow.displayName = 'BtnRow'
+
+const BreadCrumb = ({ children }: PropsWithChildren) => {
+  return <div css={{ margin: '24px 0' }}>{children}</div>
+}
+
+BreadCrumb.displayName = 'BreadCrumb'
+
+const Title = ({ children }: PropsWithChildren) => {
+  return <div css={{ margin: '32px 0' }}>{children}</div>
+}
+
+Title.displayName = 'Title'
+
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -130,7 +228,11 @@ const withStyles =
     return <WrappedComponent {...styledProps} />
   }
 
-const SC = withStyles(generateStyles)(MobileTopNav)
+const SC: any = withStyles(generateStyles)(MobileTopNav)
+
+SC.BtnRow = BtnRow
+SC.BreadCrumb = BreadCrumb
+SC.Title = Title
 
 export { SC as MobileTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 841c08cc29..af0fc3d20c 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import type { ReactNode } from 'react'
+import type { ReactNode, PropsWithChildren } from 'react'
 
 type MobileTopNavOwnProps = {
   lightMode?: boolean
@@ -30,11 +30,22 @@ type MobileTopNavOwnProps = {
 }
 
 type MobileTopNavStyle = {
-  container: {
+  container: (open: boolean) => {
+    [key: string]: string | number
+  }
+  content: (open: boolean) => {
+    [key: string]: string | number
+  }
+  topBar: {
+    [key: string]: string | number
+  }
+  btnRow: {
     [key: string]: string | number
   }
 }
 
-type MobileTopNavProps = MobileTopNavOwnProps & { styles: MobileTopNavStyle }
+type MobileTopNavProps = MobileTopNavOwnProps & {
+  styles: MobileTopNavStyle
+} & PropsWithChildren
 
 export type { MobileTopNavProps, MobileTopNavOwnProps }

From 0cd034c03d0a19de77891158b7dfb458936c0a9a Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Sep 2024 09:20:57 +0200
Subject: [PATCH 03/53] WIP(ui-top-nav-bar): add item and itemlist

---
 packages/__docs__/src/App/index.tsx           |  34 ++++-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 120 ++++++++++--------
 .../src/MobileTopNav/styles.tsx               |  91 +++++++++++++
 3 files changed, 188 insertions(+), 57 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 102d2def97..a69b860aeb 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -32,7 +32,7 @@ import {
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
-import { InstUISettingsProvider, withStyle, Global } from '@instructure/emotion'
+import { InstUISettingsProvider, withStyle } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
@@ -44,8 +44,14 @@ import { Link } from '@instructure/ui-link'
 import { addMediaQueryMatchListener } from '@instructure/ui-responsive'
 import type { QueriesMatching } from '@instructure/ui-responsive'
 import {
-  IconHamburgerSolid,
+  IconAdminLine,
+  IconAlertsLine,
+  IconAnalyticsLine,
+  IconArrowOpenDownLine,
+  IconArrowOpenStartLine,
+  IconDashboardLine,
   IconHeartLine,
+  IconUserLine,
   IconXSolid
 } from '@instructure/ui-icons'
 
@@ -377,6 +383,7 @@ class App extends Component<AppProps, AppState> {
 
     const { layout } = this.state
     const smallerScreens = layout === 'small' || layout === 'medium'
+
     const themeContent = (
       <View
         as="div"
@@ -792,6 +799,29 @@ class App extends Component<AppProps, AppState> {
               </Link>
             </MobileTopNav.BreadCrumb>
             <MobileTopNav.Title>Courses</MobileTopNav.Title>
+            <MobileTopNav.ItemList>
+              <MobileTopNav.Item
+                leftIcon={<IconUserLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Account
+              </MobileTopNav.Item>
+              <MobileTopNav.Item
+                leftIcon={<IconAdminLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Admin
+              </MobileTopNav.Item>
+              <MobileTopNav.Item
+                leftIcon={<IconDashboardLine />}
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick
+              >
+                Dashboard
+              </MobileTopNav.Item>
+            </MobileTopNav.ItemList>
           </MobileTopNav>
           <p>
             1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 867835e1c2..e609fc45d3 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -24,13 +24,23 @@
  */
 
 /** @jsx jsx */
-import { Children, Fragment, useState, useEffect } from 'react'
-import type { PropsWithChildren } from 'react'
+import React, {
+  Children,
+  Fragment,
+  PropsWithChildren,
+  useEffect,
+  useState
+} from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
 import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
 import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
+import {
+  generateItemListStyles,
+  generateItemStyles,
+  generateStyles
+} from './styles'
 
 /**
 ---
@@ -57,10 +67,10 @@ const MobileTopNav = ({
   }
 
   return (
-    <div css={styles.container(open)}>
-      <div css={styles.topBar}>
+    <div style={styles.container(open)}>
+      <div style={styles.topBar}>
         {brand}
-        <span css={styles.btnRow}>
+        <span style={styles.btnRow}>
           {!open && getSubComponent('BtnRow')}
           <IconButton
             withBackground={false}
@@ -77,6 +87,7 @@ const MobileTopNav = ({
       <div style={styles.content(open)}>
         {getSubComponent('BreadCrumb')}
         {getSubComponent('Title')}
+        {getSubComponent('ItemList')}
         <p>
           1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
           excepturi a blanditiis, aspernatur repellat repellendus dolores cum
@@ -148,54 +159,6 @@ const MobileTopNav = ({
   )
 }
 
-const generateStyles = (props: MobileTopNavProps, theme: any) => {
-  const { lightMode } = props
-  return {
-    container: (open: boolean) => {
-      return {
-        height: '54px',
-        position: open ? 'fixed' : 'relative',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
-        width: '100%'
-      }
-    },
-    topBar: {
-      padding: `0 ${theme.spacing.small}`,
-      height: '54px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    content: (open: boolean) => {
-      return {
-        padding: `0 ${theme.spacing.small}`,
-        height: open ? '100%' : '0px',
-        top: '54px',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'scroll' : 'hidden',
-        position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
-      }
-    },
-    btnRow: {
-      display: 'flex',
-      gap: '12px'
-    }
-  }
-}
-
 const BtnRow = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
@@ -203,17 +166,59 @@ const BtnRow = ({ children }: PropsWithChildren) => {
 BtnRow.displayName = 'BtnRow'
 
 const BreadCrumb = ({ children }: PropsWithChildren) => {
-  return <div css={{ margin: '24px 0' }}>{children}</div>
+  return <div style={{ margin: '24px 0' }}>{children}</div>
 }
 
 BreadCrumb.displayName = 'BreadCrumb'
 
 const Title = ({ children }: PropsWithChildren) => {
-  return <div css={{ margin: '32px 0' }}>{children}</div>
+  return <div style={{ margin: '32px 0' }}>{children}</div>
 }
 
 Title.displayName = 'Title'
 
+const ItemList = ({
+  children,
+  styles
+}: PropsWithChildren & { styles: any }) => {
+  return (
+    <Fragment>
+      {Children.map(children, (child, index) => (
+        <Fragment>
+          {child}
+          {index < React.Children.count(children) - 1 && (
+            <div style={styles.divider}></div>
+          )}
+        </Fragment>
+      ))}
+    </Fragment>
+  )
+}
+
+ItemList.displayName = 'ItemList'
+
+const Item = ({
+  children,
+  leftIcon,
+  rightIcon,
+  onClick,
+  styles
+}: PropsWithChildren & {
+  leftIcon: any
+  rightIcon: any
+  onClick: any
+  styles: any
+}) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div style={styles.container} onClick={onClick}>
+      {leftIcon && <div style={styles.leftIcon}>{leftIcon}</div>}
+      {children}
+      {rightIcon && <div style={styles.rightIcon}>{rightIcon}</div>}
+    </div>
+  )
+}
+
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -233,6 +238,11 @@ const SC: any = withStyles(generateStyles)(MobileTopNav)
 SC.BtnRow = BtnRow
 SC.BreadCrumb = BreadCrumb
 SC.Title = Title
+SC.ItemList = withStyles(generateItemListStyles)(ItemList)
+// TODO investigate whether displayName should be added to the original component
+SC.ItemList.displayName = 'ItemList'
+SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
+SC.Item.displayName = 'Item'
 
 export { SC as MobileTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
new file mode 100644
index 0000000000..eee31e74e5
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -0,0 +1,91 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { MobileTopNavProps } from './props'
+
+export const generateStyles = (props: MobileTopNavProps, theme: any) => {
+  const { lightMode } = props
+  return {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%'
+      }
+    },
+    topBar: {
+      padding: `0 ${theme.spacing.small}`,
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    },
+    content: (open: boolean) => {
+      return {
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '3.375rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
+      }
+    },
+    btnRow: {
+      display: 'flex',
+      gap: '12px'
+    }
+  }
+}
+export const generateItemListStyles = (_props: any, theme: any) => {
+  return {
+    divider: {
+      height: '0.0625rem',
+      overflow: 'hidden',
+      background: theme.colors.contrasts.grey1214
+    }
+  }
+}
+export const generateItemStyles = (_props: any, _theme: any) => {
+  return {
+    container: {
+      margin: '16px 0',
+      display: 'flex'
+    },
+    leftIcon: { paddingRight: '8px', fontSize: '18px' },
+    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
+  }
+}

From 901dd8bf17a354ff2ff8bf57f5621b0749fd6c69 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Sep 2024 09:34:25 +0200
Subject: [PATCH 04/53] WIP(ui-top-nav-bar): some refactor

---
 packages/__docs__/src/App/index.tsx           |  6 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 66 -------------------
 .../src/MobileTopNav/styles.tsx               | 12 ++--
 3 files changed, 11 insertions(+), 73 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index a69b860aeb..212bee3db0 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -803,21 +803,21 @@ class App extends Component<AppProps, AppState> {
               <MobileTopNav.Item
                 leftIcon={<IconUserLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Account clicked')}
               >
                 Account
               </MobileTopNav.Item>
               <MobileTopNav.Item
                 leftIcon={<IconAdminLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Admin clicked')}
               >
                 Admin
               </MobileTopNav.Item>
               <MobileTopNav.Item
                 leftIcon={<IconDashboardLine />}
                 rightIcon={<IconArrowOpenDownLine />}
-                onClick
+                onClick={() => alert('Dashboard')}
               >
                 Dashboard
               </MobileTopNav.Item>
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index e609fc45d3..b0650ebd62 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -88,72 +88,6 @@ const MobileTopNav = ({
         {getSubComponent('BreadCrumb')}
         {getSubComponent('Title')}
         {getSubComponent('ItemList')}
-        <p>
-          1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
-        <p>
-          11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-          excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-          labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-          quibusdam, cumque id ab amet?
-        </p>
       </div>
     </div>
   )
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index eee31e74e5..60fbe10837 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -23,7 +23,7 @@
  */
 import type { MobileTopNavProps } from './props'
 
-export const generateStyles = (props: MobileTopNavProps, theme: any) => {
+const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
     container: (open: boolean) => {
@@ -70,7 +70,7 @@ export const generateStyles = (props: MobileTopNavProps, theme: any) => {
     }
   }
 }
-export const generateItemListStyles = (_props: any, theme: any) => {
+const generateItemListStyles = (_props: any, theme: any) => {
   return {
     divider: {
       height: '0.0625rem',
@@ -79,13 +79,17 @@ export const generateItemListStyles = (_props: any, theme: any) => {
     }
   }
 }
-export const generateItemStyles = (_props: any, _theme: any) => {
+const generateItemStyles = (_props: any, _theme: any) => {
   return {
     container: {
       margin: '16px 0',
-      display: 'flex'
+      display: 'flex',
+      cursor: 'pointer',
+      alignItems: 'flex-end'
     },
     leftIcon: { paddingRight: '8px', fontSize: '18px' },
     rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
   }
 }
+
+export { generateStyles, generateItemListStyles, generateItemStyles }

From 793f46d69df0ea8c791da478e1064c133b0aae1f Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Sep 2024 21:22:51 +0200
Subject: [PATCH 05/53] WIP(ui-top-nav-bar): add lightMode

---
 packages/__docs__/src/App/index.tsx           | 33 +++++++++++++++----
 packages/__docs__/src/App/props.ts            |  1 +
 .../src/MobileTopNav/styles.tsx               |  4 ++-
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 212bee3db0..23d8414bb5 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -32,6 +32,7 @@ import {
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
+import { Checkbox } from '@instructure/ui-checkbox'
 import { InstUISettingsProvider, withStyle } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
@@ -125,7 +126,8 @@ class App extends Component<AppProps, AppState> {
       layout: 'large',
       docsData: null,
       versionsData: null,
-      iconsData: null
+      iconsData: null,
+      lightMode: true
     }
   }
 
@@ -733,7 +735,6 @@ class App extends Component<AppProps, AppState> {
       return <LoadingScreen />
     }
 
-    const lightMode = false
     const brandSvg = (
       <IconButton
         screenReaderLabel="Canvas Brand"
@@ -769,13 +770,13 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <MobileTopNav brand={brandSvg} lightMode={lightMode}>
+          <MobileTopNav brand={brandSvg} lightMode={this.state.lightMode}>
             <MobileTopNav.BtnRow>
               <IconButton
                 withBackground={false}
                 withBorder={false}
                 screenReaderLabel="burgir"
-                color={lightMode ? 'secondary' : 'primary-inverse'}
+                color={this.state.lightMode ? 'secondary' : 'primary-inverse'}
               >
                 <IconAnalyticsLine />
               </IconButton>
@@ -783,13 +784,13 @@ class App extends Component<AppProps, AppState> {
                 withBackground={false}
                 withBorder={false}
                 screenReaderLabel="burgir"
-                color={lightMode ? 'secondary' : 'primary-inverse'}
+                color={this.state.lightMode ? 'secondary' : 'primary-inverse'}
               >
                 <IconAlertsLine />
               </IconButton>
             </MobileTopNav.BtnRow>
             <MobileTopNav.BreadCrumb>
-              <Link href="#" isWithinText={false} color="link-inverse">
+              <Link href="#" isWithinText={false} color={this.state.lightMode ? 'link' : 'link-inverse'}>
                 <div
                   style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                 >
@@ -821,8 +822,28 @@ class App extends Component<AppProps, AppState> {
               >
                 Dashboard
               </MobileTopNav.Item>
+              <MobileTopNav.Item
+                rightIcon={<IconArrowOpenDownLine />}
+                onClick={() => alert('Simple option with no left icon')}
+              >
+                Simple option with no left icon
+              </MobileTopNav.Item>
             </MobileTopNav.ItemList>
           </MobileTopNav>
+          <div style={{ marginTop: '600px' }}>
+            <Checkbox
+              label="Light mode"
+              value="small"
+              variant="toggle"
+              size="large"
+              checked={this.state.lightMode}
+              onChange={(e) => {
+                this.setState((prevState) => {
+                  return { ...prevState, lightMode: !prevState.lightMode }
+                })
+              }}
+            />
+          </div>
           <p>
             1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
             Molestias excepturi a blanditiis, aspernatur repellat repellendus
diff --git a/packages/__docs__/src/App/props.ts b/packages/__docs__/src/App/props.ts
index 663c3c967b..03e6a6f5d9 100644
--- a/packages/__docs__/src/App/props.ts
+++ b/packages/__docs__/src/App/props.ts
@@ -97,6 +97,7 @@ type AppState = {
   changelogData?: DocData
   // the currently shown document
   currentDocData?: DocData
+  lightMode: boolean
 }
 
 type ThemeFunctionsClassic = {
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index 60fbe10837..35cf5253ae 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -23,6 +23,7 @@
  */
 import type { MobileTopNavProps } from './props'
 
+//TODO use theme variables for spacing
 const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
@@ -36,7 +37,8 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
         color: lightMode
           ? theme.colors.contrasts.grey125125
           : theme.colors?.contrasts?.white1010,
-        width: '100%'
+        width: '100%',
+        zIndex: '1000'
       }
     },
     topBar: {

From aeb903ff11675959219d2890760e4f6a111a3609 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 20 Sep 2024 16:11:25 +0200
Subject: [PATCH 06/53] WIP: add WrapperComponent to test resizing

---
 packages/__docs__/src/App/index.tsx | 35 +++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 23d8414bb5..bcccf1027c 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -28,7 +28,9 @@ import {
   createContext,
   LegacyRef,
   ReactElement,
-  SyntheticEvent
+  SyntheticEvent,
+  useEffect,
+  useState
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
@@ -94,6 +96,30 @@ export const AppContext = createContext<AppContextType>({
   library: undefined
 })
 
+const WrapperComponent = (props) => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  const SmallScreen = () => <h1>Small screen</h1>
+  const BigScreen = () => <h1>Big screen</h1>
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth <= 768)
+    }
+
+    // Check on component mount
+    handleResize()
+
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize)
+
+    // Cleanup listener on component unmount
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return <>{isSmallScreen ? <SmallScreen /> : <BigScreen />}</>
+}
+
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
   static propTypes = propTypes
@@ -770,6 +796,7 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
+          <WrapperComponent />
           <MobileTopNav brand={brandSvg} lightMode={this.state.lightMode}>
             <MobileTopNav.BtnRow>
               <IconButton
@@ -790,7 +817,11 @@ class App extends Component<AppProps, AppState> {
               </IconButton>
             </MobileTopNav.BtnRow>
             <MobileTopNav.BreadCrumb>
-              <Link href="#" isWithinText={false} color={this.state.lightMode ? 'link' : 'link-inverse'}>
+              <Link
+                href="#"
+                isWithinText={false}
+                color={this.state.lightMode ? 'link' : 'link-inverse'}
+              >
                 <div
                   style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
                 >

From d54fd13bec058136a766695fc8efd90543441d0c Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 14 Nov 2024 10:07:26 +0100
Subject: [PATCH 07/53] WIP(ui-top-nav-bar): add desktop topnav

---
 packages/__docs__/src/App/index.tsx           | 456 +++++++++---------
 .../src/DesktopTopNav/README.md               | 107 ++++
 .../src/DesktopTopNav/index.tsx               | 107 ++++
 .../ui-top-nav-bar/src/DesktopTopNav/props.ts |  51 ++
 .../src/DesktopTopNav/styles.tsx              |  97 ++++
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |   2 +-
 packages/ui-top-nav-bar/src/index.ts          |   1 +
 7 files changed, 597 insertions(+), 224 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/DesktopTopNav/README.md
 create mode 100644 packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
 create mode 100644 packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
 create mode 100644 packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index bcccf1027c..4f6c3dd75e 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -34,13 +34,14 @@ import {
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
+import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import { Checkbox } from '@instructure/ui-checkbox'
 import { InstUISettingsProvider, withStyle } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
-import { MobileTopNav } from '@instructure/ui-top-nav-bar'
+import { MobileTopNav, DesktopTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import { Tray } from '@instructure/ui-tray'
 import { Link } from '@instructure/ui-link'
@@ -98,9 +99,236 @@ export const AppContext = createContext<AppContextType>({
 
 const WrapperComponent = (props) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
-
-  const SmallScreen = () => <h1>Small screen</h1>
-  const BigScreen = () => <h1>Big screen</h1>
+  const [isLightMode, setIsLightMode] = useState(false)
+
+  const brandSvg = (
+    <IconButton
+      screenReaderLabel="Canvas Brand"
+      href="#"
+      withBackground={false}
+      withBorder={false}
+    >
+      <svg
+        viewBox="0 0 1920 1920"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#fff"
+        width="28px"
+        height="28px"
+      >
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+      </svg>
+    </IconButton>
+  )
+
+  const SmallScreen = () => (
+    <div>
+      <MobileTopNav brand={brandSvg} lightMode={isLightMode}>
+        <MobileTopNav.BtnRow>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={isLightMode ? 'secondary' : 'primary-inverse'}
+          >
+            <IconAnalyticsLine />
+          </IconButton>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={isLightMode ? 'secondary' : 'primary-inverse'}
+          >
+            <IconAlertsLine />
+          </IconButton>
+        </MobileTopNav.BtnRow>
+        <MobileTopNav.BreadCrumb>
+          <Link
+            href="#"
+            isWithinText={false}
+            color={isLightMode ? 'link' : 'link-inverse'}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <IconArrowOpenStartLine />
+              Back
+            </div>
+          </Link>
+        </MobileTopNav.BreadCrumb>
+        <MobileTopNav.Title>Courses</MobileTopNav.Title>
+        <MobileTopNav.ItemList>
+          <MobileTopNav.Item
+            leftIcon={<IconUserLine />}
+            rightIcon={<IconArrowOpenDownLine />}
+            onClick={() => alert('Account clicked')}
+          >
+            Account
+          </MobileTopNav.Item>
+          <MobileTopNav.Item
+            leftIcon={<IconAdminLine />}
+            rightIcon={<IconArrowOpenDownLine />}
+            onClick={() => alert('Admin clicked')}
+          >
+            Admin
+          </MobileTopNav.Item>
+          <MobileTopNav.Item
+            leftIcon={<IconDashboardLine />}
+            rightIcon={<IconArrowOpenDownLine />}
+            onClick={() => alert('Dashboard')}
+          >
+            Dashboard
+          </MobileTopNav.Item>
+          <MobileTopNav.Item
+            rightIcon={<IconArrowOpenDownLine />}
+            onClick={() => alert('Simple option with no left icon')}
+          >
+            Simple option with no left icon
+          </MobileTopNav.Item>
+        </MobileTopNav.ItemList>
+      </MobileTopNav>
+      <div style={{ marginTop: '600px' }}>
+        <Checkbox
+          label="Light mode"
+          value="small"
+          variant="toggle"
+          size="large"
+          checked={isLightMode}
+          onChange={(e) => {
+            setIsLightMode((prev) => !prev)
+          }}
+        />
+      </div>
+      <p>
+        1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
+        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
+        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
+        quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+  const BigScreen = () => (
+    <DesktopTopNav>
+      <DesktopTopNav.BreadCrumb>
+        <Breadcrumb label="You are here:">
+          <Breadcrumb.Link>Student Forecast</Breadcrumb.Link>
+          <Breadcrumb.Link>University of Utah</Breadcrumb.Link>
+          <Breadcrumb.Link>University of Colleges</Breadcrumb.Link>
+        </Breadcrumb>
+      </DesktopTopNav.BreadCrumb>
+    </DesktopTopNav>
+  )
 
   useEffect(() => {
     const handleResize = () => {
@@ -152,8 +380,7 @@ class App extends Component<AppProps, AppState> {
       layout: 'large',
       docsData: null,
       versionsData: null,
-      iconsData: null,
-      lightMode: true
+      iconsData: null
     }
   }
 
@@ -761,25 +988,6 @@ class App extends Component<AppProps, AppState> {
       return <LoadingScreen />
     }
 
-    const brandSvg = (
-      <IconButton
-        screenReaderLabel="Canvas Brand"
-        href="#"
-        withBackground={false}
-        withBorder={false}
-      >
-        <svg
-          viewBox="0 0 1920 1920"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="#fff"
-          width="28px"
-          height="28px"
-        >
-          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
-        </svg>
-      </IconButton>
-    )
-
     return (
       <AppContext.Provider
         value={{
@@ -797,204 +1005,6 @@ class App extends Component<AppProps, AppState> {
           }}
         >
           <WrapperComponent />
-          <MobileTopNav brand={brandSvg} lightMode={this.state.lightMode}>
-            <MobileTopNav.BtnRow>
-              <IconButton
-                withBackground={false}
-                withBorder={false}
-                screenReaderLabel="burgir"
-                color={this.state.lightMode ? 'secondary' : 'primary-inverse'}
-              >
-                <IconAnalyticsLine />
-              </IconButton>
-              <IconButton
-                withBackground={false}
-                withBorder={false}
-                screenReaderLabel="burgir"
-                color={this.state.lightMode ? 'secondary' : 'primary-inverse'}
-              >
-                <IconAlertsLine />
-              </IconButton>
-            </MobileTopNav.BtnRow>
-            <MobileTopNav.BreadCrumb>
-              <Link
-                href="#"
-                isWithinText={false}
-                color={this.state.lightMode ? 'link' : 'link-inverse'}
-              >
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
-                >
-                  <IconArrowOpenStartLine />
-                  Back
-                </div>
-              </Link>
-            </MobileTopNav.BreadCrumb>
-            <MobileTopNav.Title>Courses</MobileTopNav.Title>
-            <MobileTopNav.ItemList>
-              <MobileTopNav.Item
-                leftIcon={<IconUserLine />}
-                rightIcon={<IconArrowOpenDownLine />}
-                onClick={() => alert('Account clicked')}
-              >
-                Account
-              </MobileTopNav.Item>
-              <MobileTopNav.Item
-                leftIcon={<IconAdminLine />}
-                rightIcon={<IconArrowOpenDownLine />}
-                onClick={() => alert('Admin clicked')}
-              >
-                Admin
-              </MobileTopNav.Item>
-              <MobileTopNav.Item
-                leftIcon={<IconDashboardLine />}
-                rightIcon={<IconArrowOpenDownLine />}
-                onClick={() => alert('Dashboard')}
-              >
-                Dashboard
-              </MobileTopNav.Item>
-              <MobileTopNav.Item
-                rightIcon={<IconArrowOpenDownLine />}
-                onClick={() => alert('Simple option with no left icon')}
-              >
-                Simple option with no left icon
-              </MobileTopNav.Item>
-            </MobileTopNav.ItemList>
-          </MobileTopNav>
-          <div style={{ marginTop: '600px' }}>
-            <Checkbox
-              label="Light mode"
-              value="small"
-              variant="toggle"
-              size="large"
-              checked={this.state.lightMode}
-              onChange={(e) => {
-                this.setState((prevState) => {
-                  return { ...prevState, lightMode: !prevState.lightMode }
-                })
-              }}
-            />
-          </div>
-          <p>
-            1 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            2 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            3 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            4 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            5 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            6 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            7 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            8 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            9 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            10 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            11 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            12 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            13 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            14 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            15 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            16 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            17 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            18 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            19 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
-          <p>
-            20 Lorem ipsum dolor sit, amet consectetur adipisicing elit.
-            Molestias excepturi a blanditiis, aspernatur repellat repellendus
-            dolores cum labore eligendi architecto asperiores, dolor quisquam
-            sequi mollitia quibusdam, cumque id ab amet?
-          </p>
         </div>
       </AppContext.Provider>
     )
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/README.md b/packages/ui-top-nav-bar/src/DesktopTopNav/README.md
new file mode 100644
index 0000000000..32fd6797e8
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/README.md
@@ -0,0 +1,107 @@
+---
+describes: MobileTopNav
+---
+
+POC mobile top nav
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const lightMode = false
+  const brandSvg = (
+    <IconButton screenReaderLabel="Canvas Brand" href="#">
+      <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+      </svg>
+    </IconButton>
+  )
+  return (
+    <div>
+      <p>
+        1
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+}
+
+render(<Example />)
+```
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
new file mode 100644
index 0000000000..5250f66576
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable react/display-name */
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { Children, PropsWithChildren, useEffect, useState } from 'react'
+import { jsx, useTheme } from '@instructure/emotion'
+import type { DesktopTopNavProps } from './props'
+
+import { IconButton } from '@instructure/ui-buttons'
+import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
+import { generateStyles } from './styles'
+
+/**
+---
+category: components
+---
+**/
+const DesktopTopNav = ({
+  lightMode = false,
+  styles,
+  children
+}: DesktopTopNavProps) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  useEffect(() => {
+    const body = document.getElementsByTagName('body')[0]
+    body.style.overflow = open ? 'hidden' : 'visible'
+  }, [open])
+
+  const getSubComponent = (displayName: any) => {
+    return Children.map(children, (child: any) => child)?.filter(
+      (child: any) => child?.type?.displayName === displayName
+    )
+  }
+
+  return (
+    <div style={styles.container(open)}>
+      <div style={styles.topBar}>
+        <span style={styles.btnRow}>
+          {/*{!open && getSubComponent('BtnRow')}*/}
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel="burgir"
+            color={lightMode ? 'secondary' : 'primary-inverse'}
+            onClick={() => setOpen((open) => !open)}
+          >
+            {open ? <IconXLine /> : <IconHamburgerLine />}
+          </IconButton>
+        </span>
+        {getSubComponent('BreadCrumb')}
+      </div>
+    </div>
+  )
+}
+
+const BreadCrumb = ({ children }: PropsWithChildren) => {
+  return (
+    <div style={{ margin: '24px 0', display: 'inline-block' }}>{children}</div>
+  )
+}
+
+BreadCrumb.displayName = 'BreadCrumb'
+
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC: any = withStyles(generateStyles)(DesktopTopNav)
+
+SC.BreadCrumb = BreadCrumb
+// TODO investigate whether displayName should be added to the original component
+
+export { SC as DesktopTopNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
new file mode 100644
index 0000000000..86d2efe2ad
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
@@ -0,0 +1,51 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ReactNode, PropsWithChildren } from 'react'
+
+type DesktopTopNavOwnProps = {
+  lightMode?: boolean
+  brand?: ReactNode
+}
+
+type DesktopTopNavStyle = {
+  container: (open: boolean) => {
+    [key: string]: string | number
+  }
+  content: (open: boolean) => {
+    [key: string]: string | number
+  }
+  topBar: {
+    [key: string]: string | number
+  }
+  btnRow: {
+    [key: string]: string | number
+  }
+}
+
+type DesktopTopNavProps = DesktopTopNavOwnProps & {
+  styles: DesktopTopNavStyle
+} & PropsWithChildren
+
+export type { DesktopTopNavProps, DesktopTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
new file mode 100644
index 0000000000..720f5901f2
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { DesktopTopNavProps } from './props'
+
+//TODO use theme variables for spacing
+const generateStyles = (props: DesktopTopNavProps, theme: any) => {
+  const { lightMode } = props
+  return {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%',
+        zIndex: '1000'
+      }
+    },
+    topBar: {
+      padding: `0 ${theme.spacing.small}`,
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center'
+      // justifyContent: 'space-between'
+    },
+    content: (open: boolean) => {
+      return {
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '3.375rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
+      }
+    },
+    btnRow: {
+      display: 'flex',
+      gap: '12px'
+    }
+  }
+}
+const generateItemListStyles = (_props: any, theme: any) => {
+  return {
+    divider: {
+      height: '0.0625rem',
+      overflow: 'hidden',
+      background: theme.colors.contrasts.grey1214
+    }
+  }
+}
+const generateItemStyles = (_props: any, _theme: any) => {
+  return {
+    container: {
+      margin: '16px 0',
+      display: 'flex',
+      cursor: 'pointer',
+      alignItems: 'flex-end'
+    },
+    leftIcon: { paddingRight: '8px', fontSize: '18px' },
+    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
+  }
+}
+
+export { generateStyles, generateItemListStyles, generateItemStyles }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index b0650ebd62..ca853b2d98 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -61,7 +61,7 @@ const MobileTopNav = ({
   }, [open])
 
   const getSubComponent = (displayName: any) => {
-    return Children.map(children, (child: any) => child).filter(
+    return Children.map(children, (child: any) => child)?.filter(
       (child: any) => child?.type?.displayName === displayName
     )
   }
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index f82f86862f..5363e924d2 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -69,3 +69,4 @@ export type {
 } from './TopNavBar/TopNavBarUser/props'
 
 export { MobileTopNav } from './MobileTopNav'
+export { DesktopTopNav } from './DesktopTopNav'

From a5a85a856966b38113eaab61163a7dade0da9bc9 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Sun, 17 Nov 2024 16:07:53 +0100
Subject: [PATCH 08/53] WIP(ui-top-nav-bar): some refactoring

---
 packages/__docs__/src/App/index.tsx           | 121 ++++++++++++++++--
 .../src/DesktopTopNav/index.tsx               |   2 +
 .../src/DesktopTopNav/styles.tsx              |   2 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |   1 +
 .../src/MobileTopNav/styles.tsx               |   6 +-
 packages/ui-top-nav-bar/src/TopNav/README.md  | 107 ++++++++++++++++
 packages/ui-top-nav-bar/src/TopNav/index.tsx  | 113 ++++++++++++++++
 packages/ui-top-nav-bar/src/TopNav/props.ts   |  35 +++++
 packages/ui-top-nav-bar/src/TopNav/styles.tsx |  97 ++++++++++++++
 packages/ui-top-nav-bar/src/index.ts          |   1 +
 10 files changed, 468 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/TopNav/README.md
 create mode 100644 packages/ui-top-nav-bar/src/TopNav/index.tsx
 create mode 100644 packages/ui-top-nav-bar/src/TopNav/props.ts
 create mode 100644 packages/ui-top-nav-bar/src/TopNav/styles.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 4f6c3dd75e..331232077c 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-undef */
 /*
  * The MIT License (MIT)
  *
@@ -28,20 +27,21 @@ import {
   createContext,
   LegacyRef,
   ReactElement,
-  SyntheticEvent,
-  useEffect,
-  useState
+  SyntheticEvent
 } from 'react'
 
 import { Alert } from '@instructure/ui-alerts'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
-import { Checkbox } from '@instructure/ui-checkbox'
 import { InstUISettingsProvider, withStyle } from '@instructure/emotion'
 import { Flex } from '@instructure/ui-flex'
 import { Text } from '@instructure/ui-text'
 import { View } from '@instructure/ui-view'
 import { AccessibleContent } from '@instructure/ui-a11y-content'
-import { MobileTopNav, DesktopTopNav } from '@instructure/ui-top-nav-bar'
+import {
+  MobileTopNav,
+  DesktopTopNav,
+  TopNav
+} from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import { Tray } from '@instructure/ui-tray'
 import { Link } from '@instructure/ui-link'
@@ -58,7 +58,6 @@ import {
   IconUserLine,
   IconXSolid
 } from '@instructure/ui-icons'
-
 import { ContentWrap } from '../ContentWrap'
 import { Document } from '../Document'
 import { Header } from '../Header'
@@ -72,7 +71,6 @@ import { Icons } from '../Icons'
 import { compileMarkdown } from '../compileMarkdown'
 
 import { fetchVersionData, versionInPath } from '../versionData'
-
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { LoadingScreen } from '../LoadingScreen'
@@ -97,7 +95,7 @@ export const AppContext = createContext<AppContextType>({
   library: undefined
 })
 
-const WrapperComponent = (props) => {
+/*const WrapperComponent = (props) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
   const [isLightMode, setIsLightMode] = useState(false)
 
@@ -346,7 +344,7 @@ const WrapperComponent = (props) => {
   }, [])
 
   return <>{isSmallScreen ? <SmallScreen /> : <BigScreen />}</>
-}
+}*/
 
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
@@ -396,7 +394,6 @@ class App extends Component<AppProps, AppState> {
       docData.componentInstance = everyComp[components[0]][components[1]]
     } else {
       docData.componentInstance =
-        // eslint-disable-next-line import-x/namespace
         EveryComponent[docId as keyof typeof EveryComponent]
     }
     return docData
@@ -427,7 +424,6 @@ class App extends Component<AppProps, AppState> {
    * @returns {Set<string>} the properties
    */
   getAllPropNames(object: Record<string, any>) {
-    // eslint-disable-next-line @typescript-eslint/ban-types
     let obj: object | null = object
     const props: Set<string> = new Set()
     // exclude some common static props for performance
@@ -984,6 +980,27 @@ class App extends Component<AppProps, AppState> {
     const key = this.state.key
     const { showMenu, layout, docsData, iconsData } = this.state
 
+    const isLightMode = false
+
+    const brandSvg = (
+      <IconButton
+        screenReaderLabel="Canvas Brand"
+        href="#"
+        withBackground={false}
+        withBorder={false}
+      >
+        <svg
+          viewBox="0 0 1920 1920"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="#fff"
+          width="28px"
+          height="28px"
+        >
+          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+        </svg>
+      </IconButton>
+    )
+
     if (!docsData || !iconsData) {
       return <LoadingScreen />
     }
@@ -1004,7 +1021,85 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <WrapperComponent />
+          <TopNav>
+            <DesktopTopNav>
+              <DesktopTopNav.BreadCrumb>
+                <Breadcrumb label="You are here:">
+                  <Breadcrumb.Link>Student Forecast</Breadcrumb.Link>
+                  <Breadcrumb.Link>University of Utah</Breadcrumb.Link>
+                  <Breadcrumb.Link>University of Colleges</Breadcrumb.Link>
+                </Breadcrumb>
+              </DesktopTopNav.BreadCrumb>
+            </DesktopTopNav>
+            <MobileTopNav brand={brandSvg} lightMode={isLightMode}>
+              <MobileTopNav.BtnRow>
+                <IconButton
+                  withBackground={false}
+                  withBorder={false}
+                  screenReaderLabel="burgir"
+                  color={isLightMode ? 'secondary' : 'primary-inverse'}
+                >
+                  <IconAnalyticsLine />
+                </IconButton>
+                <IconButton
+                  withBackground={false}
+                  withBorder={false}
+                  screenReaderLabel="burgir"
+                  color={isLightMode ? 'secondary' : 'primary-inverse'}
+                >
+                  <IconAlertsLine />
+                </IconButton>
+              </MobileTopNav.BtnRow>
+              <MobileTopNav.BreadCrumb>
+                <Link
+                  href="#"
+                  isWithinText={false}
+                  color={isLightMode ? 'link' : 'link-inverse'}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}
+                  >
+                    <IconArrowOpenStartLine />
+                    Back
+                  </div>
+                </Link>
+              </MobileTopNav.BreadCrumb>
+              <MobileTopNav.Title>Courses</MobileTopNav.Title>
+              <MobileTopNav.ItemList>
+                <MobileTopNav.Item
+                  leftIcon={<IconUserLine />}
+                  rightIcon={<IconArrowOpenDownLine />}
+                  onClick={() => alert('Account clicked')}
+                >
+                  Account
+                </MobileTopNav.Item>
+                <MobileTopNav.Item
+                  leftIcon={<IconAdminLine />}
+                  rightIcon={<IconArrowOpenDownLine />}
+                  onClick={() => alert('Admin clicked')}
+                >
+                  Admin
+                </MobileTopNav.Item>
+                <MobileTopNav.Item
+                  leftIcon={<IconDashboardLine />}
+                  rightIcon={<IconArrowOpenDownLine />}
+                  onClick={() => alert('Dashboard')}
+                >
+                  Dashboard
+                </MobileTopNav.Item>
+                <MobileTopNav.Item
+                  rightIcon={<IconArrowOpenDownLine />}
+                  onClick={() => alert('Simple option with no left icon')}
+                >
+                  Simple option with no left icon
+                </MobileTopNav.Item>
+              </MobileTopNav.ItemList>
+            </MobileTopNav>
+          </TopNav>
         </div>
       </AppContext.Provider>
     )
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index 5250f66576..761efbf422 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -103,5 +103,7 @@ const SC: any = withStyles(generateStyles)(DesktopTopNav)
 SC.BreadCrumb = BreadCrumb
 // TODO investigate whether displayName should be added to the original component
 
+SC.displayName = 'DesktopTopNav'
+
 export { SC as DesktopTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 720f5901f2..1eb62c5721 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -68,7 +68,7 @@ const generateStyles = (props: DesktopTopNavProps, theme: any) => {
     },
     btnRow: {
       display: 'flex',
-      gap: '12px'
+      marginRight: '12px'
     }
   }
 }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index ca853b2d98..299d7749a6 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -177,6 +177,7 @@ SC.ItemList = withStyles(generateItemListStyles)(ItemList)
 SC.ItemList.displayName = 'ItemList'
 SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
 SC.Item.displayName = 'Item'
+SC.displayName = 'MobileTopNav'
 
 export { SC as MobileTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index 35cf5253ae..65b2c058d4 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -27,10 +27,10 @@ import type { MobileTopNavProps } from './props'
 const generateStyles = (props: MobileTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: (open: boolean) => {
+    container: (_open: boolean) => {
       return {
         height: '54px',
-        position: open ? 'fixed' : 'relative',
+        // position: open ? 'fixed' : 'relative',
         backgroundColor: lightMode
           ? theme.colors.ui.surfacePageSecondary
           : theme.colors.ui.surfaceDark,
@@ -38,7 +38,7 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
           ? theme.colors.contrasts.grey125125
           : theme.colors?.contrasts?.white1010,
         width: '100%',
-        zIndex: '1000'
+        zIndex: '9999'
       }
     },
     topBar: {
diff --git a/packages/ui-top-nav-bar/src/TopNav/README.md b/packages/ui-top-nav-bar/src/TopNav/README.md
new file mode 100644
index 0000000000..32fd6797e8
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/TopNav/README.md
@@ -0,0 +1,107 @@
+---
+describes: MobileTopNav
+---
+
+POC mobile top nav
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const lightMode = false
+  const brandSvg = (
+    <IconButton screenReaderLabel="Canvas Brand" href="#">
+      <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+      </svg>
+    </IconButton>
+  )
+  return (
+    <div>
+      <p>
+        1
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+}
+
+render(<Example />)
+```
diff --git a/packages/ui-top-nav-bar/src/TopNav/index.tsx b/packages/ui-top-nav-bar/src/TopNav/index.tsx
new file mode 100644
index 0000000000..63b8ec0f58
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/TopNav/index.tsx
@@ -0,0 +1,113 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import React, { useEffect, useState } from 'react'
+import type { TopNavProps } from './props'
+
+/**
+ ---
+ category: components
+ ---
+ **/
+const TopNav = ({ children, breakpoint = '768' }: TopNavProps) => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth <= Number(breakpoint))
+    }
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  // Filter children to get specific components
+  const mobileNav = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      child?.type &&
+      (child.type as any).displayName === 'MobileTopNav'
+  )
+  const desktopNav = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      child?.type &&
+      (child.type as any).displayName === 'DesktopTopNav'
+  )
+
+  return isSmallScreen ? mobileNav : desktopNav
+}
+
+// <TopNav
+//   brand={
+//     <IconButton
+//       screenReaderLabel="Canvas Brand"
+//       href="#"
+//       withBackground={false}
+//       withBorder={false}
+//     >
+//       <svg viewBox="0 0 1920 1920" fill="#fff" width="28px" height="28px">
+//         <path d="M958.568 277.97C1100.42..." />
+//       </svg>
+//     </IconButton>
+//   }
+//   lightMode={true}
+//   breadcrumbLinks={[
+//     { href: '#', label: 'Student Forecast' },
+//     { href: '#', label: 'University of Utah' },
+//     { href: '#', label: 'University of Colleges' },
+//   ]}
+//   title="Courses"
+//   buttons={[
+//     {
+//       screenReaderLabel: 'Analytics',
+//       color: 'primary-inverse',
+//     },
+//     {
+//       screenReaderLabel: 'Alerts',
+//       color: 'primary-inverse',
+//     },
+//   ]}
+//   items={[
+//     { label: 'Account', leftIcon: <IconUserLine />, onClick: () => alert('Account clicked') },
+//     { label: 'Admin', leftIcon: <IconAdminLine />, onClick: () => alert('Admin clicked') },
+//     { label: 'Dashboard', leftIcon: <IconDashboardLine />, onClick: () => alert('Dashboard') },
+//   ]}
+// />
+
+// <TopNav lightMode={true} >
+//   <MobileTopNav>
+//     <div>Mobile Navigation Content</div>
+//   </MobileTopNav>
+//   <DesktopTopNav>
+//     <div>Desktop Navigation Content</div>
+//   </DesktopTopNav>
+// </TopNav>
+
+export { TopNav }
+export default TopNav
diff --git a/packages/ui-top-nav-bar/src/TopNav/props.ts b/packages/ui-top-nav-bar/src/TopNav/props.ts
new file mode 100644
index 0000000000..e54a42c349
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/TopNav/props.ts
@@ -0,0 +1,35 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ReactNode, PropsWithChildren } from 'react'
+
+type TopNavOwnProps = {
+  lightMode?: boolean
+  brand?: ReactNode
+  breakpoint?: string
+}
+
+type TopNavProps = TopNavOwnProps & PropsWithChildren
+
+export type { TopNavProps, TopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/TopNav/styles.tsx b/packages/ui-top-nav-bar/src/TopNav/styles.tsx
new file mode 100644
index 0000000000..f5fb6c95f2
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/TopNav/styles.tsx
@@ -0,0 +1,97 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { TopNavProps } from './props'
+
+//TODO use theme variables for spacing
+const generateStyles = (props: TopNavProps, theme: any) => {
+  const { lightMode } = props
+  return {
+    container: (open: boolean) => {
+      return {
+        height: '54px',
+        position: open ? 'fixed' : 'relative',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010,
+        width: '100%',
+        zIndex: '1000'
+      }
+    },
+    topBar: {
+      padding: `0 ${theme.spacing.small}`,
+      height: '54px',
+      display: 'flex',
+      alignItems: 'center'
+      // justifyContent: 'space-between'
+    },
+    content: (open: boolean) => {
+      return {
+        padding: `0 ${theme.spacing.small}`,
+        height: open ? '100%' : '0px',
+        top: '3.375rem',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: open ? 'scroll' : 'hidden',
+        position: 'fixed',
+        backgroundColor: lightMode
+          ? theme.colors.ui.surfacePageSecondary
+          : theme.colors.ui.surfaceDark,
+        color: lightMode
+          ? theme.colors.contrasts.grey125125
+          : theme.colors?.contrasts?.white1010
+      }
+    },
+    btnRow: {
+      display: 'flex',
+      marginRight: '12px'
+    }
+  }
+}
+const generateItemListStyles = (_props: any, theme: any) => {
+  return {
+    divider: {
+      height: '0.0625rem',
+      overflow: 'hidden',
+      background: theme.colors.contrasts.grey1214
+    }
+  }
+}
+const generateItemStyles = (_props: any, _theme: any) => {
+  return {
+    container: {
+      margin: '16px 0',
+      display: 'flex',
+      cursor: 'pointer',
+      alignItems: 'flex-end'
+    },
+    leftIcon: { paddingRight: '8px', fontSize: '18px' },
+    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
+  }
+}
+
+export { generateStyles, generateItemListStyles, generateItemStyles }
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index 5363e924d2..c1f0bc35e1 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -70,3 +70,4 @@ export type {
 
 export { MobileTopNav } from './MobileTopNav'
 export { DesktopTopNav } from './DesktopTopNav'
+export { TopNav } from './TopNav'

From 7a1a57114cd088ae97e52ae564c9faf8ee7bcf2d Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 18 Nov 2024 14:19:10 +0100
Subject: [PATCH 09/53] WIP(ui-top-nav-bar): inject lightMode

---
 packages/__docs__/src/App/index.tsx          |  7 ++++---
 packages/ui-top-nav-bar/src/TopNav/index.tsx | 17 ++++++++++++++---
 packages/ui-top-nav-bar/src/TopNav/props.ts  |  3 +--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 331232077c..43cff9e1b1 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -980,7 +980,7 @@ class App extends Component<AppProps, AppState> {
     const key = this.state.key
     const { showMenu, layout, docsData, iconsData } = this.state
 
-    const isLightMode = false
+    const isLightMode = true
 
     const brandSvg = (
       <IconButton
@@ -988,6 +988,7 @@ class App extends Component<AppProps, AppState> {
         href="#"
         withBackground={false}
         withBorder={false}
+        color={isLightMode ? 'secondary' : 'primary-inverse'}
       >
         <svg
           viewBox="0 0 1920 1920"
@@ -1021,7 +1022,7 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <TopNav>
+          <TopNav lightMode={isLightMode}>
             <DesktopTopNav>
               <DesktopTopNav.BreadCrumb>
                 <Breadcrumb label="You are here:">
@@ -1031,7 +1032,7 @@ class App extends Component<AppProps, AppState> {
                 </Breadcrumb>
               </DesktopTopNav.BreadCrumb>
             </DesktopTopNav>
-            <MobileTopNav brand={brandSvg} lightMode={isLightMode}>
+            <MobileTopNav brand={brandSvg}>
               <MobileTopNav.BtnRow>
                 <IconButton
                   withBackground={false}
diff --git a/packages/ui-top-nav-bar/src/TopNav/index.tsx b/packages/ui-top-nav-bar/src/TopNav/index.tsx
index 63b8ec0f58..b86bb2eb04 100644
--- a/packages/ui-top-nav-bar/src/TopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/TopNav/index.tsx
@@ -31,7 +31,11 @@ import type { TopNavProps } from './props'
  category: components
  ---
  **/
-const TopNav = ({ children, breakpoint = '768' }: TopNavProps) => {
+const TopNav = ({
+  children,
+  breakpoint = '768',
+  lightMode = true
+}: TopNavProps) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
   useEffect(() => {
@@ -46,7 +50,6 @@ const TopNav = ({ children, breakpoint = '768' }: TopNavProps) => {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
-  // Filter children to get specific components
   const mobileNav = React.Children.toArray(children).find(
     (child) =>
       React.isValidElement(child) &&
@@ -60,7 +63,15 @@ const TopNav = ({ children, breakpoint = '768' }: TopNavProps) => {
       (child.type as any).displayName === 'DesktopTopNav'
   )
 
-  return isSmallScreen ? mobileNav : desktopNav
+  // Clone and inject the lightMode prop into identified children
+  const mobileNavWithProps = mobileNav
+    ? React.cloneElement(mobileNav as React.ReactElement, { lightMode })
+    : null
+  const desktopNavWithProps = desktopNav
+    ? React.cloneElement(desktopNav as React.ReactElement, { lightMode })
+    : null
+
+  return isSmallScreen ? mobileNavWithProps : desktopNavWithProps
 }
 
 // <TopNav
diff --git a/packages/ui-top-nav-bar/src/TopNav/props.ts b/packages/ui-top-nav-bar/src/TopNav/props.ts
index e54a42c349..9b264a6d29 100644
--- a/packages/ui-top-nav-bar/src/TopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/TopNav/props.ts
@@ -22,11 +22,10 @@
  * SOFTWARE.
  */
 
-import type { ReactNode, PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 type TopNavOwnProps = {
   lightMode?: boolean
-  brand?: ReactNode
   breakpoint?: string
 }
 

From 070b9413f24d6abfc1abfc99b725aa5692649f69 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 26 Nov 2024 16:49:15 +0100
Subject: [PATCH 10/53] WIP(ui-top-nav-bar): clean DesktopTopNav

---
 packages/__docs__/src/App/index.tsx           | 127 +++++++-----------
 .../src/{TopNav => CanvasTopNav}/README.md    |   0
 .../src/{TopNav => CanvasTopNav}/index.tsx    | 112 +++++++++------
 .../src/{TopNav => CanvasTopNav}/props.ts     |   0
 .../src/{TopNav => CanvasTopNav}/styles.tsx   |   0
 .../src/DesktopTopNav/index.tsx               |  62 +++------
 .../src/DesktopTopNav/styles.tsx              |  85 ++++--------
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |   2 +-
 packages/ui-top-nav-bar/src/index.ts          |   2 +-
 9 files changed, 164 insertions(+), 226 deletions(-)
 rename packages/ui-top-nav-bar/src/{TopNav => CanvasTopNav}/README.md (100%)
 rename packages/ui-top-nav-bar/src/{TopNav => CanvasTopNav}/index.tsx (57%)
 rename packages/ui-top-nav-bar/src/{TopNav => CanvasTopNav}/props.ts (100%)
 rename packages/ui-top-nav-bar/src/{TopNav => CanvasTopNav}/styles.tsx (100%)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 43cff9e1b1..9f9a1212ec 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -40,7 +40,7 @@ import { AccessibleContent } from '@instructure/ui-a11y-content'
 import {
   MobileTopNav,
   DesktopTopNav,
-  TopNav
+  CanvasTopNav
 } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import { Tray } from '@instructure/ui-tray'
@@ -1022,85 +1022,52 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <TopNav lightMode={isLightMode}>
-            <DesktopTopNav>
-              <DesktopTopNav.BreadCrumb>
-                <Breadcrumb label="You are here:">
-                  <Breadcrumb.Link>Student Forecast</Breadcrumb.Link>
-                  <Breadcrumb.Link>University of Utah</Breadcrumb.Link>
-                  <Breadcrumb.Link>University of Colleges</Breadcrumb.Link>
-                </Breadcrumb>
-              </DesktopTopNav.BreadCrumb>
-            </DesktopTopNav>
-            <MobileTopNav brand={brandSvg}>
-              <MobileTopNav.BtnRow>
-                <IconButton
-                  withBackground={false}
-                  withBorder={false}
-                  screenReaderLabel="burgir"
-                  color={isLightMode ? 'secondary' : 'primary-inverse'}
-                >
-                  <IconAnalyticsLine />
-                </IconButton>
-                <IconButton
-                  withBackground={false}
-                  withBorder={false}
-                  screenReaderLabel="burgir"
-                  color={isLightMode ? 'secondary' : 'primary-inverse'}
-                >
-                  <IconAlertsLine />
-                </IconButton>
-              </MobileTopNav.BtnRow>
-              <MobileTopNav.BreadCrumb>
-                <Link
-                  href="#"
-                  isWithinText={false}
-                  color={isLightMode ? 'link' : 'link-inverse'}
-                >
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px'
-                    }}
-                  >
-                    <IconArrowOpenStartLine />
-                    Back
-                  </div>
-                </Link>
-              </MobileTopNav.BreadCrumb>
-              <MobileTopNav.Title>Courses</MobileTopNav.Title>
-              <MobileTopNav.ItemList>
-                <MobileTopNav.Item
-                  leftIcon={<IconUserLine />}
-                  rightIcon={<IconArrowOpenDownLine />}
-                  onClick={() => alert('Account clicked')}
-                >
-                  Account
-                </MobileTopNav.Item>
-                <MobileTopNav.Item
-                  leftIcon={<IconAdminLine />}
-                  rightIcon={<IconArrowOpenDownLine />}
-                  onClick={() => alert('Admin clicked')}
-                >
-                  Admin
-                </MobileTopNav.Item>
-                <MobileTopNav.Item
-                  leftIcon={<IconDashboardLine />}
-                  rightIcon={<IconArrowOpenDownLine />}
-                  onClick={() => alert('Dashboard')}
-                >
-                  Dashboard
-                </MobileTopNav.Item>
-                <MobileTopNav.Item
-                  rightIcon={<IconArrowOpenDownLine />}
-                  onClick={() => alert('Simple option with no left icon')}
-                >
-                  Simple option with no left icon
-                </MobileTopNav.Item>
-              </MobileTopNav.ItemList>
-            </MobileTopNav>
-          </TopNav>
+          <CanvasTopNav
+            brand={brandSvg}
+            lightMode={true}
+            breadcrumbLinks={[
+              { href: '#', label: 'Student Forecast' },
+              { href: '#', label: 'University of Utah' },
+              { href: '#', label: 'University of Colleges' }
+            ]}
+            title="Courses"
+            buttons={[
+              {
+                screenReaderLabel: 'Analytics', // itt icon is lesz!!!!!
+                color: 'primary-inverse'
+              },
+              {
+                screenReaderLabel: 'Alerts', // itt icon lesz!!!!!
+                color: 'primary-inverse'
+              }
+            ]}
+            backButton={{ href: '#', label: 'Back' }}
+            items={[
+              {
+                label: 'Account',
+                leftIcon: <IconUserLine />,
+                rightIcon: <IconArrowOpenDownLine />,
+                onClick: () => alert('Account clicked')
+              },
+              {
+                label: 'Admin',
+                leftIcon: <IconAdminLine />,
+                rightIcon: <IconArrowOpenDownLine />,
+                onClick: () => alert('Admin clicked')
+              },
+              {
+                label: 'Dashboard',
+                leftIcon: <IconDashboardLine />,
+                rightIcon: <IconArrowOpenDownLine />,
+                onClick: () => alert('Dashboard clicked')
+              },
+              {
+                label: 'Simple option with no left icon',
+                rightIcon: <IconArrowOpenDownLine />,
+                onClick: () => alert('Simple option with no left icon')
+              }
+            ]}
+          />
         </div>
       </AppContext.Provider>
     )
diff --git a/packages/ui-top-nav-bar/src/TopNav/README.md b/packages/ui-top-nav-bar/src/CanvasTopNav/README.md
similarity index 100%
rename from packages/ui-top-nav-bar/src/TopNav/README.md
rename to packages/ui-top-nav-bar/src/CanvasTopNav/README.md
diff --git a/packages/ui-top-nav-bar/src/TopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
similarity index 57%
rename from packages/ui-top-nav-bar/src/TopNav/index.tsx
rename to packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index b86bb2eb04..20fbaeaa6a 100644
--- a/packages/ui-top-nav-bar/src/TopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -23,58 +23,90 @@
  */
 
 /** @jsx jsx */
-import React, { useEffect, useState } from 'react'
-import type { TopNavProps } from './props'
+import { useEffect, useState } from 'react'
+import { DesktopTopNav } from '../DesktopTopNav'
+import { MobileTopNav } from '../MobileTopNav'
+import { jsx } from '@instructure/emotion'
+import {
+  IconAddLine,
+  IconAdminSolid,
+  IconHamburgerLine,
+  IconXLine
+} from '@instructure/ui-icons'
+import { Button, IconButton } from '@instructure/ui-buttons'
+import { Breadcrumb } from '@instructure/ui-breadcrumb'
 
 /**
- ---
- category: components
- ---
- **/
-const TopNav = ({
-  children,
-  breakpoint = '768',
-  lightMode = true
-}: TopNavProps) => {
+---
+category: components
+---
+**/
+const CanvasTopNav = ({
+  breakpoint = 768,
+  lightMode = true,
+  brand,
+  breadcrumbLinks = [],
+  title,
+  buttons = [],
+  items = [],
+  backButton
+}: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
+  // Resize listener to check if the screen is small or not
   useEffect(() => {
     const handleResize = () => {
       setIsSmallScreen(window.innerWidth <= Number(breakpoint))
     }
 
     handleResize()
-
     window.addEventListener('resize', handleResize)
 
     return () => window.removeEventListener('resize', handleResize)
-  }, [])
+  }, [breakpoint])
 
-  const mobileNav = React.Children.toArray(children).find(
-    (child) =>
-      React.isValidElement(child) &&
-      child?.type &&
-      (child.type as any).displayName === 'MobileTopNav'
-  )
-  const desktopNav = React.Children.toArray(children).find(
-    (child) =>
-      React.isValidElement(child) &&
-      child?.type &&
-      (child.type as any).displayName === 'DesktopTopNav'
+  // Render mobile or desktop nav based on screen size
+  return isSmallScreen ? (
+    <MobileTopNav
+      lightMode={lightMode}
+      brand={brand}
+      breadcrumbLinks={breadcrumbLinks}
+      title={title}
+      buttons={buttons}
+      items={items}
+      backButton={backButton}
+    />
+  ) : (
+    <DesktopTopNav lightMode={lightMode} breadcrumbLinks={breadcrumbLinks}>
+      <DesktopTopNav.Start>
+        <IconButton
+          withBackground={false}
+          withBorder={false}
+          screenReaderLabel="burgir"
+          color={lightMode ? 'secondary' : 'primary-inverse'}
+        >
+          <IconHamburgerLine />
+        </IconButton>
+        <Breadcrumb label="You are here:">
+          {breadcrumbLinks.map((link, index) =>
+            link.href ? (
+              <Breadcrumb.Link key={index} href={link.href}>
+                {link.label}
+              </Breadcrumb.Link>
+            ) : (
+              <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+            )
+          )}
+        </Breadcrumb>
+      </DesktopTopNav.Start>
+      <DesktopTopNav.End>
+        <Button renderIcon={IconAddLine}>IconAddLine</Button>
+        <Button renderIcon={IconAdminSolid}>IconAdminSolid</Button>
+      </DesktopTopNav.End>
+    </DesktopTopNav>
   )
-
-  // Clone and inject the lightMode prop into identified children
-  const mobileNavWithProps = mobileNav
-    ? React.cloneElement(mobileNav as React.ReactElement, { lightMode })
-    : null
-  const desktopNavWithProps = desktopNav
-    ? React.cloneElement(desktopNav as React.ReactElement, { lightMode })
-    : null
-
-  return isSmallScreen ? mobileNavWithProps : desktopNavWithProps
 }
-
-// <TopNav
+// <CanvasTopNav
 //   brand={
 //     <IconButton
 //       screenReaderLabel="Canvas Brand"
@@ -111,14 +143,14 @@ const TopNav = ({
 //   ]}
 // />
 
-// <TopNav lightMode={true} >
+// <CanvasTopNav lightMode={true} >
 //   <MobileTopNav>
 //     <div>Mobile Navigation Content</div>
 //   </MobileTopNav>
 //   <DesktopTopNav>
 //     <div>Desktop Navigation Content</div>
 //   </DesktopTopNav>
-// </TopNav>
+// </CanvasTopNav>
 
-export { TopNav }
-export default TopNav
+export { CanvasTopNav }
+export default CanvasTopNav
diff --git a/packages/ui-top-nav-bar/src/TopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
similarity index 100%
rename from packages/ui-top-nav-bar/src/TopNav/props.ts
rename to packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
diff --git a/packages/ui-top-nav-bar/src/TopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
similarity index 100%
rename from packages/ui-top-nav-bar/src/TopNav/styles.tsx
rename to packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index 761efbf422..77e269d69f 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -24,65 +24,40 @@
  */
 
 /** @jsx jsx */
-import { Children, PropsWithChildren, useEffect, useState } from 'react'
+import { Children, PropsWithChildren } from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
 import type { DesktopTopNavProps } from './props'
 
-import { IconButton } from '@instructure/ui-buttons'
-import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
 import { generateStyles } from './styles'
 
 /**
----
-category: components
----
-**/
-const DesktopTopNav = ({
-  lightMode = false,
-  styles,
-  children
-}: DesktopTopNavProps) => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  useEffect(() => {
-    const body = document.getElementsByTagName('body')[0]
-    body.style.overflow = open ? 'hidden' : 'visible'
-  }, [open])
-
+ ---
+ category: utilities
+ ---
+ **/
+const DesktopTopNav = ({ styles, children }: DesktopTopNavProps) => {
   const getSubComponent = (displayName: any) => {
     return Children.map(children, (child: any) => child)?.filter(
       (child: any) => child?.type?.displayName === displayName
     )
   }
+  //console.log('getSubComponent', getSubComponent('Start'))
 
   return (
-    <div style={styles.container(open)}>
-      <div style={styles.topBar}>
-        <span style={styles.btnRow}>
-          {/*{!open && getSubComponent('BtnRow')}*/}
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel="burgir"
-            color={lightMode ? 'secondary' : 'primary-inverse'}
-            onClick={() => setOpen((open) => !open)}
-          >
-            {open ? <IconXLine /> : <IconHamburgerLine />}
-          </IconButton>
-        </span>
-        {getSubComponent('BreadCrumb')}
-      </div>
+    <div style={styles.container}>
+      {getSubComponent('Start')}
+      {getSubComponent('End')}
     </div>
   )
 }
 
-const BreadCrumb = ({ children }: PropsWithChildren) => {
-  return (
-    <div style={{ margin: '24px 0', display: 'inline-block' }}>{children}</div>
-  )
+const Start = ({ children, styles }: PropsWithChildren & { styles: any }) => {
+  return <div style={styles.start}>{children}</div>
 }
 
-BreadCrumb.displayName = 'BreadCrumb'
+const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
+  return <div style={styles.end}>{children}</div>
+}
 
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
@@ -100,10 +75,11 @@ const withStyles =
 
 const SC: any = withStyles(generateStyles)(DesktopTopNav)
 
-SC.BreadCrumb = BreadCrumb
-// TODO investigate whether displayName should be added to the original component
-
 SC.displayName = 'DesktopTopNav'
+SC.Start = withStyles(generateStyles)(Start)
+SC.Start.displayName = 'Start'
+SC.End = withStyles(generateStyles)(End)
+SC.End.displayName = 'End'
 
 export { SC as DesktopTopNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 1eb62c5721..5db74ef85f 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -23,75 +23,38 @@
  */
 import type { DesktopTopNavProps } from './props'
 
-//TODO use theme variables for spacing
 const generateStyles = (props: DesktopTopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: (open: boolean) => {
-      return {
-        height: '54px',
-        position: open ? 'fixed' : 'relative',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
-        width: '100%',
-        zIndex: '1000'
-      }
-    },
-    topBar: {
-      padding: `0 ${theme.spacing.small}`,
-      height: '54px',
+    container: {
+      height: '66px',
+      position: 'fixed',
+      backgroundColor: lightMode
+        ? theme.colors.ui.surfacePageSecondary
+        : theme.colors.ui.surfaceDark,
+      color: lightMode
+        ? theme.colors.contrasts.grey125125
+        : theme.colors?.contrasts?.white1010,
+      width: '100%',
+      zIndex: '1000',
       display: 'flex',
-      alignItems: 'center'
-      // justifyContent: 'space-between'
+      alignItems: 'center',
+      flexDirection: 'row'
     },
-    content: (open: boolean) => {
-      return {
-        padding: `0 ${theme.spacing.small}`,
-        height: open ? '100%' : '0px',
-        top: '3.375rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'scroll' : 'hidden',
-        position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
-      }
+    start: {
+      marginLeft: '24px',
+      marginRight: 'auto',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '16px'
     },
-    btnRow: {
+    end: {
+      marginRight: '24px',
       display: 'flex',
-      marginRight: '12px'
-    }
-  }
-}
-const generateItemListStyles = (_props: any, theme: any) => {
-  return {
-    divider: {
-      height: '0.0625rem',
-      overflow: 'hidden',
-      background: theme.colors.contrasts.grey1214
+      gap: '12px'
     }
   }
 }
-const generateItemStyles = (_props: any, _theme: any) => {
-  return {
-    container: {
-      margin: '16px 0',
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'flex-end'
-    },
-    leftIcon: { paddingRight: '8px', fontSize: '18px' },
-    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
-  }
-}
 
-export { generateStyles, generateItemListStyles, generateItemStyles }
+export { generateStyles }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 299d7749a6..2114a3a8ac 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -44,7 +44,7 @@ import {
 
 /**
 ---
-category: components
+category: utilities
 ---
 **/
 const MobileTopNav = ({
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index c1f0bc35e1..68b8065ce8 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -70,4 +70,4 @@ export type {
 
 export { MobileTopNav } from './MobileTopNav'
 export { DesktopTopNav } from './DesktopTopNav'
-export { TopNav } from './TopNav'
+export { CanvasTopNav } from './CanvasTopNav'

From 65449b9f8daed79e68c8dacd676bd635d82f3026 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 28 Nov 2024 14:25:00 +0100
Subject: [PATCH 11/53] WIP(ui-top-nav-bar): api rework

---
 packages/__docs__/src/App/index.tsx           | 40 +++++-----
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 79 ++++++++++++++-----
 .../src/DesktopTopNav/index.tsx               |  8 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 28 ++++---
 4 files changed, 99 insertions(+), 56 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 9f9a1212ec..a1649d2671 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1025,45 +1025,45 @@ class App extends Component<AppProps, AppState> {
           <CanvasTopNav
             brand={brandSvg}
             lightMode={true}
-            breadcrumbLinks={[
-              { href: '#', label: 'Student Forecast' },
-              { href: '#', label: 'University of Utah' },
-              { href: '#', label: 'University of Colleges' }
-            ]}
-            title="Courses"
-            buttons={[
+            breadcrumb={{
+              label: 'You are here:',
+              links: [
+                { href: '#', label: 'Student Forecast' },
+                { href: '#', label: 'University of Utah' },
+                { href: '#', label: 'University of Colleges' }
+              ]
+            }}
+            hamburgerOnClick={() => alert('Hamburger clicked')}
+            mobileMenuTitle="Courses"
+            mobileButtons={[
               {
-                screenReaderLabel: 'Analytics', // itt icon is lesz!!!!!
-                color: 'primary-inverse'
+                screenReaderLabel: 'Analytics',
+                icon: <IconAnalyticsLine />
               },
               {
-                screenReaderLabel: 'Alerts', // itt icon lesz!!!!!
-                color: 'primary-inverse'
+                screenReaderLabel: 'Alerts',
+                icon: <IconAlertsLine />
               }
             ]}
-            backButton={{ href: '#', label: 'Back' }}
-            items={[
+            mobileMenuBackButton={{ href: '#', label: 'Back' }}
+            mobileMenu={[
               {
                 label: 'Account',
-                leftIcon: <IconUserLine />,
-                rightIcon: <IconArrowOpenDownLine />,
+                renderBeforeLabel: <IconUserLine />,
                 onClick: () => alert('Account clicked')
               },
               {
                 label: 'Admin',
-                leftIcon: <IconAdminLine />,
-                rightIcon: <IconArrowOpenDownLine />,
+                renderBeforeLabel: <IconAdminLine />,
                 onClick: () => alert('Admin clicked')
               },
               {
                 label: 'Dashboard',
-                leftIcon: <IconDashboardLine />,
-                rightIcon: <IconArrowOpenDownLine />,
+                renderBeforeLabel: <IconDashboardLine />,
                 onClick: () => alert('Dashboard clicked')
               },
               {
                 label: 'Simple option with no left icon',
-                rightIcon: <IconArrowOpenDownLine />,
                 onClick: () => alert('Simple option with no left icon')
               }
             ]}
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 20fbaeaa6a..5a36c00fa9 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -30,11 +30,11 @@ import { jsx } from '@instructure/emotion'
 import {
   IconAddLine,
   IconAdminSolid,
-  IconHamburgerLine,
-  IconXLine
+  IconArrowOpenStartLine,
+  IconHamburgerLine
 } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
-import { Breadcrumb } from '@instructure/ui-breadcrumb'
+import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
 
 /**
 ---
@@ -45,11 +45,11 @@ const CanvasTopNav = ({
   breakpoint = 768,
   lightMode = true,
   brand,
-  breadcrumbLinks = [],
-  title,
-  buttons = [],
-  items = [],
-  backButton
+  breadcrumb,
+  mobileMenuTitle,
+  mobileButtons = [],
+  mobileMenu = [],
+  mobileMenuBackButton
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -67,17 +67,56 @@ const CanvasTopNav = ({
 
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
-    <MobileTopNav
-      lightMode={lightMode}
-      brand={brand}
-      breadcrumbLinks={breadcrumbLinks}
-      title={title}
-      buttons={buttons}
-      items={items}
-      backButton={backButton}
-    />
+    <MobileTopNav lightMode={lightMode} brand={brand}>
+      <MobileTopNav.BtnRow>
+        {mobileButtons.map((button, index) => (
+          <IconButton
+            key={index}
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel={button.screenReaderLabel}
+            color={lightMode ? 'secondary' : button.color}
+          >
+            {button.icon}
+          </IconButton>
+        ))}
+      </MobileTopNav.BtnRow>
+      <MobileTopNav.Menu>
+        <Breadcrumb>
+          <BreadcrumbLink
+            href={mobileMenuBackButton.href}
+            isWithinText={false}
+            color={lightMode ? 'link' : 'link-inverse'}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px'
+              }}
+            >
+              <IconArrowOpenStartLine />
+              {mobileMenuBackButton.label}
+            </div>
+          </BreadcrumbLink>
+        </Breadcrumb>
+        <MobileTopNav.Title>{mobileMenuTitle}</MobileTopNav.Title>
+        <MobileTopNav.ItemList>
+          {mobileMenu.map((item, index) => (
+            <MobileTopNav.Item
+              key={index}
+              renderBeforeLabel={item.renderBeforeLabel || null}
+              renderAfterLabel={item.renderAfterLabel || null}
+              onClick={item.onClick}
+            >
+              {item.label}
+            </MobileTopNav.Item>
+          ))}
+        </MobileTopNav.ItemList>
+      </MobileTopNav.Menu>
+    </MobileTopNav>
   ) : (
-    <DesktopTopNav lightMode={lightMode} breadcrumbLinks={breadcrumbLinks}>
+    <DesktopTopNav lightMode={lightMode}>
       <DesktopTopNav.Start>
         <IconButton
           withBackground={false}
@@ -87,8 +126,8 @@ const CanvasTopNav = ({
         >
           <IconHamburgerLine />
         </IconButton>
-        <Breadcrumb label="You are here:">
-          {breadcrumbLinks.map((link, index) =>
+        <Breadcrumb label={breadcrumb.label}>
+          {breadcrumb.links.map((link, index) =>
             link.href ? (
               <Breadcrumb.Link key={index} href={link.href}>
                 {link.label}
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index 77e269d69f..83b1a388e5 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -31,9 +31,9 @@ import type { DesktopTopNavProps } from './props'
 import { generateStyles } from './styles'
 
 /**
- ---
- category: utilities
- ---
+---
+category: utilities
+---
  **/
 const DesktopTopNav = ({ styles, children }: DesktopTopNavProps) => {
   const getSubComponent = (displayName: any) => {
@@ -41,8 +41,6 @@ const DesktopTopNav = ({ styles, children }: DesktopTopNavProps) => {
       (child: any) => child?.type?.displayName === displayName
     )
   }
-  //console.log('getSubComponent', getSubComponent('Start'))
-
   return (
     <div style={styles.container}>
       {getSubComponent('Start')}
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 2114a3a8ac..4d6722b15b 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -84,11 +84,7 @@ const MobileTopNav = ({
         </span>
       </div>
 
-      <div style={styles.content(open)}>
-        {getSubComponent('BreadCrumb')}
-        {getSubComponent('Title')}
-        {getSubComponent('ItemList')}
-      </div>
+      <div style={styles.content(open)}>{getSubComponent('Menu')}</div>
     </div>
   )
 }
@@ -97,6 +93,10 @@ const BtnRow = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
+const Menu = ({ children }: PropsWithChildren) => {
+  return <Fragment>{children}</Fragment>
+}
+
 BtnRow.displayName = 'BtnRow'
 
 const BreadCrumb = ({ children }: PropsWithChildren) => {
@@ -133,22 +133,26 @@ ItemList.displayName = 'ItemList'
 
 const Item = ({
   children,
-  leftIcon,
-  rightIcon,
+  renderBeforeLabel,
+  renderAfterLabel,
   onClick,
   styles
 }: PropsWithChildren & {
-  leftIcon: any
-  rightIcon: any
+  renderBeforeLabel: any
+  renderAfterLabel: any
   onClick: any
   styles: any
 }) => {
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <div style={styles.container} onClick={onClick}>
-      {leftIcon && <div style={styles.leftIcon}>{leftIcon}</div>}
+      {renderBeforeLabel && (
+        <div style={styles.leftIcon}>{renderBeforeLabel}</div>
+      )}
       {children}
-      {rightIcon && <div style={styles.rightIcon}>{rightIcon}</div>}
+      {renderAfterLabel && (
+        <div style={styles.rightIcon}>{renderAfterLabel}</div>
+      )}
     </div>
   )
 }
@@ -177,6 +181,8 @@ SC.ItemList = withStyles(generateItemListStyles)(ItemList)
 SC.ItemList.displayName = 'ItemList'
 SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
 SC.Item.displayName = 'Item'
+SC.Menu = Menu
+SC.Menu.displayName = 'Menu'
 SC.displayName = 'MobileTopNav'
 
 export { SC as MobileTopNav }

From df128388eb8628e6f81b67d5f0eb7791b2c060de Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 28 Nov 2024 18:46:27 +0100
Subject: [PATCH 12/53] WIP(ui-top-nav-bar): finetuning after grooming meeting

---
 packages/__docs__/src/App/index.tsx            |  2 +-
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx  | 12 +++++++-----
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx  | 18 +++++-------------
 .../ui-top-nav-bar/src/MobileTopNav/props.ts   |  2 +-
 .../ui-top-nav-bar/src/MobileTopNav/styles.tsx |  6 +++---
 5 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index a1649d2671..f93e8848b1 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1045,7 +1045,7 @@ class App extends Component<AppProps, AppState> {
                 icon: <IconAlertsLine />
               }
             ]}
-            mobileMenuBackButton={{ href: '#', label: 'Back' }}
+            mobileMenuBackNavigation={{ href: '#', label: 'Back' }}
             mobileMenu={[
               {
                 label: 'Account',
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 5a36c00fa9..cdc5bec079 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -49,7 +49,8 @@ const CanvasTopNav = ({
   mobileMenuTitle,
   mobileButtons = [],
   mobileMenu = [],
-  mobileMenuBackButton
+  mobileMenuBackNavigation,
+  hamburgerOnClick
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -68,7 +69,7 @@ const CanvasTopNav = ({
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
     <MobileTopNav lightMode={lightMode} brand={brand}>
-      <MobileTopNav.BtnRow>
+      <MobileTopNav.End>
         {mobileButtons.map((button, index) => (
           <IconButton
             key={index}
@@ -80,11 +81,11 @@ const CanvasTopNav = ({
             {button.icon}
           </IconButton>
         ))}
-      </MobileTopNav.BtnRow>
+      </MobileTopNav.End>
       <MobileTopNav.Menu>
         <Breadcrumb>
           <BreadcrumbLink
-            href={mobileMenuBackButton.href}
+            href={mobileMenuBackNavigation.href}
             isWithinText={false}
             color={lightMode ? 'link' : 'link-inverse'}
           >
@@ -96,7 +97,7 @@ const CanvasTopNav = ({
               }}
             >
               <IconArrowOpenStartLine />
-              {mobileMenuBackButton.label}
+              {mobileMenuBackNavigation.label}
             </div>
           </BreadcrumbLink>
         </Breadcrumb>
@@ -122,6 +123,7 @@ const CanvasTopNav = ({
           withBackground={false}
           withBorder={false}
           screenReaderLabel="burgir"
+          onClick={hamburgerOnClick}
           color={lightMode ? 'secondary' : 'primary-inverse'}
         >
           <IconHamburgerLine />
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 4d6722b15b..8e2daff985 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -70,8 +70,8 @@ const MobileTopNav = ({
     <div style={styles.container(open)}>
       <div style={styles.topBar}>
         {brand}
-        <span style={styles.btnRow}>
-          {!open && getSubComponent('BtnRow')}
+        <span style={styles.end}>
+          {!open && getSubComponent('End')}
           <IconButton
             withBackground={false}
             withBorder={false}
@@ -89,7 +89,7 @@ const MobileTopNav = ({
   )
 }
 
-const BtnRow = ({ children }: PropsWithChildren) => {
+const End = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
@@ -97,14 +97,6 @@ const Menu = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
-BtnRow.displayName = 'BtnRow'
-
-const BreadCrumb = ({ children }: PropsWithChildren) => {
-  return <div style={{ margin: '24px 0' }}>{children}</div>
-}
-
-BreadCrumb.displayName = 'BreadCrumb'
-
 const Title = ({ children }: PropsWithChildren) => {
   return <div style={{ margin: '32px 0' }}>{children}</div>
 }
@@ -173,8 +165,8 @@ const withStyles =
 
 const SC: any = withStyles(generateStyles)(MobileTopNav)
 
-SC.BtnRow = BtnRow
-SC.BreadCrumb = BreadCrumb
+SC.End = End
+SC.End.displayName = 'End'
 SC.Title = Title
 SC.ItemList = withStyles(generateItemListStyles)(ItemList)
 // TODO investigate whether displayName should be added to the original component
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index af0fc3d20c..9202101531 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -39,7 +39,7 @@ type MobileTopNavStyle = {
   topBar: {
     [key: string]: string | number
   }
-  btnRow: {
+  end: {
     [key: string]: string | number
   }
 }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index 65b2c058d4..60411e0d2d 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -30,7 +30,6 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
     container: (_open: boolean) => {
       return {
         height: '54px',
-        // position: open ? 'fixed' : 'relative',
         backgroundColor: lightMode
           ? theme.colors.ui.surfacePageSecondary
           : theme.colors.ui.surfaceDark,
@@ -66,9 +65,10 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
           : theme.colors?.contrasts?.white1010
       }
     },
-    btnRow: {
+    end: {
       display: 'flex',
-      gap: '12px'
+      gap: '12px',
+      marginLeft: 'auto'
     }
   }
 }

From 2a0861032a0fe4aeacb06c7189b03d7390cd35bc Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 29 Nov 2024 16:19:26 +0100
Subject: [PATCH 13/53] WIP(ui-top-nav-bar): add more changes after review

---
 packages/__docs__/src/App/index.tsx           |  8 +++--
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 32 ++++++++++---------
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  6 ++--
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index f93e8848b1..159c73fef2 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -1024,7 +1024,7 @@ class App extends Component<AppProps, AppState> {
         >
           <CanvasTopNav
             brand={brandSvg}
-            lightMode={true}
+            lightMode={false}
             breadcrumb={{
               label: 'You are here:',
               links: [
@@ -1038,11 +1038,13 @@ class App extends Component<AppProps, AppState> {
             mobileButtons={[
               {
                 screenReaderLabel: 'Analytics',
-                icon: <IconAnalyticsLine />
+                icon: <IconAnalyticsLine />,
+                onClick: () => alert('Analytics clicked')
               },
               {
                 screenReaderLabel: 'Alerts',
-                icon: <IconAlertsLine />
+                icon: <IconAlertsLine />,
+                onClick: () => alert('Alerts clicked')
               }
             ]}
             mobileMenuBackNavigation={{ href: '#', label: 'Back' }}
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index cdc5bec079..bae16d8826 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -76,7 +76,8 @@ const CanvasTopNav = ({
             withBackground={false}
             withBorder={false}
             screenReaderLabel={button.screenReaderLabel}
-            color={lightMode ? 'secondary' : button.color}
+            color={lightMode ? 'primary' : 'primary-inverse'}
+            onClick={button.onClick}
           >
             {button.icon}
           </IconButton>
@@ -87,7 +88,7 @@ const CanvasTopNav = ({
           <BreadcrumbLink
             href={mobileMenuBackNavigation.href}
             isWithinText={false}
-            color={lightMode ? 'link' : 'link-inverse'}
+            color={lightMode ? 'link' : 'primary-inverse'}
           >
             <div
               style={{
@@ -101,8 +102,7 @@ const CanvasTopNav = ({
             </div>
           </BreadcrumbLink>
         </Breadcrumb>
-        <MobileTopNav.Title>{mobileMenuTitle}</MobileTopNav.Title>
-        <MobileTopNav.ItemList>
+        <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item, index) => (
             <MobileTopNav.Item
               key={index}
@@ -128,17 +128,19 @@ const CanvasTopNav = ({
         >
           <IconHamburgerLine />
         </IconButton>
-        <Breadcrumb label={breadcrumb.label}>
-          {breadcrumb.links.map((link, index) =>
-            link.href ? (
-              <Breadcrumb.Link key={index} href={link.href}>
-                {link.label}
-              </Breadcrumb.Link>
-            ) : (
-              <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-            )
-          )}
-        </Breadcrumb>
+        <div style={{ minWidth: '100%' }}>
+          <Breadcrumb label={breadcrumb.label}>
+            {breadcrumb.links.map((link, index) =>
+              link.href ? (
+                <Breadcrumb.Link key={index} href={link.href}>
+                  {link.label}
+                </Breadcrumb.Link>
+              ) : (
+                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+              )
+            )}
+          </Breadcrumb>
+        </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
         <Button renderIcon={IconAddLine}>IconAddLine</Button>
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 8e2daff985..97442980fd 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -76,7 +76,7 @@ const MobileTopNav = ({
             withBackground={false}
             withBorder={false}
             screenReaderLabel="burgir"
-            color={lightMode ? 'secondary' : 'primary-inverse'}
+            color={lightMode ? 'primary' : 'primary-inverse'}
             onClick={() => setOpen((open) => !open)}
           >
             {open ? <IconXLine /> : <IconHamburgerLine />}
@@ -105,10 +105,12 @@ Title.displayName = 'Title'
 
 const ItemList = ({
   children,
+  title,
   styles
-}: PropsWithChildren & { styles: any }) => {
+}: PropsWithChildren & { styles: any; title: any }) => {
   return (
     <Fragment>
+      {title && <Title>{title}</Title>}
       {Children.map(children, (child, index) => (
         <Fragment>
           {child}

From e7798c30dedbb47123f31040f813212fdca04b2c Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 2 Dec 2024 15:49:58 +0100
Subject: [PATCH 14/53] WIP(ui-top-nav-bar): fix build errors

---
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx  | 18 +++++++-----------
 .../ui-top-nav-bar/src/DesktopTopNav/props.ts  |  2 +-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index bae16d8826..ba0ac482ed 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -70,7 +70,7 @@ const CanvasTopNav = ({
   return isSmallScreen ? (
     <MobileTopNav lightMode={lightMode} brand={brand}>
       <MobileTopNav.End>
-        {mobileButtons.map((button, index) => (
+        {mobileButtons.map((button: any, index: any) => (
           <IconButton
             key={index}
             withBackground={false}
@@ -84,12 +84,8 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        <Breadcrumb>
-          <BreadcrumbLink
-            href={mobileMenuBackNavigation.href}
-            isWithinText={false}
-            color={lightMode ? 'link' : 'primary-inverse'}
-          >
+        <Breadcrumb label={mobileMenuBackNavigation.label}>
+          <BreadcrumbLink href={mobileMenuBackNavigation.href}>
             <div
               style={{
                 display: 'flex',
@@ -103,7 +99,7 @@ const CanvasTopNav = ({
           </BreadcrumbLink>
         </Breadcrumb>
         <MobileTopNav.ItemList title={mobileMenuTitle}>
-          {mobileMenu.map((item, index) => (
+          {mobileMenu.map((item: any, index: any) => (
             <MobileTopNav.Item
               key={index}
               renderBeforeLabel={item.renderBeforeLabel || null}
@@ -130,7 +126,7 @@ const CanvasTopNav = ({
         </IconButton>
         <div style={{ minWidth: '100%' }}>
           <Breadcrumb label={breadcrumb.label}>
-            {breadcrumb.links.map((link, index) =>
+            {breadcrumb.links.map((link: any, index: any) =>
               link.href ? (
                 <Breadcrumb.Link key={index} href={link.href}>
                   {link.label}
@@ -143,8 +139,8 @@ const CanvasTopNav = ({
         </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
-        <Button renderIcon={IconAddLine}>IconAddLine</Button>
-        <Button renderIcon={IconAdminSolid}>IconAdminSolid</Button>
+        <Button renderIcon={<IconAddLine />}>IconAddLine</Button>
+        <Button renderIcon={<IconAdminSolid />}>IconAdminSolid</Button>
       </DesktopTopNav.End>
     </DesktopTopNav>
   )
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
index 86d2efe2ad..2210120ab1 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
@@ -30,7 +30,7 @@ type DesktopTopNavOwnProps = {
 }
 
 type DesktopTopNavStyle = {
-  container: (open: boolean) => {
+  container: {
     [key: string]: string | number
   }
   content: (open: boolean) => {

From c8934d0bc15645f5de0ae21335423ce8b4b7baea Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 4 Dec 2024 15:59:40 +0100
Subject: [PATCH 15/53] WIP(ui-top-nav-bar): clear index.tsx and create a basic
 menu structure

---
 packages/__docs__/src/App/index.tsx           | 1131 ++---------------
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx |   31 +-
 2 files changed, 157 insertions(+), 1005 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 159c73fef2..167bd22224 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -22,329 +22,22 @@
  * SOFTWARE.
  */
 
-import {
-  Component,
-  createContext,
-  LegacyRef,
-  ReactElement,
-  SyntheticEvent
-} from 'react'
+import { Component } from 'react'
 
-import { Alert } from '@instructure/ui-alerts'
-import { Breadcrumb } from '@instructure/ui-breadcrumb'
-import { InstUISettingsProvider, withStyle } from '@instructure/emotion'
-import { Flex } from '@instructure/ui-flex'
-import { Text } from '@instructure/ui-text'
-import { View } from '@instructure/ui-view'
-import { AccessibleContent } from '@instructure/ui-a11y-content'
-import {
-  MobileTopNav,
-  DesktopTopNav,
-  CanvasTopNav
-} from '@instructure/ui-top-nav-bar'
+import { withStyle } from '@instructure/emotion'
+import { CanvasTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
-import { Tray } from '@instructure/ui-tray'
-import { Link } from '@instructure/ui-link'
-import { addMediaQueryMatchListener } from '@instructure/ui-responsive'
-import type { QueriesMatching } from '@instructure/ui-responsive'
 import {
-  IconAdminLine,
   IconAlertsLine,
   IconAnalyticsLine,
-  IconArrowOpenDownLine,
-  IconArrowOpenStartLine,
-  IconDashboardLine,
-  IconHeartLine,
-  IconUserLine,
-  IconXSolid
+  IconCoursesLine,
+  IconQuestionLine,
+  IconUserLine
 } from '@instructure/ui-icons'
-import { ContentWrap } from '../ContentWrap'
-import { Document } from '../Document'
-import { Header } from '../Header'
-import { Heading } from '../Heading'
-import { Hero } from '../Hero'
-import { Nav } from '../Nav'
-import { Theme } from '../Theme'
-import { Select } from '../Select'
-import { Section } from '../Section'
-import { Icons } from '../Icons'
-import { compileMarkdown } from '../compileMarkdown'
-
-import { fetchVersionData, versionInPath } from '../versionData'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { LoadingScreen } from '../LoadingScreen'
-import * as EveryComponent from '../../components'
-import type { AppProps, AppState, DocData, LayoutSize } from './props'
+import type { AppProps, AppState } from './props'
 import { propTypes, allowedProps } from './props'
-import type {
-  LibraryOptions,
-  MainDocsData
-} from '../../buildScripts/DataTypes.mjs'
-import { logError } from '@instructure/console'
-
-type AppContextType = {
-  themeKey: keyof MainDocsData['themes']
-  themes: MainDocsData['themes']
-  library?: LibraryOptions
-}
-
-export const AppContext = createContext<AppContextType>({
-  themes: {},
-  themeKey: '',
-  library: undefined
-})
-
-/*const WrapperComponent = (props) => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-  const [isLightMode, setIsLightMode] = useState(false)
-
-  const brandSvg = (
-    <IconButton
-      screenReaderLabel="Canvas Brand"
-      href="#"
-      withBackground={false}
-      withBorder={false}
-    >
-      <svg
-        viewBox="0 0 1920 1920"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="#fff"
-        width="28px"
-        height="28px"
-      >
-        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
-      </svg>
-    </IconButton>
-  )
-
-  const SmallScreen = () => (
-    <div>
-      <MobileTopNav brand={brandSvg} lightMode={isLightMode}>
-        <MobileTopNav.BtnRow>
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel="burgir"
-            color={isLightMode ? 'secondary' : 'primary-inverse'}
-          >
-            <IconAnalyticsLine />
-          </IconButton>
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel="burgir"
-            color={isLightMode ? 'secondary' : 'primary-inverse'}
-          >
-            <IconAlertsLine />
-          </IconButton>
-        </MobileTopNav.BtnRow>
-        <MobileTopNav.BreadCrumb>
-          <Link
-            href="#"
-            isWithinText={false}
-            color={isLightMode ? 'link' : 'link-inverse'}
-          >
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <IconArrowOpenStartLine />
-              Back
-            </div>
-          </Link>
-        </MobileTopNav.BreadCrumb>
-        <MobileTopNav.Title>Courses</MobileTopNav.Title>
-        <MobileTopNav.ItemList>
-          <MobileTopNav.Item
-            leftIcon={<IconUserLine />}
-            rightIcon={<IconArrowOpenDownLine />}
-            onClick={() => alert('Account clicked')}
-          >
-            Account
-          </MobileTopNav.Item>
-          <MobileTopNav.Item
-            leftIcon={<IconAdminLine />}
-            rightIcon={<IconArrowOpenDownLine />}
-            onClick={() => alert('Admin clicked')}
-          >
-            Admin
-          </MobileTopNav.Item>
-          <MobileTopNav.Item
-            leftIcon={<IconDashboardLine />}
-            rightIcon={<IconArrowOpenDownLine />}
-            onClick={() => alert('Dashboard')}
-          >
-            Dashboard
-          </MobileTopNav.Item>
-          <MobileTopNav.Item
-            rightIcon={<IconArrowOpenDownLine />}
-            onClick={() => alert('Simple option with no left icon')}
-          >
-            Simple option with no left icon
-          </MobileTopNav.Item>
-        </MobileTopNav.ItemList>
-      </MobileTopNav>
-      <div style={{ marginTop: '600px' }}>
-        <Checkbox
-          label="Light mode"
-          value="small"
-          variant="toggle"
-          size="large"
-          checked={isLightMode}
-          onChange={(e) => {
-            setIsLightMode((prev) => !prev)
-          }}
-        />
-      </div>
-      <p>
-        1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        7 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        8 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        9 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        10 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        11 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        12 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        13 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        14 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        15 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        16 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        17 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        18 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        19 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-      <p>
-        20 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias
-        excepturi a blanditiis, aspernatur repellat repellendus dolores cum
-        labore eligendi architecto asperiores, dolor quisquam sequi mollitia
-        quibusdam, cumque id ab amet?
-      </p>
-    </div>
-  )
-  const BigScreen = () => (
-    <DesktopTopNav>
-      <DesktopTopNav.BreadCrumb>
-        <Breadcrumb label="You are here:">
-          <Breadcrumb.Link>Student Forecast</Breadcrumb.Link>
-          <Breadcrumb.Link>University of Utah</Breadcrumb.Link>
-          <Breadcrumb.Link>University of Colleges</Breadcrumb.Link>
-        </Breadcrumb>
-      </DesktopTopNav.BreadCrumb>
-    </DesktopTopNav>
-  )
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsSmallScreen(window.innerWidth <= 768)
-    }
-
-    // Check on component mount
-    handleResize()
-
-    // Add event listener for window resize
-    window.addEventListener('resize', handleResize)
-
-    // Cleanup listener on component unmount
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
-  return <>{isSmallScreen ? <SmallScreen /> : <BigScreen />}</>
-}*/
 
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
@@ -354,632 +47,23 @@ class App extends Component<AppProps, AppState> {
   static defaultProps = {
     trayWidth: 300
   }
-  _content?: HTMLDivElement | null
-  _menuTrigger?: HTMLButtonElement
-  _mediaQueryListener?: ReturnType<typeof addMediaQueryMatchListener>
-  _defaultDocumentTitle?: string
-  _controller?: AbortController
 
   constructor(props: AppProps) {
     super(props)
-    // determine what page we're loading
-    const [page] = this.getPathInfo()
-
-    // if there's room for the tray + 700px, load with the tray open (unless it's the homepage)
-    const smallerScreen = window.matchMedia(
-      `(max-width: ${props.trayWidth + 700}px)`
-    ).matches
-    const isHomepage = page === 'index' || typeof page === 'undefined'
-    const showTrayOnPageLoad = !smallerScreen && !isHomepage
 
     this.state = {
-      showMenu: showTrayOnPageLoad,
+      showMenu: false,
       themeKey: undefined,
       layout: 'large',
       docsData: null,
       versionsData: null,
-      iconsData: null
-    }
-  }
-
-  fetchDocumentData = async (docId: string) => {
-    const result = await fetch('docs/' + docId + '.json', {
-      signal: this._controller?.signal
-    })
-    const docData: DocData = await result.json()
-    if (docId.includes('.')) {
-      // e.g. 'Calendar.Day', first get 'Calendar' then 'Day'
-      const components = docId.split('.')
-      const everyComp = EveryComponent as Record<string, any>
-      docData.componentInstance = everyComp[components[0]][components[1]]
-    } else {
-      docData.componentInstance =
-        EveryComponent[docId as keyof typeof EveryComponent]
-    }
-    return docData
-  }
-
-  fetchVersionData = async (signal: AbortController['signal']) => {
-    const versionsData = await fetchVersionData(signal)
-    return this.setState({ versionsData })
-  }
-
-  scrollToElement() {
-    const [_page, id] = this.getPathInfo()
-
-    if (id) {
-      // If we have an id and it corresponds to an element
-      // that exists, scroll it into view
-      const linkedSection = document.getElementById(id)
-      linkedSection && linkedSection.scrollIntoView()
-    } else if (this._content) {
-      // If we don't have an id, scroll the content back to the top
-      this._content.scrollTop = 0
-    }
-  }
-
-  /**
-   * Get every static prop from an object (inherited ones too)
-   * @param object The object to check
-   * @returns {Set<string>} the properties
-   */
-  getAllPropNames(object: Record<string, any>) {
-    let obj: object | null = object
-    const props: Set<string> = new Set()
-    // exclude some common static props for performance
-    const invalidKeys = [
-      '$$typeof',
-      'render',
-      'propTypes',
-      'selector',
-      'defaultProps',
-      'displayName',
-      'generateComponentTheme'
-    ]
-    while (obj) {
-      const keys = Object.keys(obj)
-      keys.forEach((k) => {
-        if (!invalidKeys.includes(k)) props.add(k)
-      })
-      obj = Reflect.getPrototypeOf(obj)
-    }
-    return props
-  }
-
-  componentDidMount() {
-    this._defaultDocumentTitle = document.title
-    this.updateKey()
-
-    window.addEventListener('hashchange', this.updateKey, false)
-
-    // TODO: Replace with the Responsive component later
-    // Using this method directly for now instead to avoid a call to findDOMNode
-    this._mediaQueryListener = addMediaQueryMatchListener(
-      {
-        medium: { minWidth: 700 },
-        large: { minWidth: 1100 },
-        'x-large': { minWidth: 1300 }
-      },
-      this._content!,
-      this.updateLayout
-    )
-    this.props.makeStyles?.()
-
-    this._controller = new AbortController()
-    const signal = this._controller.signal
-
-    this.fetchVersionData(signal)
-
-    const errorHandler = (error: Error) => {
-      logError(error.name === 'AbortError', error.message)
-    }
-
-    fetch('icons-data.json', { signal })
-      .then((response) => response.json())
-      .then((iconsData) => {
-        this.setState({ iconsData: iconsData })
-      })
-      .catch(errorHandler)
-    fetch('markdown-and-sources-data.json', { signal })
-      .then((response) => response.json())
-      .then((docsData) => {
-        this.setState(
-          {
-            docsData,
-            themeKey: Object.keys(docsData.themes)[0]
-          },
-          this.scrollToElement
-        )
-      })
-      .catch(errorHandler)
-  }
-
-  componentDidUpdate() {
-    this.props.makeStyles?.()
-  }
-
-  componentWillUnmount() {
-    //cancel ongoing requests
-    this._controller?.abort()
-    window.removeEventListener('hashchange', this.updateKey, false)
-
-    if (this._mediaQueryListener) {
-      this._mediaQueryListener.remove()
-    }
-  }
-
-  trackPage(page: string) {
-    let title = this._defaultDocumentTitle
-    if (page !== 'index') {
-      title = `${page} - ${this._defaultDocumentTitle}`
-    }
-
-    document.title = title!
-  }
-
-  getPathInfo = () => {
-    const { hash } = window.location
-
-    const path = hash && hash.split('/')
-
-    if (path) {
-      const [page, id] = path.map((entry) => decodeURI(entry.replace('#', '')))
-      return [page, id]
-    }
-    return []
-  }
-
-  updateLayout = (matches: QueriesMatching) => {
-    let layout: LayoutSize = 'small'
-
-    if (matches.length > 0) {
-      if (matches.includes('medium') && matches.length === 1) {
-        layout = 'medium'
-      } else if (matches.includes('large') && matches.length === 2) {
-        layout = 'large'
-      } else if (matches.includes('x-large')) {
-        layout = 'x-large'
-      }
+      iconsData: null,
+      previousMenu: '',
+      currentMenu: 'default'
     }
-    this.setState({ layout })
-  }
-
-  updateKey = () => {
-    const [page, _id] = this.getPathInfo()
-
-    if (page) {
-      this.setState(
-        ({ key, showMenu }) => ({
-          key: page || 'index',
-          showMenu: this.handleShowTrayOnURLChange(key, showMenu)
-        }),
-        this.scrollToElement
-      )
-    } else {
-      this.trackPage('index')
-    }
-  }
-
-  handleContentRef: LegacyRef<HTMLDivElement> = (el) => {
-    this._content = el
-  }
-
-  handleMenuTriggerRef = (el: Element | null) => {
-    this._menuTrigger = el as HTMLButtonElement
-  }
-
-  handleMenuOpen = () => {
-    this.setState({ showMenu: true })
-  }
-
-  handleMenuClose = () => {
-    this.setState({ showMenu: false }, () => {
-      this._menuTrigger && this._menuTrigger.focus()
-    })
-  }
-
-  handleThemeChange = (_event: SyntheticEvent, option: { value: string }) => {
-    this.setState({
-      themeKey: option.value
-    })
-  }
-
-  handleShowTrayOnURLChange = (key: string | undefined, showMenu: boolean) => {
-    const userIsComingFromHomepage =
-      key === 'index' || typeof key === 'undefined'
-
-    const { layout } = this.state
-
-    // if the user is coming from the homepage, make the tray show if the layout is large enough
-    if (layout === 'small') {
-      return false
-    } else if (userIsComingFromHomepage) {
-      return true
-    } else {
-      return showMenu
-    }
-  }
-
-  renderThemeSelect() {
-    const themeKeys = Object.keys(this.state.docsData!.themes)
-    const smallScreen = this.state.layout === 'small'
-
-    return themeKeys.length > 1 ? (
-      <Flex
-        margin={smallScreen ? 'none none medium' : 'none none x-small'}
-        justifyItems={!smallScreen ? 'end' : 'start'}
-      >
-        <Flex.Item shouldGrow={smallScreen} shouldShrink={smallScreen}>
-          <Select
-            name="theme"
-            renderLabel="Theme"
-            onChange={this.handleThemeChange}
-            value={this.state.themeKey}
-          >
-            {themeKeys.map((themeKey) => {
-              return (
-                <option key={themeKey} value={themeKey}>
-                  {themeKey}
-                </option>
-              )
-            })}
-          </Select>
-        </Flex.Item>
-      </Flex>
-    ) : null
-  }
-
-  renderTheme(themeKey: string) {
-    const theme = this.state.docsData!.themes[themeKey]
-
-    const { layout } = this.state
-    const smallerScreens = layout === 'small' || layout === 'medium'
-
-    const themeContent = (
-      <View
-        as="div"
-        padding={
-          smallerScreens ? 'x-large none none large' : 'x-large none none'
-        }
-      >
-        <Heading level="h1" as="h2" margin="0 0 medium 0">
-          Theme: {themeKey}
-        </Heading>
-        <Theme
-          themeKey={themeKey}
-          variables={theme.resource}
-          requirePath={theme.requirePath}
-        />
-      </View>
-    )
-    return (
-      <Section id={themeKey}>{this.renderWrappedContent(themeContent)}</Section>
-    )
-  }
-
-  renderIcons(key: string) {
-    const { iconsData } = this.state
-    const { layout } = this.state
-    const smallerScreens = layout === 'small' || layout === 'medium'
-
-    const iconContent = (
-      <View
-        as="div"
-        padding={
-          smallerScreens ? 'x-large none none large' : 'x-large none none'
-        }
-      >
-        <Heading level="h1" as="h2" margin="0 0 medium">
-          Iconography
-        </Heading>
-        <Icons
-          packageName={iconsData!.packageName}
-          selectedFormat={key}
-          formats={iconsData!.formats}
-        />
-      </View>
-    )
-
-    return <Section id={key}>{this.renderWrappedContent(iconContent)}</Section>
-  }
-
-  renderDocument(docId: string, repository: string) {
-    const { parents } = this.state.docsData!
-    const children: any[] = []
-    const currentData = this.state.currentDocData
-    if (!currentData || currentData.id !== docId) {
-      // load all children and the main doc
-      this.fetchDocumentData(docId).then(async (data) => {
-        if (parents[docId]) {
-          for (const childId of parents[docId].children) {
-            children.push(await this.fetchDocumentData(childId))
-          }
-        }
-        // eslint-disable-next-line no-param-reassign
-        data.children = children
-        this.setState({ currentDocData: data })
-      })
-      return (
-        <View as="div" padding="xx-large 0">
-          <LoadingScreen />
-        </View>
-      )
-    }
-    const { themes } = this.state.docsData!
-    const { layout, themeKey, versionsData } = this.state
-    const { olderVersionsGitBranchMap } = versionsData || {}
-    let legacyGitBranch
-
-    if (olderVersionsGitBranchMap) {
-      legacyGitBranch = olderVersionsGitBranchMap[versionInPath]
-    }
-
-    const themeVariables = themes[themeKey!].resource
-    const heading = currentData.extension !== '.md' ? currentData.title : ''
-    const documentContent = (
-      <View
-        as="div"
-        padding={
-          layout === 'small' || layout === 'medium'
-            ? 'x-large none none large'
-            : 'x-large none none'
-        }
-      >
-        {this.renderThemeSelect()}
-        <Section id={currentData.id} heading={heading}>
-          <Document
-            doc={{
-              ...currentData,
-              legacyGitBranch
-            }}
-            description={currentData.description}
-            themeVariables={themeVariables}
-            repository={repository}
-            layout={layout}
-          />
-        </Section>
-      </View>
-    )
-    return this.renderWrappedContent(documentContent)
-  }
-
-  renderWrappedContent(
-    content: ReactElement[] | ReactElement,
-    padding: any = 'large'
-  ) {
-    return <ContentWrap padding={padding}>{content}</ContentWrap>
-  }
-
-  renderHero() {
-    const { library, docs, themes } = this.state.docsData!
-    const { layout } = this.state
-
-    const themeDocs: Record<string, any> = {}
-
-    Object.keys(themes).forEach((key) => {
-      themeDocs[key] = {
-        category: 'themes'
-      }
-    })
-    return (
-      <InstUISettingsProvider>
-        <Hero
-          name={library.name}
-          docs={{ ...docs, ...themeDocs }}
-          repository={library.repository}
-          version={library.version}
-          layout={layout}
-        />
-      </InstUISettingsProvider>
-    )
-  }
-
-  renderChangeLog() {
-    if (!this.state.changelogData) {
-      this.fetchDocumentData('CHANGELOG').then((data) => {
-        this.setState({ changelogData: data })
-      })
-      return (
-        <View as="div" padding="xx-large 0">
-          <LoadingScreen />
-        </View>
-      )
-    }
-    const CHANGELOG = this.state.changelogData
-    let content: string
-
-    const { description } = CHANGELOG
-    const currentMajorVersion = this.state.docsData!.library.version.slice(0, 1)
-
-    // we want to cut the docs below the last 2 major versions,
-    // so find the next title after it
-    const versionCutoffPoint = parseInt(currentMajorVersion, 10) - 2
-    const breakpointIndex = description.indexOf(`# [${versionCutoffPoint}`) - 1
-
-    if (breakpointIndex < 0) {
-      content = description
-    } else {
-      content =
-        description.slice(0, breakpointIndex) +
-        '\n...\n' +
-        `# Version ${versionCutoffPoint} and below\n` +
-        `For older releases (v${versionCutoffPoint} and below), check the [GitHub CHANGELOG](https://github.com/instructure/instructure-ui/blob/master/CHANGELOG.md).`
-    }
-
-    return (
-      <Section id="CHANGELOG">
-        {this.renderWrappedContent(compileMarkdown(content))}
-      </Section>
-    )
-  }
-
-  renderError() {
-    const errorContent = (
-      <Alert variant="error" margin="small">
-        <Text weight="bold">Document not found.</Text> Please use the search in
-        the navigation to find any page in this documentation.
-      </Alert>
-    )
-    return (
-      <Section id="error">{this.renderWrappedContent(errorContent)}</Section>
-    )
-  }
-
-  renderContent(key?: string) {
-    const doc = this.state.docsData!.docs[key!]
-    const theme = this.state.docsData!.themes[key!]
-    let icon
-    if (this.state.iconsData && this.state.iconsData.formats) {
-      icon =
-        this.state.iconsData.formats[
-          key as 'icons-svg' | `icons-react` | 'icons-font'
-        ]
-    }
-    const { repository } = this.state.docsData!.library
-
-    if (!key || key === 'index') {
-      return this.renderHero()
-    }
-    if (key === 'CHANGELOG') {
-      return this.renderChangeLog()
-    } else if (key === 'iconography' || icon) {
-      return this.renderIcons(key)
-    } else if (theme) {
-      return this.renderTheme(key)
-    } else if (doc) {
-      return this.renderDocument(key!, repository)
-    } else {
-      return this.renderError()
-    }
-  }
-
-  renderFooter() {
-    const { author, repository } = this.state.docsData!.library
-
-    return author || repository ? (
-      <View as="footer" textAlign="center" padding="large medium">
-        {author && (
-          <AccessibleContent alt={`Made with love by ${author}`}>
-            <Text
-              color="secondary"
-              letterSpacing="expanded"
-              transform="uppercase"
-              size="small"
-              lineHeight="fit"
-            >
-              Made with <IconHeartLine size="small" color="error" /> by {author}
-              .
-            </Text>
-          </AccessibleContent>
-        )}
-      </View>
-    ) : null
-  }
-
-  renderNavigation() {
-    const { name, version } = this.state.docsData!.library
-    const { key, layout, showMenu, versionsData } = this.state
-    // Render nothing when the menu is not shown and the layout isn't small
-    // When the layout is small, we still render the tray so that it can properly
-    // finish the exit transition
-    if (!showMenu && layout !== 'small') return
-
-    const navContent = (
-      <View
-        as="div"
-        padding="small none none"
-        minHeight="100vh"
-        width="18.75rem"
-      >
-        <View display="block" textAlign="end" margin="xx-small x-small none">
-          <InstUISettingsProvider>
-            <IconButton
-              renderIcon={IconXSolid}
-              screenReaderLabel="Close Navigation"
-              withBorder={false}
-              withBackground={false}
-              onClick={this.handleMenuClose}
-              shape="circle"
-              color="secondary"
-              size="medium"
-            />
-          </InstUISettingsProvider>
-        </View>
-
-        <Header
-          name={name === 'instructure-ui' ? 'Instructure UI' : name}
-          version={version}
-          versionsData={versionsData}
-        />
-
-        <Nav
-          selected={key}
-          sections={this.state.docsData!.sections}
-          docs={this.state.docsData!.docs}
-          themes={this.state.docsData!.themes}
-          icons={this.state.iconsData}
-        />
-      </View>
-    )
-
-    return layout !== 'small' ? (
-      <nav css={this.props.styles?.inlineNavigation}>{navContent}</nav>
-    ) : (
-      <Tray label="Navigation" open={showMenu} onDismiss={this.handleMenuClose}>
-        {navContent}
-      </Tray>
-    )
-  }
-
-  renderLegacyDocWarning() {
-    const { versionsData, iconsData } = this.state
-
-    if (!versionsData || !iconsData) {
-      return null
-    }
-
-    // tf there is a version in the path, e.g. "/v6", then it is a legacy page
-    return versionInPath ? (
-      <div css={this.props.styles?.legacyVersionAlert}>
-        <InstUISettingsProvider
-          theme={{
-            componentOverrides: {
-              BaseButton: {
-                secondaryGhostColor: 'white'
-              }
-            }
-          }}
-        >
-          <Alert
-            variant="warning"
-            transition="none"
-            margin="none"
-            renderCloseButtonLabel="Close"
-            themeOverride={{
-              background: '#BF32A4',
-              color: 'white',
-              borderRadius: '0rem',
-              warningBorderColor: '#BF32A4',
-              warningIconBackground: '#BF32A4',
-              boxShadow: 'none'
-            }}
-          >
-            You are currently viewing the documentation of an older version of
-            Instructure UI. For the latest version,{' '}
-            <Link color="link-inverse" href={`/${window.location.hash}`}>
-              click here
-            </Link>
-            .
-          </Alert>
-        </InstUISettingsProvider>
-      </div>
-    ) : null
   }
 
   render() {
-    const key = this.state.key
-    const { showMenu, layout, docsData, iconsData } = this.state
-
     const isLightMode = true
 
     const brandSvg = (
@@ -1002,80 +86,143 @@ class App extends Component<AppProps, AppState> {
       </IconButton>
     )
 
-    if (!docsData || !iconsData) {
-      return <LoadingScreen />
+    const menu = {
+      default: {
+        items: [
+          {
+            label: 'Account',
+            renderBeforeLabel: <IconUserLine />,
+            onClick: () => {
+              alert('Account clicked')
+              this.setState((prev) => {
+                return {
+                  ...prev,
+                  currentMenu: 'account',
+                  previousMenu: 'default'
+                }
+              })
+            }
+          },
+          {
+            label: 'Courses',
+            renderBeforeLabel: <IconCoursesLine />,
+            onClick: () => {
+              alert('Courses clicked')
+              this.setState((prev) => {
+                return {
+                  ...prev,
+                  currentMenu: 'courses',
+                  previousMenu: 'default'
+                }
+              })
+            }
+          },
+          {
+            label: 'Help',
+            renderBeforeLabel: <IconQuestionLine />,
+            onClick: () => alert('Help')
+          }
+        ],
+        backNavigation: {
+          href: '#',
+          label: 'Back',
+          onClick: () => alert('Back clicked')
+        },
+        title: 'Main Menu'
+      },
+      account: {
+        items: [
+          {
+            label: 'AccountInfo1'
+          },
+          { label: 'AccountInfo2' }
+        ],
+        backNavigation: {
+          label: 'Back',
+          onClick: () => {
+            this.setState((prev) => {
+              return { ...prev, currentMenu: 'default' }
+            })
+          }
+        },
+        title: 'Account'
+      },
+      courses: {
+        items: [{ label: 'Courses1' }, { label: 'Courses2' }],
+        backNavigation: {
+          label: 'Back',
+          onClick: () => {
+            this.setState((prev) => {
+              return { ...prev, currentMenu: 'default' }
+            })
+          }
+        },
+        title: 'Courses'
+      }
     }
 
     return (
-      <AppContext.Provider
-        value={{
-          library: docsData.library,
-          themeKey: this.state.themeKey!,
-          themes: docsData.themes
+      <div
+        style={{
+          position: 'relative',
+          width: '100%',
+          maxWidth: '100%',
+          boxSizing: 'border-box'
         }}
       >
-        <div
-          style={{
-            position: 'relative',
-            width: '100%',
-            maxWidth: '100%',
-            boxSizing: 'border-box'
+        <CanvasTopNav
+          brand={brandSvg}
+          lightMode={false}
+          breadcrumb={{
+            label: 'You are here:',
+            links: [
+              { href: '#', label: 'Student Forecast' },
+              { href: '#', label: 'University of Utah' },
+              { href: '#', label: 'University of Colleges' }
+            ]
           }}
-        >
-          <CanvasTopNav
-            brand={brandSvg}
-            lightMode={false}
-            breadcrumb={{
-              label: 'You are here:',
-              links: [
-                { href: '#', label: 'Student Forecast' },
-                { href: '#', label: 'University of Utah' },
-                { href: '#', label: 'University of Colleges' }
-              ]
-            }}
-            hamburgerOnClick={() => alert('Hamburger clicked')}
-            mobileMenuTitle="Courses"
-            mobileButtons={[
-              {
-                screenReaderLabel: 'Analytics',
-                icon: <IconAnalyticsLine />,
-                onClick: () => alert('Analytics clicked')
-              },
-              {
-                screenReaderLabel: 'Alerts',
-                icon: <IconAlertsLine />,
-                onClick: () => alert('Alerts clicked')
-              }
-            ]}
-            mobileMenuBackNavigation={{ href: '#', label: 'Back' }}
-            mobileMenu={[
-              {
-                label: 'Account',
-                renderBeforeLabel: <IconUserLine />,
-                onClick: () => alert('Account clicked')
-              },
-              {
-                label: 'Admin',
-                renderBeforeLabel: <IconAdminLine />,
-                onClick: () => alert('Admin clicked')
-              },
-              {
-                label: 'Dashboard',
-                renderBeforeLabel: <IconDashboardLine />,
-                onClick: () => alert('Dashboard clicked')
-              },
-              {
-                label: 'Simple option with no left icon',
-                onClick: () => alert('Simple option with no left icon')
-              }
-            ]}
-          />
-        </div>
-      </AppContext.Provider>
+          hamburgerOnClick={() => alert('Hamburger clicked')}
+          mobileMenuTitle={menu[this.state.currentMenu].title}
+          mobileButtons={[
+            {
+              screenReaderLabel: 'Analytics',
+              icon: <IconAnalyticsLine />,
+              onClick: () => alert('Analytics clicked')
+            },
+            {
+              screenReaderLabel: 'Alerts',
+              icon: <IconAlertsLine />,
+              onClick: () => alert('Alerts clicked')
+            }
+          ]}
+          mobileMenuBackNavigation={menu[this.state.currentMenu].backNavigation}
+          mobileMenu={menu[this.state.currentMenu].items}
+          // mobileMenu={[
+          //   {
+          //     label: 'Account',
+          //     renderBeforeLabel: <IconUserLine />,
+          //     onClick: () => alert('Account clicked')
+          //   },
+          //   {
+          //     label: 'Admin',
+          //     renderBeforeLabel: <IconAdminLine />,
+          //     onClick: () => alert('Admin clicked')
+          //   },
+          //   {
+          //     label: 'Dashboard',
+          //     renderBeforeLabel: <IconDashboardLine />,
+          //     onClick: () => alert('Dashboard clicked')
+          //   },
+          //   {
+          //     label: 'Simple option with no left icon',
+          //     onClick: () => alert('Simple option with no left icon')
+          //   }
+          // ]}
+        />
+      </div>
     )
   }
 }
 
 export default App
-export type { AppContextType }
 export { App }
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index ba0ac482ed..daab4792be 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -84,20 +84,25 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        <Breadcrumb label={mobileMenuBackNavigation.label}>
-          <BreadcrumbLink href={mobileMenuBackNavigation.href}>
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px'
-              }}
+        <div style={{ marginTop: 16 }}>
+          <Breadcrumb label={mobileMenuBackNavigation.label}>
+            <BreadcrumbLink
+              href={mobileMenuBackNavigation.href}
+              onClick={mobileMenuBackNavigation.onClick}
             >
-              <IconArrowOpenStartLine />
-              {mobileMenuBackNavigation.label}
-            </div>
-          </BreadcrumbLink>
-        </Breadcrumb>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px'
+                }}
+              >
+                <IconArrowOpenStartLine />
+                {mobileMenuBackNavigation.label}
+              </div>
+            </BreadcrumbLink>
+          </Breadcrumb>
+        </div>
         <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item: any, index: any) => (
             <MobileTopNav.Item

From 5d741e7417a7970b6359abb2a44d596b28b8521f Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 5 Dec 2024 15:44:39 +0100
Subject: [PATCH 16/53] WIP: add smart menu navigation

---
 packages/__docs__/src/App/index.tsx | 79 ++++++++++-------------------
 1 file changed, 27 insertions(+), 52 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 167bd22224..4b94e4a141 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -58,11 +58,27 @@ class App extends Component<AppProps, AppState> {
       docsData: null,
       versionsData: null,
       iconsData: null,
-      previousMenu: '',
-      currentMenu: 'default'
+      menuStack: ['default']
     }
   }
 
+  pushMenu = (menuKey) => {
+    this.setState((prevState) => ({
+      menuStack: [...prevState.menuStack, menuKey]
+    }))
+  }
+
+  popMenu = () => {
+    this.setState((prevState) => ({
+      menuStack: prevState.menuStack.slice(0, -1)
+    }))
+  }
+
+  getCurrentMenu = () => {
+    const { menuStack } = this.state
+    return menuStack[menuStack.length - 1]
+  }
+
   render() {
     const isLightMode = true
 
@@ -93,40 +109,24 @@ class App extends Component<AppProps, AppState> {
             label: 'Account',
             renderBeforeLabel: <IconUserLine />,
             onClick: () => {
-              alert('Account clicked')
-              this.setState((prev) => {
-                return {
-                  ...prev,
-                  currentMenu: 'account',
-                  previousMenu: 'default'
-                }
-              })
+              this.pushMenu('account')
             }
           },
           {
             label: 'Courses',
             renderBeforeLabel: <IconCoursesLine />,
             onClick: () => {
-              alert('Courses clicked')
-              this.setState((prev) => {
-                return {
-                  ...prev,
-                  currentMenu: 'courses',
-                  previousMenu: 'default'
-                }
-              })
+              this.pushMenu('courses')
             }
           },
           {
             label: 'Help',
-            renderBeforeLabel: <IconQuestionLine />,
-            onClick: () => alert('Help')
+            renderBeforeLabel: <IconQuestionLine />
           }
         ],
         backNavigation: {
           href: '#',
-          label: 'Back',
-          onClick: () => alert('Back clicked')
+          label: 'Back'
         },
         title: 'Main Menu'
       },
@@ -140,9 +140,7 @@ class App extends Component<AppProps, AppState> {
         backNavigation: {
           label: 'Back',
           onClick: () => {
-            this.setState((prev) => {
-              return { ...prev, currentMenu: 'default' }
-            })
+            this.popMenu()
           }
         },
         title: 'Account'
@@ -152,9 +150,7 @@ class App extends Component<AppProps, AppState> {
         backNavigation: {
           label: 'Back',
           onClick: () => {
-            this.setState((prev) => {
-              return { ...prev, currentMenu: 'default' }
-            })
+            this.popMenu()
           }
         },
         title: 'Courses'
@@ -182,7 +178,7 @@ class App extends Component<AppProps, AppState> {
             ]
           }}
           hamburgerOnClick={() => alert('Hamburger clicked')}
-          mobileMenuTitle={menu[this.state.currentMenu].title}
+          mobileMenuTitle={menu[this.getCurrentMenu()].title}
           mobileButtons={[
             {
               screenReaderLabel: 'Analytics',
@@ -195,29 +191,8 @@ class App extends Component<AppProps, AppState> {
               onClick: () => alert('Alerts clicked')
             }
           ]}
-          mobileMenuBackNavigation={menu[this.state.currentMenu].backNavigation}
-          mobileMenu={menu[this.state.currentMenu].items}
-          // mobileMenu={[
-          //   {
-          //     label: 'Account',
-          //     renderBeforeLabel: <IconUserLine />,
-          //     onClick: () => alert('Account clicked')
-          //   },
-          //   {
-          //     label: 'Admin',
-          //     renderBeforeLabel: <IconAdminLine />,
-          //     onClick: () => alert('Admin clicked')
-          //   },
-          //   {
-          //     label: 'Dashboard',
-          //     renderBeforeLabel: <IconDashboardLine />,
-          //     onClick: () => alert('Dashboard clicked')
-          //   },
-          //   {
-          //     label: 'Simple option with no left icon',
-          //     onClick: () => alert('Simple option with no left icon')
-          //   }
-          // ]}
+          mobileMenuBackNavigation={menu[this.getCurrentMenu()].backNavigation}
+          mobileMenu={menu[this.getCurrentMenu()].items}
         />
       </div>
     )

From 079cd9d32302ca71f60d89b1138857dcd382d09a Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 6 Dec 2024 14:39:24 +0100
Subject: [PATCH 17/53] WIP: refine menu handling

---
 packages/__docs__/src/App/index.tsx | 50 +++++++++++++++++++----------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 4b94e4a141..eb87ec87b6 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -30,39 +30,53 @@ import { IconButton } from '@instructure/ui-buttons'
 import {
   IconAlertsLine,
   IconAnalyticsLine,
+  IconArrowOpenEndSolid,
   IconCoursesLine,
   IconQuestionLine,
   IconUserLine
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { AppProps, AppState } from './props'
 import { propTypes, allowedProps } from './props'
 
-@withStyle(generateStyle, generateComponentTheme)
-class App extends Component<AppProps, AppState> {
-  static propTypes = propTypes
-  static allowedProps = allowedProps
+type AppProps = Record<string, never>
+
+type AppState = {
+  menuStack: string[]
+}
 
-  static defaultProps = {
-    trayWidth: 300
+type MenuItem = {
+  label: string
+  renderBeforeLabel?: JSX.Element
+  onClick?: () => void
+  renderAfterLabel?: JSX.Element
+}
+
+type Menu = {
+  items: MenuItem[]
+  backNavigation: {
+    href?: string
+    label: string
+    onClick?: () => void
   }
+  title: string
+}
 
+type MenuCollection = {
+  [key: string]: Menu
+}
+
+@withStyle(generateStyle, generateComponentTheme)
+class App extends Component<AppProps, AppState> {
   constructor(props: AppProps) {
     super(props)
 
     this.state = {
-      showMenu: false,
-      themeKey: undefined,
-      layout: 'large',
-      docsData: null,
-      versionsData: null,
-      iconsData: null,
       menuStack: ['default']
     }
   }
 
-  pushMenu = (menuKey) => {
+  pushMenu = (menuKey: string) => {
     this.setState((prevState) => ({
       menuStack: [...prevState.menuStack, menuKey]
     }))
@@ -102,7 +116,7 @@ class App extends Component<AppProps, AppState> {
       </IconButton>
     )
 
-    const menu = {
+    const menu: MenuCollection = {
       default: {
         items: [
           {
@@ -110,14 +124,16 @@ class App extends Component<AppProps, AppState> {
             renderBeforeLabel: <IconUserLine />,
             onClick: () => {
               this.pushMenu('account')
-            }
+            },
+            renderAfterLabel: <IconArrowOpenEndSolid />
           },
           {
             label: 'Courses',
             renderBeforeLabel: <IconCoursesLine />,
             onClick: () => {
               this.pushMenu('courses')
-            }
+            },
+            renderAfterLabel: <IconArrowOpenEndSolid />
           },
           {
             label: 'Help',

From 615fb440d3bc2cf1ec07722225205be93f8aa2fa Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 6 Dec 2024 15:27:57 +0100
Subject: [PATCH 18/53] WIP(ui-top-nav-bar): refinement

---
 packages/__docs__/src/App/index.tsx           |  3 +-
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 51 ++-----------------
 2 files changed, 7 insertions(+), 47 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index eb87ec87b6..bfbf49934a 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -37,7 +37,6 @@ import {
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { propTypes, allowedProps } from './props'
 
 type AppProps = Record<string, never>
 
@@ -209,6 +208,8 @@ class App extends Component<AppProps, AppState> {
           ]}
           mobileMenuBackNavigation={menu[this.getCurrentMenu()].backNavigation}
           mobileMenu={menu[this.getCurrentMenu()].items}
+          beforeMobileMenuItems={<div>Before Mobile Menu</div>}
+          afterMobileMenuItems={<div>After Mobile Menu</div>}
         />
       </div>
     )
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index daab4792be..e2dc8c0dbd 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -50,7 +50,9 @@ const CanvasTopNav = ({
   mobileButtons = [],
   mobileMenu = [],
   mobileMenuBackNavigation,
-  hamburgerOnClick
+  hamburgerOnClick,
+  beforeMobileMenuItems,
+  afterMobileMenuItems
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -103,6 +105,7 @@ const CanvasTopNav = ({
             </BreadcrumbLink>
           </Breadcrumb>
         </div>
+        {beforeMobileMenuItems && beforeMobileMenuItems}
         <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item: any, index: any) => (
             <MobileTopNav.Item
@@ -115,6 +118,7 @@ const CanvasTopNav = ({
             </MobileTopNav.Item>
           ))}
         </MobileTopNav.ItemList>
+        {afterMobileMenuItems && afterMobileMenuItems}
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (
@@ -150,51 +154,6 @@ const CanvasTopNav = ({
     </DesktopTopNav>
   )
 }
-// <CanvasTopNav
-//   brand={
-//     <IconButton
-//       screenReaderLabel="Canvas Brand"
-//       href="#"
-//       withBackground={false}
-//       withBorder={false}
-//     >
-//       <svg viewBox="0 0 1920 1920" fill="#fff" width="28px" height="28px">
-//         <path d="M958.568 277.97C1100.42..." />
-//       </svg>
-//     </IconButton>
-//   }
-//   lightMode={true}
-//   breadcrumbLinks={[
-//     { href: '#', label: 'Student Forecast' },
-//     { href: '#', label: 'University of Utah' },
-//     { href: '#', label: 'University of Colleges' },
-//   ]}
-//   title="Courses"
-//   buttons={[
-//     {
-//       screenReaderLabel: 'Analytics',
-//       color: 'primary-inverse',
-//     },
-//     {
-//       screenReaderLabel: 'Alerts',
-//       color: 'primary-inverse',
-//     },
-//   ]}
-//   items={[
-//     { label: 'Account', leftIcon: <IconUserLine />, onClick: () => alert('Account clicked') },
-//     { label: 'Admin', leftIcon: <IconAdminLine />, onClick: () => alert('Admin clicked') },
-//     { label: 'Dashboard', leftIcon: <IconDashboardLine />, onClick: () => alert('Dashboard') },
-//   ]}
-// />
-
-// <CanvasTopNav lightMode={true} >
-//   <MobileTopNav>
-//     <div>Mobile Navigation Content</div>
-//   </MobileTopNav>
-//   <DesktopTopNav>
-//     <div>Desktop Navigation Content</div>
-//   </DesktopTopNav>
-// </CanvasTopNav>
 
 export { CanvasTopNav }
 export default CanvasTopNav

From 4014ab6c6f259d6b21efc835636249e5d584dfb9 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Dec 2024 12:16:17 +0100
Subject: [PATCH 19/53] WIP(ui-top-nav-bar): add withStyle to CanvasTopNav

---
 packages/__docs__/src/App/index.tsx           | 28 +++++++-
 packages/__docs__/src/index.tsx               |  7 +-
 packages/__docs__/webpack.config.mjs          |  1 +
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 60 ++++++++++++----
 .../src/CanvasTopNav/styles.tsx               | 70 ++-----------------
 .../src/DesktopTopNav/styles.tsx              |  2 +-
 6 files changed, 82 insertions(+), 86 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index bfbf49934a..7f685fe6b1 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -23,7 +23,7 @@
  */
 
 import { Component } from 'react'
-
+import { Route, Routes, useNavigate } from 'react-router-dom'
 import { withStyle } from '@instructure/emotion'
 import { CanvasTopNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
@@ -32,13 +32,16 @@ import {
   IconAnalyticsLine,
   IconArrowOpenEndSolid,
   IconCoursesLine,
+  IconDashboardLine,
   IconQuestionLine,
   IconUserLine
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
-type AppProps = Record<string, never>
+type AppProps = {
+  navigate: (path: string, options?: { replace: boolean }) => void
+}
 
 type AppState = {
   menuStack: string[]
@@ -134,6 +137,15 @@ class App extends Component<AppProps, AppState> {
             },
             renderAfterLabel: <IconArrowOpenEndSolid />
           },
+          {
+            label: 'Dashboard',
+            renderBeforeLabel: <IconDashboardLine />,
+            onClick: () => {
+              // Navigate and reload logic
+              this.props.navigate('/dashboard', { replace: true })
+              window.location.reload() // Forces a reload
+            }
+          },
           {
             label: 'Help',
             renderBeforeLabel: <IconQuestionLine />
@@ -211,10 +223,20 @@ class App extends Component<AppProps, AppState> {
           beforeMobileMenuItems={<div>Before Mobile Menu</div>}
           afterMobileMenuItems={<div>After Mobile Menu</div>}
         />
+        <Routes>
+          <Route path="/" element={<h1>This is home</h1>} />
+          <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
+          {/*<Route path="/profile" element={<Profile />} />*/}
+        </Routes>
       </div>
     )
   }
 }
 
+function AppWrapper() {
+  const navigate = useNavigate()
+  return <App navigate={navigate} />
+}
+
 export default App
-export { App }
+export { App, AppWrapper }
diff --git a/packages/__docs__/src/index.tsx b/packages/__docs__/src/index.tsx
index fd5371f6b1..83765760ba 100644
--- a/packages/__docs__/src/index.tsx
+++ b/packages/__docs__/src/index.tsx
@@ -25,14 +25,17 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { App } from './App'
+import { AppWrapper } from './App'
 import { InstUISettingsProvider } from '@instructure/emotion'
 import '../globals'
+import { BrowserRouter } from 'react-router-dom'
 
 createRoot(document.getElementById('app')!).render(
   <StrictMode>
     <InstUISettingsProvider>
-      <App />
+      <BrowserRouter>
+      <AppWrapper />
+    </BrowserRouter>
     </InstUISettingsProvider>
   </StrictMode>
 )
diff --git a/packages/__docs__/webpack.config.mjs b/packages/__docs__/webpack.config.mjs
index c11c9ed67c..048929c5de 100644
--- a/packages/__docs__/webpack.config.mjs
+++ b/packages/__docs__/webpack.config.mjs
@@ -59,6 +59,7 @@ const config = merge(baseConfig, {
       directory: outputPath,
     },
     host: '0.0.0.0',
+    historyApiFallback: true,
     onListening: function () {
       // devServer is watching source files by default and hot reloading the docs page if they are changed
       // however markdown files (i.e. README.md) need to be recompiled hence the need for chokidar
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index e2dc8c0dbd..1277cc3d86 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -26,7 +26,7 @@
 import { useEffect, useState } from 'react'
 import { DesktopTopNav } from '../DesktopTopNav'
 import { MobileTopNav } from '../MobileTopNav'
-import { jsx } from '@instructure/emotion'
+import { InstUISettingsProvider, jsx, useTheme } from '@instructure/emotion'
 import {
   IconAddLine,
   IconAdminSolid,
@@ -35,6 +35,7 @@ import {
 } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
+import { generateStyles } from './styles'
 
 /**
 ---
@@ -52,7 +53,8 @@ const CanvasTopNav = ({
   mobileMenuBackNavigation,
   hamburgerOnClick,
   beforeMobileMenuItems,
-  afterMobileMenuItems
+  afterMobileMenuItems,
+  styles
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -134,17 +136,27 @@ const CanvasTopNav = ({
           <IconHamburgerLine />
         </IconButton>
         <div style={{ minWidth: '100%' }}>
-          <Breadcrumb label={breadcrumb.label}>
-            {breadcrumb.links.map((link: any, index: any) =>
-              link.href ? (
-                <Breadcrumb.Link key={index} href={link.href}>
-                  {link.label}
-                </Breadcrumb.Link>
-              ) : (
-                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-              )
-            )}
-          </Breadcrumb>
+          <InstUISettingsProvider
+            theme={{
+              componentOverrides: {
+                Link: {
+                  color: styles.breadcrumbOverride.color
+                }
+              }
+            }}
+          >
+            <Breadcrumb label={breadcrumb.label}>
+              {breadcrumb.links.map((link: any, index: any) =>
+                link.href ? (
+                  <Breadcrumb.Link key={index} href={link.href}>
+                    {link.label}
+                  </Breadcrumb.Link>
+                ) : (
+                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+                )
+              )}
+            </Breadcrumb>
+          </InstUISettingsProvider>
         </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
@@ -155,5 +167,23 @@ const CanvasTopNav = ({
   )
 }
 
-export { CanvasTopNav }
-export default CanvasTopNav
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  // eslint-disable-next-line react/display-name
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC: any = withStyles(generateStyles)(CanvasTopNav)
+SC.displayName = 'CanvasTopNav'
+
+export { SC as CanvasTopNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index f5fb6c95f2..cbeee97e5c 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -23,75 +23,15 @@
  */
 import type { TopNavProps } from './props'
 
-//TODO use theme variables for spacing
 const generateStyles = (props: TopNavProps, theme: any) => {
   const { lightMode } = props
   return {
-    container: (open: boolean) => {
-      return {
-        height: '54px',
-        position: open ? 'fixed' : 'relative',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
-        width: '100%',
-        zIndex: '1000'
-      }
-    },
-    topBar: {
-      padding: `0 ${theme.spacing.small}`,
-      height: '54px',
-      display: 'flex',
-      alignItems: 'center'
-      // justifyContent: 'space-between'
-    },
-    content: (open: boolean) => {
-      return {
-        padding: `0 ${theme.spacing.small}`,
-        height: open ? '100%' : '0px',
-        top: '3.375rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'scroll' : 'hidden',
-        position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
-      }
-    },
-    btnRow: {
-      display: 'flex',
-      marginRight: '12px'
+    breadcrumbOverride: {
+      color: lightMode
+        ? theme?.colors?.contrasts?.blue4570
+        : theme?.colors?.contrasts?.grey1111
     }
   }
 }
-const generateItemListStyles = (_props: any, theme: any) => {
-  return {
-    divider: {
-      height: '0.0625rem',
-      overflow: 'hidden',
-      background: theme.colors.contrasts.grey1214
-    }
-  }
-}
-const generateItemStyles = (_props: any, _theme: any) => {
-  return {
-    container: {
-      margin: '16px 0',
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'flex-end'
-    },
-    leftIcon: { paddingRight: '8px', fontSize: '18px' },
-    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
-  }
-}
 
-export { generateStyles, generateItemListStyles, generateItemStyles }
+export { generateStyles }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 5db74ef85f..829d0a149b 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -28,7 +28,7 @@ const generateStyles = (props: DesktopTopNavProps, theme: any) => {
   return {
     container: {
       height: '66px',
-      position: 'fixed',
+      position: 'relative',
       backgroundColor: lightMode
         ? theme.colors.ui.surfacePageSecondary
         : theme.colors.ui.surfaceDark,

From fff50f7d39d31df4e93b1eb1f8d88e6ca7772f3d Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Dec 2024 16:29:40 +0100
Subject: [PATCH 20/53] WIP(ui-top-nav-bar): refactor

---
 packages/__docs__/src/App/index.tsx           | 49 +++++++++++----
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 60 ++++++++++++-------
 2 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 7f685fe6b1..879f1e14f9 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -38,6 +38,7 @@ import {
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+import { Img } from '@instructure/ui-img'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -62,6 +63,8 @@ type Menu = {
     onClick?: () => void
   }
   title: string
+  renderBeforeMobileMenuItems?: JSX.Element
+  renderAfterMobileMenuItems?: JSX.Element
 }
 
 type MenuCollection = {
@@ -74,7 +77,12 @@ class App extends Component<AppProps, AppState> {
     super(props)
 
     this.state = {
-      menuStack: ['default']
+      menuStack: [
+        'default',
+        ...(window.location.pathname.substring(1)
+          ? [window.location.pathname.substring(1)]
+          : [])
+      ]
     }
   }
 
@@ -141,9 +149,8 @@ class App extends Component<AppProps, AppState> {
             label: 'Dashboard',
             renderBeforeLabel: <IconDashboardLine />,
             onClick: () => {
-              // Navigate and reload logic
               this.props.navigate('/dashboard', { replace: true })
-              window.location.reload() // Forces a reload
+              window.location.reload()
             }
           },
           {
@@ -152,12 +159,19 @@ class App extends Component<AppProps, AppState> {
           }
         ],
         backNavigation: {
-          href: '#',
-          label: 'Back'
+          href: undefined,
+          label: '',
+          onClick: undefined
         },
-        title: 'Main Menu'
+        title: ''
       },
       account: {
+        renderBeforeMobileMenuItems: (
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+          </div>
+        ),
+        renderAfterMobileMenuItems: <h3>Additional account info</h3>,
         items: [
           {
             label: 'AccountInfo1'
@@ -181,6 +195,18 @@ class App extends Component<AppProps, AppState> {
           }
         },
         title: 'Courses'
+      },
+      dashboard: {
+        title: 'Dashboard',
+        items: [{ label: 'Courses1' }, { label: 'Courses2' }],
+        backNavigation: {
+          label: 'Back',
+          onClick: () => {
+            this.popMenu()
+            this.props.navigate('/', { replace: true })
+            window.location.reload()
+          }
+        }
       }
     }
 
@@ -218,15 +244,18 @@ class App extends Component<AppProps, AppState> {
               onClick: () => alert('Alerts clicked')
             }
           ]}
-          mobileMenuBackNavigation={menu[this.getCurrentMenu()].backNavigation}
+          mobileMenuBackNavigation={menu[this.getCurrentMenu()]?.backNavigation}
           mobileMenu={menu[this.getCurrentMenu()].items}
-          beforeMobileMenuItems={<div>Before Mobile Menu</div>}
-          afterMobileMenuItems={<div>After Mobile Menu</div>}
+          beforeMobileMenuItems={
+            menu[this.getCurrentMenu()]?.renderBeforeMobileMenuItems
+          }
+          afterMobileMenuItems={
+            menu[this.getCurrentMenu()]?.renderAfterMobileMenuItems
+          }
         />
         <Routes>
           <Route path="/" element={<h1>This is home</h1>} />
           <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
-          {/*<Route path="/profile" element={<Profile />} />*/}
         </Routes>
       </div>
     )
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 1277cc3d86..cca5908a26 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -88,26 +88,42 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        <div style={{ marginTop: 16 }}>
-          <Breadcrumb label={mobileMenuBackNavigation.label}>
-            <BreadcrumbLink
-              href={mobileMenuBackNavigation.href}
-              onClick={mobileMenuBackNavigation.onClick}
+        {mobileMenuBackNavigation.label && (
+          <div style={{ marginTop: 16 }}>
+            <InstUISettingsProvider
+              theme={{
+                componentOverrides: {
+                  Link: {
+                    color: styles.breadcrumbOverride.color
+                  }
+                }
+              }}
             >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px'
-                }}
-              >
-                <IconArrowOpenStartLine />
-                {mobileMenuBackNavigation.label}
-              </div>
-            </BreadcrumbLink>
-          </Breadcrumb>
-        </div>
-        {beforeMobileMenuItems && beforeMobileMenuItems}
+              <Breadcrumb label={mobileMenuBackNavigation.label}>
+                <BreadcrumbLink
+                  href={mobileMenuBackNavigation.href}
+                  onClick={mobileMenuBackNavigation.onClick}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '8px'
+                    }}
+                  >
+                    <IconArrowOpenStartLine />
+                    {mobileMenuBackNavigation.label}
+                  </div>
+                </BreadcrumbLink>
+              </Breadcrumb>
+            </InstUISettingsProvider>
+          </div>
+        )}
+        {beforeMobileMenuItems && (
+          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+            {beforeMobileMenuItems}
+          </div>
+        )}
         <MobileTopNav.ItemList title={mobileMenuTitle}>
           {mobileMenu.map((item: any, index: any) => (
             <MobileTopNav.Item
@@ -120,7 +136,11 @@ const CanvasTopNav = ({
             </MobileTopNav.Item>
           ))}
         </MobileTopNav.ItemList>
-        {afterMobileMenuItems && afterMobileMenuItems}
+        {afterMobileMenuItems && (
+          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
+            {afterMobileMenuItems}
+          </div>
+        )}
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (

From b69827bad36812b313c720ea1176c3ecc375787c Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 13 Dec 2024 16:55:50 +0100
Subject: [PATCH 21/53] WIP: add onClick for help

---
 packages/__docs__/src/App/index.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 879f1e14f9..5fe4560399 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -155,7 +155,8 @@ class App extends Component<AppProps, AppState> {
           },
           {
             label: 'Help',
-            renderBeforeLabel: <IconQuestionLine />
+            renderBeforeLabel: <IconQuestionLine />,
+            onClick: () => alert('Help clicked')
           }
         ],
         backNavigation: {
@@ -171,7 +172,22 @@ class App extends Component<AppProps, AppState> {
             <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
           </div>
         ),
-        renderAfterMobileMenuItems: <h3>Additional account info</h3>,
+        renderAfterMobileMenuItems: (
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            aliquet erat in orci semper fringilla. Nullam suscipit mollis mi, at
+            vehicula magna vulputate eu. Cras mattis felis id quam vehicula
+            euismod. Nulla dolor enim, ornare in odio a, molestie dictum ligula.
+            Nullam maximus et dolor eget porttitor. Vestibulum faucibus viverra
+            pellentesque. Duis lorem lectus, porta vitae aliquam vitae, vehicula
+            sagittis nulla. Aenean sagittis congue rhoncus. Cras laoreet eu
+            nulla eu dignissim. Maecenas sed massa nisi. Suspendisse
+            pellentesque, metus sed ultricies porta, justo tellus pulvinar diam,
+            ac ornare massa nibh quis purus. Duis erat ipsum, pellentesque in
+            diam non, luctus accumsan metus. In ipsum tellus, ullamcorper a
+            faucibus a, venenatis ut urna. Sed at rutrum turpis.
+          </p>
+        ),
         items: [
           {
             label: 'AccountInfo1'

From d246229a69c2633e607f673add3700f7a25ab3f3 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 4 Feb 2025 11:39:30 +0100
Subject: [PATCH 22/53] WIP(ui-top-nav-bar): add subnav

---
 packages/__docs__/src/App/index.tsx           |   3 +-
 packages/ui-top-nav-bar/src/SubNav/README.md  | 107 ++++++++++++++++++
 packages/ui-top-nav-bar/src/SubNav/index.tsx  |  85 ++++++++++++++
 packages/ui-top-nav-bar/src/SubNav/props.ts   |  51 +++++++++
 packages/ui-top-nav-bar/src/SubNav/styles.tsx |  60 ++++++++++
 packages/ui-top-nav-bar/src/index.ts          |   1 +
 6 files changed, 306 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui-top-nav-bar/src/SubNav/README.md
 create mode 100644 packages/ui-top-nav-bar/src/SubNav/index.tsx
 create mode 100644 packages/ui-top-nav-bar/src/SubNav/props.ts
 create mode 100644 packages/ui-top-nav-bar/src/SubNav/styles.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 5fe4560399..c9177edb79 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -25,7 +25,7 @@
 import { Component } from 'react'
 import { Route, Routes, useNavigate } from 'react-router-dom'
 import { withStyle } from '@instructure/emotion'
-import { CanvasTopNav } from '@instructure/ui-top-nav-bar'
+import { CanvasTopNav, SubNav } from '@instructure/ui-top-nav-bar'
 import { IconButton } from '@instructure/ui-buttons'
 import {
   IconAlertsLine,
@@ -269,6 +269,7 @@ class App extends Component<AppProps, AppState> {
             menu[this.getCurrentMenu()]?.renderAfterMobileMenuItems
           }
         />
+        <SubNav></SubNav>
         <Routes>
           <Route path="/" element={<h1>This is home</h1>} />
           <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
diff --git a/packages/ui-top-nav-bar/src/SubNav/README.md b/packages/ui-top-nav-bar/src/SubNav/README.md
new file mode 100644
index 0000000000..32fd6797e8
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/SubNav/README.md
@@ -0,0 +1,107 @@
+---
+describes: MobileTopNav
+---
+
+POC mobile top nav
+
+```js
+---
+type: example
+---
+const Example = () => {
+  const lightMode = false
+  const brandSvg = (
+    <IconButton screenReaderLabel="Canvas Brand" href="#">
+      <svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+        <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z"/>
+      </svg>
+    </IconButton>
+  )
+  return (
+    <div>
+      <p>
+        1
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        2
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        3
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        4
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        5
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        6
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        7
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        8
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        9
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        10
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        11
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        12
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        13
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        14
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        15
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        16
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        17
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        18
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        19
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+      <p>
+        20
+  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias excepturi a blanditiis, aspernatur repellat repellendus dolores cum labore eligendi architecto asperiores, dolor quisquam sequi mollitia quibusdam, cumque id ab amet?
+      </p>
+    </div>
+  )
+}
+
+render(<Example />)
+```
diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
new file mode 100644
index 0000000000..77ca73ade5
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -0,0 +1,85 @@
+/* eslint-disable react/display-name */
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/** @jsx jsx */
+import { Children, PropsWithChildren } from 'react'
+import { jsx, useTheme } from '@instructure/emotion'
+import type { SubNavProps } from './props'
+
+import { generateStyles } from './styles'
+
+/**
+---
+category: utilities
+---
+ **/
+const SubNav = ({ styles, children }: SubNavProps) => {
+  const getSubComponent = (displayName: any) => {
+    return Children.map(children, (child: any) => child)?.filter(
+      (child: any) => child?.type?.displayName === displayName
+    )
+  }
+  return (
+    // <div style={styles.container}>
+    <div>
+      FOS
+      {getSubComponent('Start')}
+      {getSubComponent('End')}
+    </div>
+  )
+}
+
+const Start = ({ children, styles }: PropsWithChildren & { styles: any }) => {
+  return <div style={styles.start}>{children}</div>
+}
+
+const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
+  return <div style={styles.end}>{children}</div>
+}
+
+const withStyles =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+const SC: any = withStyles(generateStyles)(SubNav)
+
+SC.displayName = 'SubNav'
+SC.Start = withStyles(generateStyles)(Start)
+SC.Start.displayName = 'Start'
+SC.End = withStyles(generateStyles)(End)
+SC.End.displayName = 'End'
+
+export { SC as SubNav }
+export default SC
diff --git a/packages/ui-top-nav-bar/src/SubNav/props.ts b/packages/ui-top-nav-bar/src/SubNav/props.ts
new file mode 100644
index 0000000000..3169154966
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/SubNav/props.ts
@@ -0,0 +1,51 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { ReactNode, PropsWithChildren } from 'react'
+
+type SubNavOwnProps = {
+  lightMode?: boolean
+  brand?: ReactNode
+}
+
+type SubNavStyle = {
+  container: {
+    [key: string]: string | number
+  }
+  content: (open: boolean) => {
+    [key: string]: string | number
+  }
+  topBar: {
+    [key: string]: string | number
+  }
+  btnRow: {
+    [key: string]: string | number
+  }
+}
+
+type SubNavProps = SubNavOwnProps & {
+  styles: SubNavStyle
+} & PropsWithChildren
+
+export type { SubNavProps, SubNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
new file mode 100644
index 0000000000..b40b68f1d0
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -0,0 +1,60 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { SubNavProps } from './props'
+
+const generateStyles = (props: SubNavProps, theme: any) => {
+  const { lightMode } = props
+  return {
+    container: {
+      height: '66px',
+      position: 'relative',
+      backgroundColor: lightMode
+        ? theme.colors.ui.surfacePageSecondary
+        : theme.colors.ui.surfaceDark,
+      color: lightMode
+        ? theme.colors.contrasts.grey125125
+        : theme.colors?.contrasts?.white1010,
+      width: '100%',
+      zIndex: '1000',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'row'
+    },
+    start: {
+      marginLeft: '24px',
+      marginRight: 'auto',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '16px'
+    },
+    end: {
+      marginRight: '24px',
+      display: 'flex',
+      gap: '12px'
+    }
+  }
+}
+
+export { generateStyles }
diff --git a/packages/ui-top-nav-bar/src/index.ts b/packages/ui-top-nav-bar/src/index.ts
index 68b8065ce8..acc0b972db 100644
--- a/packages/ui-top-nav-bar/src/index.ts
+++ b/packages/ui-top-nav-bar/src/index.ts
@@ -71,3 +71,4 @@ export type {
 export { MobileTopNav } from './MobileTopNav'
 export { DesktopTopNav } from './DesktopTopNav'
 export { CanvasTopNav } from './CanvasTopNav'
+export { SubNav } from './SubNav'

From 0d72441cf080a8f4f648ded13823a127bbb29f3c Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 10 Feb 2025 14:46:33 +0100
Subject: [PATCH 23/53] WIP(ui-top-nav-bar): add subnav

---
 packages/__docs__/src/App/index.tsx          | 14 +++++++--
 packages/ui-top-nav-bar/src/SubNav/index.tsx | 33 +++++++++++++++-----
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index c9177edb79..68141c07f6 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -269,9 +269,19 @@ class App extends Component<AppProps, AppState> {
             menu[this.getCurrentMenu()]?.renderAfterMobileMenuItems
           }
         />
-        <SubNav></SubNav>
+        <SubNav
+          menuItems={[
+            { title: 'Home', href: 'www.google.com', selected: true },
+            { title: 'Announcements', href: 'http://www.google.com' },
+            { title: 'Assignments', href: 'www.google.com' },
+            { title: 'Discussions', href: 'www.google.com' },
+            { title: 'Grades', href: 'www.google.com' },
+            { title: 'People', href: 'www.google.com' }
+          ]}
+        />
+
         <Routes>
-          <Route path="/" element={<h1>This is home</h1>} />
+          {/*<Route path="/" element={<h1>This is home</h1>} />*/}
           <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
         </Routes>
       </div>
diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 77ca73ade5..2854b61012 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -26,27 +26,46 @@
 /** @jsx jsx */
 import { Children, PropsWithChildren } from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
-import type { SubNavProps } from './props'
 
 import { generateStyles } from './styles'
+import { Link } from '@instructure/ui-link'
 
 /**
 ---
 category: utilities
 ---
  **/
-const SubNav = ({ styles, children }: SubNavProps) => {
+const SubNav = ({ children, menuItems }: any) => {
   const getSubComponent = (displayName: any) => {
     return Children.map(children, (child: any) => child)?.filter(
       (child: any) => child?.type?.displayName === displayName
     )
   }
   return (
-    // <div style={styles.container}>
-    <div>
-      FOS
-      {getSubComponent('Start')}
-      {getSubComponent('End')}
+    <div style={{ marginLeft: '20px', marginTop: '20px' }}>
+      {menuItems.map((item: any) => (
+        <div
+          style={{
+            justifyContent: 'center',
+            color: 'black',
+            fontSize: '20px',
+            padding: '4px',
+            borderLeft: item.selected ? '3px solid' : 'none',
+            height: '32px',
+            fontWeight: 'bold'
+          }}
+          key={item}
+        >
+          <Link
+            key={item}
+            href={item.href}
+            themeOverride={item.selected ? { color: 'black' } : {}}
+            isWithinText={false}
+          >
+            {item.title}
+          </Link>
+        </div>
+      ))}
     </div>
   )
 }

From a50864ce6c091f9926164219c559f84217d53ceb Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 21 Feb 2025 10:47:24 +0100
Subject: [PATCH 24/53] WIP(ui-top-nav-bar): add subnav styles

---
 packages/ui-top-nav-bar/src/SubNav/index.tsx  | 40 +++------------
 packages/ui-top-nav-bar/src/SubNav/styles.tsx | 49 +++++++++----------
 2 files changed, 29 insertions(+), 60 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 2854b61012..96b851197a 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -24,7 +24,6 @@
  */
 
 /** @jsx jsx */
-import { Children, PropsWithChildren } from 'react'
 import { jsx, useTheme } from '@instructure/emotion'
 
 import { generateStyles } from './styles'
@@ -32,35 +31,20 @@ import { Link } from '@instructure/ui-link'
 
 /**
 ---
-category: utilities
+category: components
 ---
  **/
-const SubNav = ({ children, menuItems }: any) => {
-  const getSubComponent = (displayName: any) => {
-    return Children.map(children, (child: any) => child)?.filter(
-      (child: any) => child?.type?.displayName === displayName
-    )
-  }
+const SubNav = ({ menuItems, styles }: any) => {
   return (
-    <div style={{ marginLeft: '20px', marginTop: '20px' }}>
+    <div style={styles.container}>
       {menuItems.map((item: any) => (
-        <div
-          style={{
-            justifyContent: 'center',
-            color: 'black',
-            fontSize: '20px',
-            padding: '4px',
-            borderLeft: item.selected ? '3px solid' : 'none',
-            height: '32px',
-            fontWeight: 'bold'
-          }}
-          key={item}
-        >
+        <div style={styles.linkContainer(item)} key={item}>
           <Link
             key={item}
             href={item.href}
-            themeOverride={item.selected ? { color: 'black' } : {}}
+            themeOverride={styles.link(item)}
             isWithinText={false}
+            onClick={item.onClick}
           >
             {item.title}
           </Link>
@@ -70,14 +54,6 @@ const SubNav = ({ children, menuItems }: any) => {
   )
 }
 
-const Start = ({ children, styles }: PropsWithChildren & { styles: any }) => {
-  return <div style={styles.start}>{children}</div>
-}
-
-const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
-  return <div style={styles.end}>{children}</div>
-}
-
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -95,10 +71,6 @@ const withStyles =
 const SC: any = withStyles(generateStyles)(SubNav)
 
 SC.displayName = 'SubNav'
-SC.Start = withStyles(generateStyles)(Start)
-SC.Start.displayName = 'Start'
-SC.End = withStyles(generateStyles)(End)
-SC.End.displayName = 'End'
 
 export { SC as SubNav }
 export default SC
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
index b40b68f1d0..ba311582ad 100644
--- a/packages/ui-top-nav-bar/src/SubNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -23,36 +23,33 @@
  */
 import type { SubNavProps } from './props'
 
-const generateStyles = (props: SubNavProps, theme: any) => {
-  const { lightMode } = props
+const generateStyles = (_props: SubNavProps, theme: any) => {
   return {
     container: {
-      height: '66px',
-      position: 'relative',
-      backgroundColor: lightMode
-        ? theme.colors.ui.surfacePageSecondary
-        : theme.colors.ui.surfaceDark,
-      color: lightMode
-        ? theme.colors.contrasts.grey125125
-        : theme.colors?.contrasts?.white1010,
-      width: '100%',
-      zIndex: '1000',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'row'
+      marginLeft: '20px',
+      marginTop: '20px'
     },
-    start: {
-      marginLeft: '24px',
-      marginRight: 'auto',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: '16px'
+    linkContainer: (item: any) => {
+      return {
+        display: 'flex',
+        alignItems: 'center',
+        color: theme?.colors?.contrasts?.grey125125,
+        fontSize: '16px',
+        borderLeft: item.selected ? '3px solid' : 'none',
+        borderColor: theme?.colors?.contrasts?.grey125125,
+        height: '32px',
+        fontWeight: 'bold',
+        marginBottom: '4px',
+        paddingLeft: '4px'
+      }
     },
-    end: {
-      marginRight: '24px',
-      display: 'flex',
-      gap: '12px'
+    link: (item: any) => {
+      return {
+        ...(item.selected && {
+          color: theme?.colors?.contrasts?.grey125125,
+          hoverColor: theme?.colors?.contrasts?.grey125125
+        })
+      }
     }
   }
 }

From 07c8a1bf74e42e6662b17e98ab4e60c7a2bc552b Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 21 Feb 2025 11:29:16 +0100
Subject: [PATCH 25/53] WIP(ui-top-nav-bar): improve types

---
 packages/ui-top-nav-bar/src/SubNav/index.tsx |  9 +++++----
 packages/ui-top-nav-bar/src/SubNav/props.ts  | 21 ++++++++++----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 96b851197a..6bd7a2c35e 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -28,19 +28,20 @@ import { jsx, useTheme } from '@instructure/emotion'
 
 import { generateStyles } from './styles'
 import { Link } from '@instructure/ui-link'
+import { SubNavProps, MenuItem } from './props'
 
 /**
 ---
 category: components
 ---
  **/
-const SubNav = ({ menuItems, styles }: any) => {
+const SubNav = ({ menuItems, styles }: SubNavProps) => {
   return (
     <div style={styles.container}>
-      {menuItems.map((item: any) => (
-        <div style={styles.linkContainer(item)} key={item}>
+      {menuItems.map((item: MenuItem) => (
+        <div style={styles.linkContainer(item)} key={item.title}>
           <Link
-            key={item}
+            key={item.title}
             href={item.href}
             themeOverride={styles.link(item)}
             isWithinText={false}
diff --git a/packages/ui-top-nav-bar/src/SubNav/props.ts b/packages/ui-top-nav-bar/src/SubNav/props.ts
index 3169154966..4a8867d312 100644
--- a/packages/ui-top-nav-bar/src/SubNav/props.ts
+++ b/packages/ui-top-nav-bar/src/SubNav/props.ts
@@ -22,30 +22,31 @@
  * SOFTWARE.
  */
 
-import type { ReactNode, PropsWithChildren } from 'react'
+type MenuItem = {
+  href: string
+  title: string
+  selected: boolean
+  onClick?: () => void
+}
 
 type SubNavOwnProps = {
-  lightMode?: boolean
-  brand?: ReactNode
+  menuItems: MenuItem[]
 }
 
 type SubNavStyle = {
   container: {
     [key: string]: string | number
   }
-  content: (open: boolean) => {
-    [key: string]: string | number
-  }
-  topBar: {
+  linkContainer: (item: MenuItem) => {
     [key: string]: string | number
   }
-  btnRow: {
+  link: (item: MenuItem) => {
     [key: string]: string | number
   }
 }
 
 type SubNavProps = SubNavOwnProps & {
   styles: SubNavStyle
-} & PropsWithChildren
+}
 
-export type { SubNavProps, SubNavOwnProps }
+export type { SubNavProps, SubNavOwnProps, MenuItem }

From 0423fb325165fa42cb4ff174f87fd72b367d2938 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 28 Feb 2025 16:10:40 +0100
Subject: [PATCH 26/53] WIP(shared-types,ui-drilldown,ui-top-nav-bar): add lti
 colors

---
 packages/__docs__/src/App/index.tsx           | 144 ++++++++---
 .../src/ComponentThemeVariables.ts            |   1 +
 .../src/Drilldown/DrilldownPage/props.ts      |  12 +-
 packages/ui-drilldown/src/Drilldown/index.tsx |  13 +-
 packages/ui-drilldown/src/Drilldown/styles.ts |   5 +-
 packages/ui-drilldown/src/Drilldown/theme.ts  |   3 +-
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 241 ++++++++++++------
 .../ui-top-nav-bar/src/CanvasTopNav/props.ts  |   2 +-
 .../src/CanvasTopNav/styles.tsx               |  31 ++-
 .../ui-top-nav-bar/src/DesktopTopNav/props.ts |   2 +-
 .../src/DesktopTopNav/styles.tsx              |  12 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  66 +----
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |   2 +-
 .../src/MobileTopNav/styles.tsx               |  48 +---
 packages/ui-top-nav-bar/src/SubNav/styles.tsx |   5 +-
 15 files changed, 354 insertions(+), 233 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 68141c07f6..ac5b5bd314 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -39,6 +39,8 @@ import {
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { Img } from '@instructure/ui-img'
+import { Drilldown } from '@instructure/ui-drilldown'
+import { View } from '@instructure/ui-view'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -107,12 +109,13 @@ class App extends Component<AppProps, AppState> {
     const isLightMode = true
 
     const brandSvg = (
-      <IconButton
-        screenReaderLabel="Canvas Brand"
+      <View
         href="#"
-        withBackground={false}
-        withBorder={false}
-        color={isLightMode ? 'secondary' : 'primary-inverse'}
+        tabIndex={0}
+        role="button"
+        position="relative"
+        borderRadius="small"
+        focusColor="inverse" // LTI eseten nincs itt inverse, kek marad a focusring
       >
         <svg
           viewBox="0 0 1920 1920"
@@ -123,9 +126,81 @@ class App extends Component<AppProps, AppState> {
         >
           <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
         </svg>
-      </IconButton>
+      </View>
     )
 
+    const menuArray: any = [
+      {
+        id: 'default',
+        options: [
+          {
+            id: 'account',
+            label: 'Account',
+            renderBeforeTitle: <IconUserLine />,
+            subPageId: 'account'
+          },
+          {
+            id: 'courses',
+            label: 'Courses',
+            renderBeforeTitle: <IconCoursesLine />,
+            subPageId: 'courses'
+          },
+          {
+            id: 'dashboard',
+            label: 'Dashboard',
+            renderBeforeTitle: <IconDashboardLine />,
+            onClick: () => {
+              this.props.navigate('/dashboard', { replace: true })
+              window.location.reload()
+            }
+          },
+          {
+            id: 'help',
+            label: 'Help',
+            renderBeforeTitle: <IconQuestionLine />,
+            onClick: () => alert('Help clicked')
+          }
+        ]
+      },
+      {
+        id: 'account',
+        title: 'Account',
+        renderBeforeMobileMenuItems: (
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+          </div>
+        ),
+        renderAfterMobileMenuItems: (
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            aliquet erat in orci semper fringilla. Nullam suscipit mollis mi, at
+            vehicula magna vulputate eu. Cras mattis felis id quam vehicula
+            euismod. Nulla dolor enim, ornare in odio a, molestie dictum ligula.
+            Nullam maximus et dolor eget porttitor. Vestibulum faucibus viverra
+            pellentesque. Duis lorem lectus, porta vitae aliquam vitae, vehicula
+            sagittis nulla. Aenean sagittis congue rhoncus. Cras laoreet eu
+            nulla eu dignissim. Maecenas sed massa nisi. Suspendisse
+            pellentesque, metus sed ultricies porta, justo tellus pulvinar diam,
+            ac ornare massa nibh quis purus. Duis erat ipsum, pellentesque in
+            diam non, luctus accumsan metus. In ipsum tellus, ullamcorper a
+            faucibus a, venenatis ut urna. Sed at rutrum turpis.
+          </p>
+        ),
+        options: [
+          { id: 'accountinfo1', label: 'Account info 1' },
+          { id: 'accountinfo2', label: 'Account info 2' }
+        ]
+      },
+      {
+        id: 'courses',
+        title: 'Courses',
+        options: [
+          { id: 'courses1', label: 'Courses1' },
+          { id: 'courses2', label: 'Courses2' }
+        ]
+      }
+    ]
+
     const menu: MenuCollection = {
       default: {
         items: [
@@ -148,9 +223,10 @@ class App extends Component<AppProps, AppState> {
           {
             label: 'Dashboard',
             renderBeforeLabel: <IconDashboardLine />,
-            onClick: () => {
+            onClick: (e) => {
+              e.preventDefault()
               this.props.navigate('/dashboard', { replace: true })
-              window.location.reload()
+              // window.location.reload()
             }
           },
           {
@@ -227,7 +303,7 @@ class App extends Component<AppProps, AppState> {
     }
 
     return (
-      <div
+      <InstUISettingsProvider
         style={{
           position: 'relative',
           width: '100%',
@@ -237,13 +313,13 @@ class App extends Component<AppProps, AppState> {
       >
         <CanvasTopNav
           brand={brandSvg}
-          lightMode={false}
+          lti={true}
           breadcrumb={{
             label: 'You are here:',
             links: [
               { href: '#', label: 'Student Forecast' },
               { href: '#', label: 'University of Utah' },
-              { href: '#', label: 'University of Colleges' }
+              { label: 'University of Colleges' }
             ]
           }}
           hamburgerOnClick={() => alert('Hamburger clicked')}
@@ -260,31 +336,29 @@ class App extends Component<AppProps, AppState> {
               onClick: () => alert('Alerts clicked')
             }
           ]}
-          mobileMenuBackNavigation={menu[this.getCurrentMenu()]?.backNavigation}
-          mobileMenu={menu[this.getCurrentMenu()].items}
-          beforeMobileMenuItems={
-            menu[this.getCurrentMenu()]?.renderBeforeMobileMenuItems
-          }
-          afterMobileMenuItems={
-            menu[this.getCurrentMenu()]?.renderAfterMobileMenuItems
-          }
-        />
-        <SubNav
-          menuItems={[
-            { title: 'Home', href: 'www.google.com', selected: true },
-            { title: 'Announcements', href: 'http://www.google.com' },
-            { title: 'Assignments', href: 'www.google.com' },
-            { title: 'Discussions', href: 'www.google.com' },
-            { title: 'Grades', href: 'www.google.com' },
-            { title: 'People', href: 'www.google.com' }
-          ]}
+          mobileMenu={menuArray}
         />
-
-        <Routes>
-          {/*<Route path="/" element={<h1>This is home</h1>} />*/}
-          <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
-        </Routes>
-      </div>
+        <div style={{ display: 'flex' }}>
+          <SubNav
+            menuItems={[
+              { title: 'Home', href: '/', selected: true },
+              { title: 'Account', href: '/account' },
+              { title: 'Courses', href: '/courses' },
+              {
+                title: 'Dashboard',
+                onClick: () => this.props.navigate('/dashboard')
+              },
+              { title: 'Help', onClick: () => alert('Help clicked') }
+            ]}
+          />
+          <div style={{ padding: '30px' }}>
+            <Routes>
+              <Route path="/" element={<h1>This is home</h1>} />
+              <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
+            </Routes>
+          </div>
+        </div>
+      </InstUISettingsProvider>
     )
   }
 }
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 5139a36afd..19b726549e 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -571,6 +571,7 @@ export type DrilldownTheme = {
   labelInfoPadding: Spacing['small']
   labelInfoColor: Colors['contrasts']['grey5782']
   borderColor: Colors['contrasts']['grey3045']
+  headerTitleTextDecoration: string
 }
 
 export type FileDropTheme = {
diff --git a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
index 74949039c4..1af03c0be6 100644
--- a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
@@ -89,6 +89,10 @@ type DrilldownPageOwnProps = {
    * Is the page disabled
    */
   disabled?: boolean
+
+  renderBeforeChildren?: () => React.ReactNode
+
+  renderAfterChildren?: () => React.ReactNode
 }
 
 type PropKeys = keyof DrilldownPageOwnProps
@@ -111,7 +115,9 @@ const propTypes: PropValidators<PropKeys> = {
   onHeaderActionClicked: PropTypes.func,
   onBackButtonClicked: PropTypes.func,
   withoutHeaderSeparator: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  renderBeforeChildren: PropTypes.func,
+  renderAfterChildren: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -123,7 +129,9 @@ const allowedProps: AllowedPropKeys = [
   'onHeaderActionClicked',
   'onBackButtonClicked',
   'withoutHeaderSeparator',
-  'disabled'
+  'disabled',
+  'renderBeforeChildren',
+  'renderAfterChildren'
 ]
 
 export type { DrilldownPageProps, PageChildren }
diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx
index 0ab586e00d..768772a3c7 100644
--- a/packages/ui-drilldown/src/Drilldown/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/index.tsx
@@ -455,12 +455,17 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
         <DrilldownOption
           id={this._headerBackId}
           onOptionClick={this.handleBackButtonClick}
+          beforeLabelContentVAlign={'center'}
         >
           <div css={styles?.headerBack} role="presentation">
             {backButtonLabel}
           </div>
         </DrilldownOption>
       )
+
+      if (currentPage.renderBeforeChildren) {
+        headerChildren.push(currentPage.renderBeforeChildren())
+      }
     }
 
     // Header title
@@ -993,7 +998,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
         lastItemWasSeparator = false
         return this.renderOption(child, getOptionProps, getDisabledOptionProps)
       } else {
-        return null
+        // eslint-disable-next-line react/jsx-key
+        return <Options.Item>{child}</Options.Item>
       }
     })
   }
@@ -1465,6 +1471,11 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             >
               <Options {...getListProps()} role="presentation" as={as}>
                 {this.renderList(getOptionProps, getDisabledOptionProps)}
+                {this.currentPage?.renderAfterChildren && (
+                  <Options.Item>
+                    {this.currentPage.renderAfterChildren()}
+                  </Options.Item>
+                )}
               </Options>
             </View>
           </View>
diff --git a/packages/ui-drilldown/src/Drilldown/styles.ts b/packages/ui-drilldown/src/Drilldown/styles.ts
index 19e5b2334b..e1ad57bd0f 100644
--- a/packages/ui-drilldown/src/Drilldown/styles.ts
+++ b/packages/ui-drilldown/src/Drilldown/styles.ts
@@ -51,7 +51,7 @@ const generateStyle = (
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
       borderColor: componentTheme.borderColor,
-
+      background: '#334451',
       ...(hasHighlightedOption && {
         '&:focus::before': {
           display: 'none'
@@ -67,7 +67,8 @@ const generateStyle = (
     },
     headerTitle: {
       label: 'drilldown__headerTitle',
-      fontWeight: componentTheme.headerTitleFontWeight
+      fontWeight: componentTheme.headerTitleFontWeight,
+      textDecoration: componentTheme.headerTitleTextDecoration
     },
     optionContainer: {
       label: 'drilldown__optionContainer',
diff --git a/packages/ui-drilldown/src/Drilldown/theme.ts b/packages/ui-drilldown/src/Drilldown/theme.ts
index af8f1d9692..37ccb187df 100644
--- a/packages/ui-drilldown/src/Drilldown/theme.ts
+++ b/packages/ui-drilldown/src/Drilldown/theme.ts
@@ -38,7 +38,8 @@ const generateComponentTheme = (theme: Theme): DrilldownTheme => {
     headerActionColor: colors?.contrasts?.blue4570,
     labelInfoPadding: spacing?.small,
     labelInfoColor: colors?.contrasts?.grey5782,
-    borderColor: colors?.contrasts?.grey3045
+    borderColor: colors?.contrasts?.grey3045,
+    headerTitleTextDecoration: 'none'
   }
 
   return {
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index cca5908a26..f751b79db3 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -29,13 +29,20 @@ import { MobileTopNav } from '../MobileTopNav'
 import { InstUISettingsProvider, jsx, useTheme } from '@instructure/emotion'
 import {
   IconAddLine,
+  IconAdminLine,
   IconAdminSolid,
   IconArrowOpenStartLine,
-  IconHamburgerLine
+  IconCoursesLine,
+  IconDashboardLine,
+  IconHamburgerLine,
+  IconQuestionLine,
+  IconUserLine
 } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
 import { generateStyles } from './styles'
+import { Drilldown } from '@instructure/ui-drilldown'
+import { Img } from '@instructure/ui-img'
 
 /**
 ---
@@ -44,7 +51,7 @@ category: components
 **/
 const CanvasTopNav = ({
   breakpoint = 768,
-  lightMode = true,
+  lti = false,
   brand,
   breadcrumb,
   mobileMenuTitle,
@@ -70,9 +77,45 @@ const CanvasTopNav = ({
     return () => window.removeEventListener('resize', handleResize)
   }, [breakpoint])
 
+  const renderDrilldownPages = (items) => {
+    return items.map((item: any, index: any) => {
+      return (
+        <Drilldown.Page key={item.id} id={item.id}>
+          {item.options.map((option) => {
+            return (
+              <Drilldown.Group key={option.id} id={option.id}>
+                <Drilldown.Option
+                  id={option.id}
+                  subPageId={option.subPageId}
+                  onOptionClick={option.onClick}
+                >
+                  {option.label}
+                </Drilldown.Option>
+              </Drilldown.Group>
+            )
+          })}
+        </Drilldown.Page>
+      )
+    })
+  }
+
+  // <Drilldown rootPageId={'default'}>
+  //   <Drilldown.Page id={'default'}>
+  //     <Drilldown.Group id={'account'} withoutSeparators={false}>
+  //       <Drilldown.Option id={'account'} subPageId={'account'} afterLabelContentVAlign={'center'}>
+  //
+  //
+  // return (
+  //   <Drilldown.Page id={items[0]}>
+  //     <Drilldown.Group id
+  //       <Drilldown.Option></Drilldown.Option>
+  //     </Drilldown.Group>
+  //   </Drilldown.Page>
+  // )
+
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
-    <MobileTopNav lightMode={lightMode} brand={brand}>
+    <MobileTopNav lti={lti} brand={brand}>
       <MobileTopNav.End>
         {mobileButtons.map((button: any, index: any) => (
           <IconButton
@@ -80,7 +123,7 @@ const CanvasTopNav = ({
             withBackground={false}
             withBorder={false}
             screenReaderLabel={button.screenReaderLabel}
-            color={lightMode ? 'primary' : 'primary-inverse'}
+            color={lti ? undefined : 'primary-inverse'}
             onClick={button.onClick}
           >
             {button.icon}
@@ -88,100 +131,144 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        {mobileMenuBackNavigation.label && (
-          <div style={{ marginTop: 16 }}>
-            <InstUISettingsProvider
-              theme={{
-                componentOverrides: {
-                  Link: {
-                    color: styles.breadcrumbOverride.color
+        <Drilldown rootPageId={'default'}>
+          {renderDrilldownPages(mobileMenu)}
+        </Drilldown>
+        <InstUISettingsProvider
+          theme={{
+            componentOverrides: {
+              'Options.Item': {
+                ...styles.optionsOverride
+              },
+              Drilldown: {
+                ...styles.drilldownOverride
+              }
+            }
+          }}
+        >
+          <Drilldown rootPageId={'default'}>
+            <Drilldown.Page id={'default'}>
+              <Drilldown.Group id={'account'} withoutSeparators={false}>
+                <Drilldown.Option
+                  id={'account'}
+                  subPageId={'account'}
+                  afterLabelContentVAlign={'center'}
+                >
+                  <div style={styles.optionContainer}>
+                    <IconUserLine />
+                    Account
+                  </div>
+                </Drilldown.Option>
+              </Drilldown.Group>
+              <Drilldown.Group id={'courses'} withoutSeparators={false}>
+                <Drilldown.Option
+                  id={'courses'}
+                  subPageId={'courses'}
+                  afterLabelContentVAlign={'center'}
+                >
+                  <div style={styles.optionContainer}>
+                    <IconCoursesLine /> Courses
+                  </div>
+                </Drilldown.Option>
+              </Drilldown.Group>
+              <Drilldown.Group id={'dashboard'} withoutSeparators={false}>
+                <Drilldown.Option
+                  id={'dashboard'}
+                  onOptionClick={() => (window.location.href = '/dashboard')}
+                >
+                  <div style={styles.optionContainer}>
+                    <IconDashboardLine /> Dashboard
+                  </div>
+                </Drilldown.Option>
+              </Drilldown.Group>
+              <Drilldown.Group id={'help'} withoutSeparators={false}>
+                <Drilldown.Option
+                  id={'help'}
+                  onOptionClick={() =>
+                    (window.location.href = 'https://www.google.com')
                   }
-                }
-              }}
-            >
-              <Breadcrumb label={mobileMenuBackNavigation.label}>
-                <BreadcrumbLink
-                  href={mobileMenuBackNavigation.href}
-                  onClick={mobileMenuBackNavigation.onClick}
                 >
-                  <div
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '8px'
-                    }}
-                  >
-                    <IconArrowOpenStartLine />
-                    {mobileMenuBackNavigation.label}
+                  <div style={styles.optionContainer}>
+                    <IconQuestionLine /> Help
                   </div>
-                </BreadcrumbLink>
-              </Breadcrumb>
-            </InstUISettingsProvider>
-          </div>
-        )}
-        {beforeMobileMenuItems && (
-          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
-            {beforeMobileMenuItems}
-          </div>
-        )}
-        <MobileTopNav.ItemList title={mobileMenuTitle}>
-          {mobileMenu.map((item: any, index: any) => (
-            <MobileTopNav.Item
-              key={index}
-              renderBeforeLabel={item.renderBeforeLabel || null}
-              renderAfterLabel={item.renderAfterLabel || null}
-              onClick={item.onClick}
+                </Drilldown.Option>
+              </Drilldown.Group>
+            </Drilldown.Page>
+
+            <Drilldown.Page
+              id="account"
+              renderTitle="Account"
+              renderBeforeChildren={() => (
+                <div style={{ display: 'flex', justifyContent: 'center' }}>
+                  <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+                </div>
+              )}
+              renderAfterChildren={() => (
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+                  aliquet erat in orci semper fringilla. Nullam suscipit mollis
+                  mi, at vehicula magna vulputate eu. Cras mattis felis id quam
+                  vehicula euismod. Nulla dolor enim, ornare in odio a, molestie
+                  dictum ligula. Nullam maximus et dolor eget porttitor.
+                  Vestibulum faucibus viverra pellentesque. Duis lorem lectus,
+                  porta vitae aliquam vitae, vehicula sagittis nulla. Aenean
+                  sagittis congue rhoncus. Cras laoreet eu nulla eu dignissim.
+                  Maecenas sed massa nisi. Suspendisse pellentesque, metus sed
+                  ultricies porta, justo tellus pulvinar diam, ac ornare massa
+                  nibh quis purus. Duis erat ipsum, pellentesque in diam non,
+                  luctus accumsan metus. In ipsum tellus, ullamcorper a faucibus
+                  a, venenatis ut urna. Sed at rutrum turpis.
+                </p>
+              )}
             >
-              {item.label}
-            </MobileTopNav.Item>
-          ))}
-        </MobileTopNav.ItemList>
-        {afterMobileMenuItems && (
-          <div style={{ marginTop: '24px', marginBottom: '16px' }}>
-            {afterMobileMenuItems}
-          </div>
-        )}
+              <Drilldown.Group id={'account1'} withoutSeparators={false}>
+                <Drilldown.Option id="account1">AccountInfo1</Drilldown.Option>
+              </Drilldown.Group>
+              <Drilldown.Group id={'account2'} withoutSeparators={false}>
+                <Drilldown.Option id="account2">AccountInfo2</Drilldown.Option>
+              </Drilldown.Group>
+            </Drilldown.Page>
+            <Drilldown.Page id="courses" renderTitle="Courses">
+              <Drilldown.Group id={'course1'} withoutSeparators={false}>
+                <Drilldown.Option id="courses1">Course 1</Drilldown.Option>
+              </Drilldown.Group>
+              <Drilldown.Group id={'course2'} withoutSeparators={false}>
+                <Drilldown.Option id="course2">Course 2</Drilldown.Option>
+              </Drilldown.Group>
+            </Drilldown.Page>
+          </Drilldown>
+        </InstUISettingsProvider>
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (
-    <DesktopTopNav lightMode={lightMode}>
+    <DesktopTopNav lightMode={lti}>
       <DesktopTopNav.Start>
         <IconButton
           withBackground={false}
           withBorder={false}
           screenReaderLabel="burgir"
           onClick={hamburgerOnClick}
-          color={lightMode ? 'secondary' : 'primary-inverse'}
+          // color={lti ? 'secondary' : 'primary-inverse'}
         >
           <IconHamburgerLine />
         </IconButton>
         <div style={{ minWidth: '100%' }}>
-          <InstUISettingsProvider
-            theme={{
-              componentOverrides: {
-                Link: {
-                  color: styles.breadcrumbOverride.color
-                }
-              }
-            }}
-          >
-            <Breadcrumb label={breadcrumb.label}>
-              {breadcrumb.links.map((link: any, index: any) =>
-                link.href ? (
-                  <Breadcrumb.Link key={index} href={link.href}>
-                    {link.label}
-                  </Breadcrumb.Link>
-                ) : (
-                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-                )
-              )}
-            </Breadcrumb>
-          </InstUISettingsProvider>
+          <Breadcrumb label={breadcrumb.label}>
+            {breadcrumb.links.map((link: any, index: any) =>
+              link.href ? (
+                <Breadcrumb.Link key={index} href={link.href}>
+                  {link.label}
+                </Breadcrumb.Link>
+              ) : (
+                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+              )
+            )}
+          </Breadcrumb>
         </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
         <Button renderIcon={<IconAddLine />}>IconAddLine</Button>
-        <Button renderIcon={<IconAdminSolid />}>IconAdminSolid</Button>
+        <Button renderIcon={<IconAdminLine />}>IconAdminSolid</Button>
       </DesktopTopNav.End>
     </DesktopTopNav>
   )
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
index 9b264a6d29..4c8cd92c9d 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
@@ -25,7 +25,7 @@
 import type { PropsWithChildren } from 'react'
 
 type TopNavOwnProps = {
-  lightMode?: boolean
+  lti?: boolean
   breakpoint?: string
 }
 
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index cbeee97e5c..991fd86f55 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -24,12 +24,33 @@
 import type { TopNavProps } from './props'
 
 const generateStyles = (props: TopNavProps, theme: any) => {
-  const { lightMode } = props
+  const { lti } = props
   return {
-    breadcrumbOverride: {
-      color: lightMode
-        ? theme?.colors?.contrasts?.blue4570
-        : theme?.colors?.contrasts?.grey1111
+    optionsOverride: {
+      background: lti
+        ? theme?.colors?.contrasts?.grey1111
+        : theme?.colors?.contrasts?.grey100100, //-> grey100100
+      highlightedBackground: lti
+        ? theme?.colors?.contrasts?.grey1214
+        : theme?.colors?.contrasts?.grey5782,
+      color: lti
+        ? theme?.colors?.contrasts?.grey125125
+        : theme?.colors?.contrasts?.white1010,
+      highlightedLabelColor: lti
+        ? theme?.colors?.contrasts?.grey125125
+        : theme?.colors?.contrasts?.white1010,
+      padding: '16px 12px',
+      lineHeight: '1.5'
+    },
+    drilldownOverride: {
+      borderColor: lti
+        ? theme?.colors?.contrasts?.grey1424
+        : theme?.colors?.contrasts?.grey100100
+    },
+    optionContainer: {
+      display: 'flex',
+      gap: '8px',
+      alignItems: 'center'
     }
   }
 }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
index 2210120ab1..bb320542ce 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
@@ -25,7 +25,7 @@
 import type { ReactNode, PropsWithChildren } from 'react'
 
 type DesktopTopNavOwnProps = {
-  lightMode?: boolean
+  lti?: boolean
   brand?: ReactNode
 }
 
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 829d0a149b..4fdc4883a6 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -24,18 +24,16 @@
 import type { DesktopTopNavProps } from './props'
 
 const generateStyles = (props: DesktopTopNavProps, theme: any) => {
-  const { lightMode } = props
+  const { lti } = props
   return {
     container: {
       height: '66px',
       position: 'relative',
-      backgroundColor: lightMode
-        ? theme.colors.ui.surfacePageSecondary
-        : theme.colors.ui.surfaceDark,
-      color: lightMode
-        ? theme.colors.contrasts.grey125125
-        : theme.colors?.contrasts?.white1010,
+      borderBottom: '1px solid',
+      borderColor: theme.colors.contrasts.grey1424,
+      backgroundColor: theme.colors.contrasts.grey1111,
       width: '100%',
+      color: theme.colors.contrasts.grey125125,
       zIndex: '1000',
       display: 'flex',
       alignItems: 'center',
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 97442980fd..0119bc2d52 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -48,7 +48,7 @@ category: utilities
 ---
 **/
 const MobileTopNav = ({
-  lightMode = false,
+  lti = false,
   brand,
   styles,
   children
@@ -61,6 +61,7 @@ const MobileTopNav = ({
   }, [open])
 
   const getSubComponent = (displayName: any) => {
+    // TODO: specify the type of the child
     return Children.map(children, (child: any) => child)?.filter(
       (child: any) => child?.type?.displayName === displayName
     )
@@ -75,8 +76,8 @@ const MobileTopNav = ({
           <IconButton
             withBackground={false}
             withBorder={false}
-            screenReaderLabel="burgir"
-            color={lightMode ? 'primary' : 'primary-inverse'}
+            screenReaderLabel="burger"
+            color={lti ? undefined : 'primary-inverse'}
             onClick={() => setOpen((open) => !open)}
           >
             {open ? <IconXLine /> : <IconHamburgerLine />}
@@ -97,60 +98,6 @@ const Menu = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
-const Title = ({ children }: PropsWithChildren) => {
-  return <div style={{ margin: '32px 0' }}>{children}</div>
-}
-
-Title.displayName = 'Title'
-
-const ItemList = ({
-  children,
-  title,
-  styles
-}: PropsWithChildren & { styles: any; title: any }) => {
-  return (
-    <Fragment>
-      {title && <Title>{title}</Title>}
-      {Children.map(children, (child, index) => (
-        <Fragment>
-          {child}
-          {index < React.Children.count(children) - 1 && (
-            <div style={styles.divider}></div>
-          )}
-        </Fragment>
-      ))}
-    </Fragment>
-  )
-}
-
-ItemList.displayName = 'ItemList'
-
-const Item = ({
-  children,
-  renderBeforeLabel,
-  renderAfterLabel,
-  onClick,
-  styles
-}: PropsWithChildren & {
-  renderBeforeLabel: any
-  renderAfterLabel: any
-  onClick: any
-  styles: any
-}) => {
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div style={styles.container} onClick={onClick}>
-      {renderBeforeLabel && (
-        <div style={styles.leftIcon}>{renderBeforeLabel}</div>
-      )}
-      {children}
-      {renderAfterLabel && (
-        <div style={styles.rightIcon}>{renderAfterLabel}</div>
-      )}
-    </div>
-  )
-}
-
 const withStyles =
   <ComponentOwnProps, ComponentStyle>(
     generateStyles: (props: any, theme: any) => ComponentStyle
@@ -169,12 +116,7 @@ const SC: any = withStyles(generateStyles)(MobileTopNav)
 
 SC.End = End
 SC.End.displayName = 'End'
-SC.Title = Title
-SC.ItemList = withStyles(generateItemListStyles)(ItemList)
 // TODO investigate whether displayName should be added to the original component
-SC.ItemList.displayName = 'ItemList'
-SC.Item = withStyles(generateItemStyles)(Item) //withStyles(generateItemStyles)(Item)
-SC.Item.displayName = 'Item'
 SC.Menu = Menu
 SC.Menu.displayName = 'Menu'
 SC.displayName = 'MobileTopNav'
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 9202101531..4da3ddca77 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -25,7 +25,7 @@
 import type { ReactNode, PropsWithChildren } from 'react'
 
 type MobileTopNavOwnProps = {
-  lightMode?: boolean
+  lti?: boolean
   brand?: ReactNode
 }
 
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index 60411e0d2d..a72ecf9972 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -25,17 +25,15 @@ import type { MobileTopNavProps } from './props'
 
 //TODO use theme variables for spacing
 const generateStyles = (props: MobileTopNavProps, theme: any) => {
-  const { lightMode } = props
+  const { lti } = props
   return {
     container: (_open: boolean) => {
       return {
         height: '54px',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010,
+        backgroundColor: lti
+          ? theme?.colors?.contrasts?.grey1111
+          : theme?.colors?.contrasts?.grey100100, //CANVAS, LTI LATER
+        color: theme?.colors?.contrasts?.grey125125,
         width: '100%',
         zIndex: '9999'
       }
@@ -49,20 +47,17 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
     },
     content: (open: boolean) => {
       return {
-        padding: `0 ${theme.spacing.small}`,
         height: open ? '100%' : '0px',
         top: '3.375rem',
         bottom: 0,
         left: 0,
         right: 0,
-        overflow: open ? 'scroll' : 'hidden',
+        overflow: open ? 'hidden' : 'scroll',
         position: 'fixed',
-        backgroundColor: lightMode
-          ? theme.colors.ui.surfacePageSecondary
-          : theme.colors.ui.surfaceDark,
-        color: lightMode
-          ? theme.colors.contrasts.grey125125
-          : theme.colors?.contrasts?.white1010
+        backgroundColor: lti
+          ? theme?.colors?.contrasts?.grey1111
+          : theme?.colors?.contrasts?.grey100100,
+        color: theme.colors?.contrasts?.white1010
       }
     },
     end: {
@@ -72,26 +67,5 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
     }
   }
 }
-const generateItemListStyles = (_props: any, theme: any) => {
-  return {
-    divider: {
-      height: '0.0625rem',
-      overflow: 'hidden',
-      background: theme.colors.contrasts.grey1214
-    }
-  }
-}
-const generateItemStyles = (_props: any, _theme: any) => {
-  return {
-    container: {
-      margin: '16px 0',
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'flex-end'
-    },
-    leftIcon: { paddingRight: '8px', fontSize: '18px' },
-    rightIcon: { marginLeft: 'auto', paddingRight: '8px', fontSize: '18px' }
-  }
-}
 
-export { generateStyles, generateItemListStyles, generateItemStyles }
+export { generateStyles }
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
index ba311582ad..0a6ce8f351 100644
--- a/packages/ui-top-nav-bar/src/SubNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -27,10 +27,12 @@ const generateStyles = (_props: SubNavProps, theme: any) => {
   return {
     container: {
       marginLeft: '20px',
-      marginTop: '20px'
+      marginTop: '20px',
+      label: 'subNavContainer'
     },
     linkContainer: (item: any) => {
       return {
+        label: 'subNavLinkContainer',
         display: 'flex',
         alignItems: 'center',
         color: theme?.colors?.contrasts?.grey125125,
@@ -45,6 +47,7 @@ const generateStyles = (_props: SubNavProps, theme: any) => {
     },
     link: (item: any) => {
       return {
+        label: 'subNavLink',
         ...(item.selected && {
           color: theme?.colors?.contrasts?.grey125125,
           hoverColor: theme?.colors?.contrasts?.grey125125

From 11889e5f706ba4cd63de5f3ac10307137b36404f Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 13 Mar 2025 16:44:15 +0100
Subject: [PATCH 27/53] WIP(emotion,ui-drilldown,ui-top-nav-bar): add sidenav

---
 packages/__docs__/src/App/index.tsx           | 338 ++++++++----------
 packages/__docs__/src/index.tsx               |   2 +-
 packages/emotion/src/index.ts                 |   1 +
 packages/emotion/src/withFunctionalStyle.tsx  |  44 +++
 .../src/Drilldown/DrilldownPage/props.ts      |   8 +-
 packages/ui-drilldown/src/Drilldown/index.tsx |   4 +-
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 164 ++-------
 .../src/DesktopTopNav/index.tsx               |  23 +-
 .../src/DesktopTopNav/styles.tsx              |   3 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  27 +-
 packages/ui-top-nav-bar/src/SubNav/index.tsx  |  19 +-
 11 files changed, 228 insertions(+), 405 deletions(-)
 create mode 100644 packages/emotion/src/withFunctionalStyle.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index ac5b5bd314..7f998d95aa 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -26,11 +26,9 @@ import { Component } from 'react'
 import { Route, Routes, useNavigate } from 'react-router-dom'
 import { withStyle } from '@instructure/emotion'
 import { CanvasTopNav, SubNav } from '@instructure/ui-top-nav-bar'
-import { IconButton } from '@instructure/ui-buttons'
 import {
   IconAlertsLine,
   IconAnalyticsLine,
-  IconArrowOpenEndSolid,
   IconCoursesLine,
   IconDashboardLine,
   IconQuestionLine,
@@ -39,8 +37,9 @@ import {
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 import { Img } from '@instructure/ui-img'
-import { Drilldown } from '@instructure/ui-drilldown'
 import { View } from '@instructure/ui-view'
+import { SideNavBar } from '@instructure/ui-side-nav-bar'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -50,63 +49,34 @@ type AppState = {
   menuStack: string[]
 }
 
-type MenuItem = {
-  label: string
-  renderBeforeLabel?: JSX.Element
-  onClick?: () => void
-  renderAfterLabel?: JSX.Element
-}
-
-type Menu = {
-  items: MenuItem[]
-  backNavigation: {
-    href?: string
-    label: string
-    onClick?: () => void
-  }
-  title: string
-  renderBeforeMobileMenuItems?: JSX.Element
-  renderAfterMobileMenuItems?: JSX.Element
-}
-
-type MenuCollection = {
-  [key: string]: Menu
-}
-
 @withStyle(generateStyle, generateComponentTheme)
 class App extends Component<AppProps, AppState> {
   constructor(props: AppProps) {
     super(props)
 
     this.state = {
-      menuStack: [
-        'default',
-        ...(window.location.pathname.substring(1)
-          ? [window.location.pathname.substring(1)]
-          : [])
-      ]
+      windowWidth: window.innerWidth
     }
   }
 
-  pushMenu = (menuKey: string) => {
-    this.setState((prevState) => ({
-      menuStack: [...prevState.menuStack, menuKey]
-    }))
+  isCoursePage() {
+    return location.pathname.startsWith('/courses')
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize)
   }
 
-  popMenu = () => {
-    this.setState((prevState) => ({
-      menuStack: prevState.menuStack.slice(0, -1)
-    }))
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize)
   }
 
-  getCurrentMenu = () => {
-    const { menuStack } = this.state
-    return menuStack[menuStack.length - 1]
+  handleResize = () => {
+    this.setState({ windowWidth: window.innerWidth })
   }
 
   render() {
-    const isLightMode = true
+    const isMobile = this.state.windowWidth < 768
 
     const brandSvg = (
       <View
@@ -151,7 +121,7 @@ class App extends Component<AppProps, AppState> {
             renderBeforeTitle: <IconDashboardLine />,
             onClick: () => {
               this.props.navigate('/dashboard', { replace: true })
-              window.location.reload()
+              // window.location.reload()
             }
           },
           {
@@ -195,170 +165,146 @@ class App extends Component<AppProps, AppState> {
         id: 'courses',
         title: 'Courses',
         options: [
-          { id: 'courses1', label: 'Courses1' },
-          { id: 'courses2', label: 'Courses2' }
-        ]
-      }
-    ]
-
-    const menu: MenuCollection = {
-      default: {
-        items: [
           {
-            label: 'Account',
-            renderBeforeLabel: <IconUserLine />,
+            id: 'courses1',
+            label: 'Courses1',
             onClick: () => {
-              this.pushMenu('account')
-            },
-            renderAfterLabel: <IconArrowOpenEndSolid />
+              this.props.navigate('/courses/course1', { replace: true })
+              setTimeout(() => {
+                window.location.reload()
+              }, 50) // Small delay ensures React updates before reloading
+
+              // window.location.reload()
+            }
           },
           {
-            label: 'Courses',
-            renderBeforeLabel: <IconCoursesLine />,
+            id: 'courses2',
+            label: 'Courses2',
             onClick: () => {
-              this.pushMenu('courses')
-            },
-            renderAfterLabel: <IconArrowOpenEndSolid />
-          },
-          {
-            label: 'Dashboard',
-            renderBeforeLabel: <IconDashboardLine />,
-            onClick: (e) => {
-              e.preventDefault()
-              this.props.navigate('/dashboard', { replace: true })
+              this.props.navigate('/courses/course2', { replace: true })
+              setTimeout(() => {
+                window.location.reload()
+              }, 50) // Small delay ensures React updates before reloading
+
               // window.location.reload()
             }
-          },
-          {
-            label: 'Help',
-            renderBeforeLabel: <IconQuestionLine />,
-            onClick: () => alert('Help clicked')
-          }
-        ],
-        backNavigation: {
-          href: undefined,
-          label: '',
-          onClick: undefined
-        },
-        title: ''
-      },
-      account: {
-        renderBeforeMobileMenuItems: (
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
-          </div>
-        ),
-        renderAfterMobileMenuItems: (
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-            aliquet erat in orci semper fringilla. Nullam suscipit mollis mi, at
-            vehicula magna vulputate eu. Cras mattis felis id quam vehicula
-            euismod. Nulla dolor enim, ornare in odio a, molestie dictum ligula.
-            Nullam maximus et dolor eget porttitor. Vestibulum faucibus viverra
-            pellentesque. Duis lorem lectus, porta vitae aliquam vitae, vehicula
-            sagittis nulla. Aenean sagittis congue rhoncus. Cras laoreet eu
-            nulla eu dignissim. Maecenas sed massa nisi. Suspendisse
-            pellentesque, metus sed ultricies porta, justo tellus pulvinar diam,
-            ac ornare massa nibh quis purus. Duis erat ipsum, pellentesque in
-            diam non, luctus accumsan metus. In ipsum tellus, ullamcorper a
-            faucibus a, venenatis ut urna. Sed at rutrum turpis.
-          </p>
-        ),
-        items: [
-          {
-            label: 'AccountInfo1'
-          },
-          { label: 'AccountInfo2' }
-        ],
-        backNavigation: {
-          label: 'Back',
-          onClick: () => {
-            this.popMenu()
-          }
-        },
-        title: 'Account'
-      },
-      courses: {
-        items: [{ label: 'Courses1' }, { label: 'Courses2' }],
-        backNavigation: {
-          label: 'Back',
-          onClick: () => {
-            this.popMenu()
-          }
-        },
-        title: 'Courses'
-      },
-      dashboard: {
-        title: 'Dashboard',
-        items: [{ label: 'Courses1' }, { label: 'Courses2' }],
-        backNavigation: {
-          label: 'Back',
-          onClick: () => {
-            this.popMenu()
-            this.props.navigate('/', { replace: true })
-            window.location.reload()
           }
-        }
+        ]
       }
-    }
+    ]
 
     return (
-      <InstUISettingsProvider
-        style={{
-          position: 'relative',
-          width: '100%',
-          maxWidth: '100%',
-          boxSizing: 'border-box'
-        }}
-      >
-        <CanvasTopNav
-          brand={brandSvg}
-          lti={true}
-          breadcrumb={{
-            label: 'You are here:',
-            links: [
-              { href: '#', label: 'Student Forecast' },
-              { href: '#', label: 'University of Utah' },
-              { label: 'University of Colleges' }
-            ]
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <InstUISettingsProvider
+          style={{
+            position: 'relative',
+            width: '100%',
+            maxWidth: '100%',
+            boxSizing: 'border-box'
           }}
-          hamburgerOnClick={() => alert('Hamburger clicked')}
-          mobileMenuTitle={menu[this.getCurrentMenu()].title}
-          mobileButtons={[
-            {
-              screenReaderLabel: 'Analytics',
-              icon: <IconAnalyticsLine />,
-              onClick: () => alert('Analytics clicked')
-            },
-            {
-              screenReaderLabel: 'Alerts',
-              icon: <IconAlertsLine />,
-              onClick: () => alert('Alerts clicked')
-            }
-          ]}
-          mobileMenu={menuArray}
-        />
-        <div style={{ display: 'flex' }}>
-          <SubNav
-            menuItems={[
-              { title: 'Home', href: '/', selected: true },
-              { title: 'Account', href: '/account' },
-              { title: 'Courses', href: '/courses' },
-              {
-                title: 'Dashboard',
-                onClick: () => this.props.navigate('/dashboard')
-              },
-              { title: 'Help', onClick: () => alert('Help clicked') }
-            ]}
-          />
-          <div style={{ padding: '30px' }}>
-            <Routes>
-              <Route path="/" element={<h1>This is home</h1>} />
-              <Route path="/dashboard" element={<h1>This is dashboard</h1>} />
-            </Routes>
+        >
+          <div style={{ height: '100vh' }}>
+            {!isMobile && (
+              <SideNavBar
+                label="Main navigation"
+                toggleLabel={{
+                  expandedLabel: 'Minimize SideNavBar',
+                  minimizedLabel: 'Expand SideNavBar'
+                }}
+              >
+                <SideNavBar.Item
+                  label={<ScreenReaderContent>Home</ScreenReaderContent>}
+                />
+                <SideNavBar.Item
+                  icon={brandSvg}
+                  label={<ScreenReaderContent>Home</ScreenReaderContent>}
+                  onClick={() => this.props.navigate('/', { replace: true })}
+                />
+                <SideNavBar.Item
+                  icon={<IconUserLine />}
+                  label="Account"
+                  href="/account"
+                />
+                <SideNavBar.Item
+                  icon={<IconCoursesLine />}
+                  label="Courses"
+                  href="/courses"
+                />
+                <SideNavBar.Item
+                  icon={<IconDashboardLine />}
+                  label="Dashboard"
+                  onClick={() =>
+                    this.props.navigate('/dashboard', { replace: true })
+                  }
+                />
+                <SideNavBar.Item
+                  icon={<IconQuestionLine />}
+                  label="Help"
+                  href="#"
+                />
+              </SideNavBar>
+            )}
+          </div>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', width: '100%' }}
+          >
+            <CanvasTopNav
+              brand={brandSvg}
+              lti={false}
+              breadcrumb={{
+                label: 'You are here:',
+                links: [
+                  { href: '#', label: 'Student Forecast' },
+                  { href: '#', label: 'University of Utah' },
+                  { label: 'University of Colleges' }
+                ]
+              }}
+              hamburgerOnClick={() => alert('Hamburger clicked')}
+              mobileButtons={[
+                {
+                  screenReaderLabel: 'Analytics',
+                  icon: <IconAnalyticsLine />,
+                  onClick: () => alert('Analytics clicked')
+                },
+                {
+                  screenReaderLabel: 'Alerts',
+                  icon: <IconAlertsLine />,
+                  onClick: () => alert('Alerts clicked')
+                }
+              ]}
+              mobileMenu={menuArray}
+            />
+            <div style={{ display: 'flex' }}>
+              {this.isCoursePage() && (
+                <SubNav
+                  menuItems={[
+                    { title: 'Home', href: '/', selected: true },
+                    { title: 'Announcements', href: '/' },
+                    { title: 'Assignments', href: '/' }
+                  ]}
+                />
+              )}
+              <div style={{ padding: '30px' }}>
+                <Routes>
+                  <Route path="/" element={<h1>This is home</h1>} />
+                  <Route
+                    path="/dashboard"
+                    element={<h1>This is the dashboard</h1>}
+                  />
+                  <Route
+                    path="/account"
+                    element={<h1>This is the account page</h1>}
+                  />
+                  <Route
+                    path="/courses"
+                    element={<h1>This is a course home page</h1>}
+                  />
+                </Routes>
+              </div>
+            </div>
           </div>
-        </div>
-      </InstUISettingsProvider>
+        </InstUISettingsProvider>
+      </div>
     )
   }
 }
diff --git a/packages/__docs__/src/index.tsx b/packages/__docs__/src/index.tsx
index 83765760ba..1ba2fc23c2 100644
--- a/packages/__docs__/src/index.tsx
+++ b/packages/__docs__/src/index.tsx
@@ -33,7 +33,7 @@ import { BrowserRouter } from 'react-router-dom'
 createRoot(document.getElementById('app')!).render(
   <StrictMode>
     <InstUISettingsProvider>
-      <BrowserRouter>
+      <BrowserRouter basename="/">
       <AppWrapper />
     </BrowserRouter>
     </InstUISettingsProvider>
diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts
index 91b0353dbb..4e74f22d7d 100644
--- a/packages/emotion/src/index.ts
+++ b/packages/emotion/src/index.ts
@@ -27,6 +27,7 @@ export * from '@emotion/react'
 
 export { InstUISettingsProvider } from './InstUISettingsProvider'
 export { withStyle } from './withStyle'
+export { withFunctionalStyle } from './withFunctionalStyle'
 export {
   ThemeablePropValues,
   ThemeablePropTypes,
diff --git a/packages/emotion/src/withFunctionalStyle.tsx b/packages/emotion/src/withFunctionalStyle.tsx
new file mode 100644
index 0000000000..b123f777ec
--- /dev/null
+++ b/packages/emotion/src/withFunctionalStyle.tsx
@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useTheme } from './index'
+import React from 'react'
+
+const withFunctionalStyle =
+  <ComponentOwnProps, ComponentStyle>(
+    generateStyles: (props: any, theme: any) => ComponentStyle
+  ) =>
+  (WrappedComponent: any) =>
+  // eslint-disable-next-line react/display-name
+  (originalProps: ComponentOwnProps) => {
+    const theme = useTheme()
+    const styledProps = {
+      styles: generateStyles(originalProps, theme),
+      ...originalProps
+    }
+    return <WrappedComponent {...styledProps} />
+  }
+
+export default withFunctionalStyle
+export { withFunctionalStyle }
diff --git a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
index 1af03c0be6..6737894ec8 100644
--- a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
@@ -90,9 +90,9 @@ type DrilldownPageOwnProps = {
    */
   disabled?: boolean
 
-  renderBeforeChildren?: () => React.ReactNode
+  renderBeforeChildren?: React.ReactNode | (() => React.ReactNode)
 
-  renderAfterChildren?: () => React.ReactNode
+  renderAfterChildren?: React.ReactNode | (() => React.ReactNode)
 }
 
 type PropKeys = keyof DrilldownPageOwnProps
@@ -116,8 +116,8 @@ const propTypes: PropValidators<PropKeys> = {
   onBackButtonClicked: PropTypes.func,
   withoutHeaderSeparator: PropTypes.bool,
   disabled: PropTypes.bool,
-  renderBeforeChildren: PropTypes.func,
-  renderAfterChildren: PropTypes.func
+  renderBeforeChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  renderAfterChildren: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
 const allowedProps: AllowedPropKeys = [
diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx
index 768772a3c7..5a052f6161 100644
--- a/packages/ui-drilldown/src/Drilldown/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/index.tsx
@@ -464,7 +464,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       )
 
       if (currentPage.renderBeforeChildren) {
-        headerChildren.push(currentPage.renderBeforeChildren())
+        headerChildren.push(currentPage.renderBeforeChildren)
       }
     }
 
@@ -1473,7 +1473,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
                 {this.renderList(getOptionProps, getDisabledOptionProps)}
                 {this.currentPage?.renderAfterChildren && (
                   <Options.Item>
-                    {this.currentPage.renderAfterChildren()}
+                    {this.currentPage.renderAfterChildren}
                   </Options.Item>
                 )}
               </Options>
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index f751b79db3..bddc4115ab 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -26,23 +26,20 @@
 import { useEffect, useState } from 'react'
 import { DesktopTopNav } from '../DesktopTopNav'
 import { MobileTopNav } from '../MobileTopNav'
-import { InstUISettingsProvider, jsx, useTheme } from '@instructure/emotion'
+import {
+  InstUISettingsProvider,
+  jsx,
+  withFunctionalStyle
+} from '@instructure/emotion'
 import {
   IconAddLine,
   IconAdminLine,
-  IconAdminSolid,
-  IconArrowOpenStartLine,
-  IconCoursesLine,
-  IconDashboardLine,
-  IconHamburgerLine,
-  IconQuestionLine,
-  IconUserLine
+  IconHamburgerLine
 } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
-import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb'
+import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import { generateStyles } from './styles'
 import { Drilldown } from '@instructure/ui-drilldown'
-import { Img } from '@instructure/ui-img'
 
 /**
 ---
@@ -54,13 +51,9 @@ const CanvasTopNav = ({
   lti = false,
   brand,
   breadcrumb,
-  mobileMenuTitle,
   mobileButtons = [],
   mobileMenu = [],
-  mobileMenuBackNavigation,
   hamburgerOnClick,
-  beforeMobileMenuItems,
-  afterMobileMenuItems,
   styles
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -77,19 +70,28 @@ const CanvasTopNav = ({
     return () => window.removeEventListener('resize', handleResize)
   }, [breakpoint])
 
-  const renderDrilldownPages = (items) => {
-    return items.map((item: any, index: any) => {
+  const renderDrilldownPages = (items: any) => {
+    return items.map((item: any) => {
       return (
-        <Drilldown.Page key={item.id} id={item.id}>
-          {item.options.map((option) => {
+        <Drilldown.Page
+          key={item.id}
+          id={item.id} //TODO renderbackbuttonlabel
+          renderBeforeChildren={item.renderBeforeMobileMenuItems}
+          renderAfterChildren={item.renderAfterMobileMenuItems}
+        >
+          {item.options.map((option: any) => {
             return (
               <Drilldown.Group key={option.id} id={option.id}>
                 <Drilldown.Option
                   id={option.id}
                   subPageId={option.subPageId}
                   onOptionClick={option.onClick}
+                  afterLabelContentVAlign={'center'}
                 >
-                  {option.label}
+                  <div style={styles.optionContainer}>
+                    {option.renderBeforeTitle}
+                    {option.label}
+                  </div>
                 </Drilldown.Option>
               </Drilldown.Group>
             )
@@ -99,20 +101,6 @@ const CanvasTopNav = ({
     })
   }
 
-  // <Drilldown rootPageId={'default'}>
-  //   <Drilldown.Page id={'default'}>
-  //     <Drilldown.Group id={'account'} withoutSeparators={false}>
-  //       <Drilldown.Option id={'account'} subPageId={'account'} afterLabelContentVAlign={'center'}>
-  //
-  //
-  // return (
-  //   <Drilldown.Page id={items[0]}>
-  //     <Drilldown.Group id
-  //       <Drilldown.Option></Drilldown.Option>
-  //     </Drilldown.Group>
-  //   </Drilldown.Page>
-  // )
-
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
     <MobileTopNav lti={lti} brand={brand}>
@@ -131,9 +119,6 @@ const CanvasTopNav = ({
         ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
-        <Drilldown rootPageId={'default'}>
-          {renderDrilldownPages(mobileMenu)}
-        </Drilldown>
         <InstUISettingsProvider
           theme={{
             componentOverrides: {
@@ -147,95 +132,7 @@ const CanvasTopNav = ({
           }}
         >
           <Drilldown rootPageId={'default'}>
-            <Drilldown.Page id={'default'}>
-              <Drilldown.Group id={'account'} withoutSeparators={false}>
-                <Drilldown.Option
-                  id={'account'}
-                  subPageId={'account'}
-                  afterLabelContentVAlign={'center'}
-                >
-                  <div style={styles.optionContainer}>
-                    <IconUserLine />
-                    Account
-                  </div>
-                </Drilldown.Option>
-              </Drilldown.Group>
-              <Drilldown.Group id={'courses'} withoutSeparators={false}>
-                <Drilldown.Option
-                  id={'courses'}
-                  subPageId={'courses'}
-                  afterLabelContentVAlign={'center'}
-                >
-                  <div style={styles.optionContainer}>
-                    <IconCoursesLine /> Courses
-                  </div>
-                </Drilldown.Option>
-              </Drilldown.Group>
-              <Drilldown.Group id={'dashboard'} withoutSeparators={false}>
-                <Drilldown.Option
-                  id={'dashboard'}
-                  onOptionClick={() => (window.location.href = '/dashboard')}
-                >
-                  <div style={styles.optionContainer}>
-                    <IconDashboardLine /> Dashboard
-                  </div>
-                </Drilldown.Option>
-              </Drilldown.Group>
-              <Drilldown.Group id={'help'} withoutSeparators={false}>
-                <Drilldown.Option
-                  id={'help'}
-                  onOptionClick={() =>
-                    (window.location.href = 'https://www.google.com')
-                  }
-                >
-                  <div style={styles.optionContainer}>
-                    <IconQuestionLine /> Help
-                  </div>
-                </Drilldown.Option>
-              </Drilldown.Group>
-            </Drilldown.Page>
-
-            <Drilldown.Page
-              id="account"
-              renderTitle="Account"
-              renderBeforeChildren={() => (
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
-                  <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
-                </div>
-              )}
-              renderAfterChildren={() => (
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-                  aliquet erat in orci semper fringilla. Nullam suscipit mollis
-                  mi, at vehicula magna vulputate eu. Cras mattis felis id quam
-                  vehicula euismod. Nulla dolor enim, ornare in odio a, molestie
-                  dictum ligula. Nullam maximus et dolor eget porttitor.
-                  Vestibulum faucibus viverra pellentesque. Duis lorem lectus,
-                  porta vitae aliquam vitae, vehicula sagittis nulla. Aenean
-                  sagittis congue rhoncus. Cras laoreet eu nulla eu dignissim.
-                  Maecenas sed massa nisi. Suspendisse pellentesque, metus sed
-                  ultricies porta, justo tellus pulvinar diam, ac ornare massa
-                  nibh quis purus. Duis erat ipsum, pellentesque in diam non,
-                  luctus accumsan metus. In ipsum tellus, ullamcorper a faucibus
-                  a, venenatis ut urna. Sed at rutrum turpis.
-                </p>
-              )}
-            >
-              <Drilldown.Group id={'account1'} withoutSeparators={false}>
-                <Drilldown.Option id="account1">AccountInfo1</Drilldown.Option>
-              </Drilldown.Group>
-              <Drilldown.Group id={'account2'} withoutSeparators={false}>
-                <Drilldown.Option id="account2">AccountInfo2</Drilldown.Option>
-              </Drilldown.Group>
-            </Drilldown.Page>
-            <Drilldown.Page id="courses" renderTitle="Courses">
-              <Drilldown.Group id={'course1'} withoutSeparators={false}>
-                <Drilldown.Option id="courses1">Course 1</Drilldown.Option>
-              </Drilldown.Group>
-              <Drilldown.Group id={'course2'} withoutSeparators={false}>
-                <Drilldown.Option id="course2">Course 2</Drilldown.Option>
-              </Drilldown.Group>
-            </Drilldown.Page>
+            {renderDrilldownPages(mobileMenu)}
           </Drilldown>
         </InstUISettingsProvider>
       </MobileTopNav.Menu>
@@ -274,22 +171,7 @@ const CanvasTopNav = ({
   )
 }
 
-const withStyles =
-  <ComponentOwnProps, ComponentStyle>(
-    generateStyles: (props: any, theme: any) => ComponentStyle
-  ) =>
-  (WrappedComponent: any) =>
-  // eslint-disable-next-line react/display-name
-  (originalProps: ComponentOwnProps) => {
-    const theme = useTheme()
-    const styledProps = {
-      styles: generateStyles(originalProps, theme),
-      ...originalProps
-    }
-    return <WrappedComponent {...styledProps} />
-  }
-
-const SC: any = withStyles(generateStyles)(CanvasTopNav)
+const SC: any = withFunctionalStyle(generateStyles)(CanvasTopNav)
 SC.displayName = 'CanvasTopNav'
 
 export { SC as CanvasTopNav }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index 83b1a388e5..ee540dc6d9 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 /*
  * The MIT License (MIT)
  *
@@ -25,7 +24,7 @@
 
 /** @jsx jsx */
 import { Children, PropsWithChildren } from 'react'
-import { jsx, useTheme } from '@instructure/emotion'
+import { jsx, withFunctionalStyle } from '@instructure/emotion'
 import type { DesktopTopNavProps } from './props'
 
 import { generateStyles } from './styles'
@@ -57,26 +56,12 @@ const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
   return <div style={styles.end}>{children}</div>
 }
 
-const withStyles =
-  <ComponentOwnProps, ComponentStyle>(
-    generateStyles: (props: any, theme: any) => ComponentStyle
-  ) =>
-  (WrappedComponent: any) =>
-  (originalProps: ComponentOwnProps) => {
-    const theme = useTheme()
-    const styledProps = {
-      styles: generateStyles(originalProps, theme),
-      ...originalProps
-    }
-    return <WrappedComponent {...styledProps} />
-  }
-
-const SC: any = withStyles(generateStyles)(DesktopTopNav)
+const SC: any = withFunctionalStyle(generateStyles)(DesktopTopNav)
 
 SC.displayName = 'DesktopTopNav'
-SC.Start = withStyles(generateStyles)(Start)
+SC.Start = withFunctionalStyle(generateStyles)(Start)
 SC.Start.displayName = 'Start'
-SC.End = withStyles(generateStyles)(End)
+SC.End = withFunctionalStyle(generateStyles)(End)
 SC.End.displayName = 'End'
 
 export { SC as DesktopTopNav }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 4fdc4883a6..47ec6844ac 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -23,8 +23,7 @@
  */
 import type { DesktopTopNavProps } from './props'
 
-const generateStyles = (props: DesktopTopNavProps, theme: any) => {
-  const { lti } = props
+const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
   return {
     container: {
       height: '66px',
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 0119bc2d52..378cd8d894 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 /*
  * The MIT License (MIT)
  *
@@ -24,23 +23,19 @@
  */
 
 /** @jsx jsx */
-import React, {
+import {
   Children,
   Fragment,
   PropsWithChildren,
   useEffect,
   useState
 } from 'react'
-import { jsx, useTheme } from '@instructure/emotion'
+import { jsx, withFunctionalStyle } from '@instructure/emotion'
 import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
 import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
-import {
-  generateItemListStyles,
-  generateItemStyles,
-  generateStyles
-} from './styles'
+import { generateStyles } from './styles'
 
 /**
 ---
@@ -98,21 +93,7 @@ const Menu = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
-const withStyles =
-  <ComponentOwnProps, ComponentStyle>(
-    generateStyles: (props: any, theme: any) => ComponentStyle
-  ) =>
-  (WrappedComponent: any) =>
-  (originalProps: ComponentOwnProps) => {
-    const theme = useTheme()
-    const styledProps = {
-      styles: generateStyles(originalProps, theme),
-      ...originalProps
-    }
-    return <WrappedComponent {...styledProps} />
-  }
-
-const SC: any = withStyles(generateStyles)(MobileTopNav)
+const SC: any = withFunctionalStyle(generateStyles)(MobileTopNav)
 
 SC.End = End
 SC.End.displayName = 'End'
diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 6bd7a2c35e..3603732aef 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 /*
  * The MIT License (MIT)
  *
@@ -24,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { jsx, useTheme } from '@instructure/emotion'
+import { jsx, withFunctionalStyle } from '@instructure/emotion'
 
 import { generateStyles } from './styles'
 import { Link } from '@instructure/ui-link'
@@ -55,21 +54,7 @@ const SubNav = ({ menuItems, styles }: SubNavProps) => {
   )
 }
 
-const withStyles =
-  <ComponentOwnProps, ComponentStyle>(
-    generateStyles: (props: any, theme: any) => ComponentStyle
-  ) =>
-  (WrappedComponent: any) =>
-  (originalProps: ComponentOwnProps) => {
-    const theme = useTheme()
-    const styledProps = {
-      styles: generateStyles(originalProps, theme),
-      ...originalProps
-    }
-    return <WrappedComponent {...styledProps} />
-  }
-
-const SC: any = withStyles(generateStyles)(SubNav)
+const SC: any = withFunctionalStyle(generateStyles)(SubNav)
 
 SC.displayName = 'SubNav'
 

From 66ad6301f130e7054f30dbab0229c6daef6ce70e Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 19 Mar 2025 13:18:22 +0100
Subject: [PATCH 28/53] feat(ui-top-nav-bar): add buttons prop

---
 packages/__docs__/src/App/index.tsx              | 14 ++++++++++++++
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx    | 16 ++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 7f998d95aa..a7993fbc43 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -27,6 +27,8 @@ import { Route, Routes, useNavigate } from 'react-router-dom'
 import { withStyle } from '@instructure/emotion'
 import { CanvasTopNav, SubNav } from '@instructure/ui-top-nav-bar'
 import {
+  IconAddLine,
+  IconAdminLine,
   IconAlertsLine,
   IconAnalyticsLine,
   IconCoursesLine,
@@ -251,6 +253,18 @@ class App extends Component<AppProps, AppState> {
             <CanvasTopNav
               brand={brandSvg}
               lti={false}
+              buttons={[
+                {
+                  label: 'AddLine',
+                  onClick: () => alert('Button 1'),
+                  icon: <IconAddLine />
+                },
+                {
+                  label: 'AdminLine',
+                  onClick: () => alert('Button 2'),
+                  icon: <IconAdminLine />
+                }
+              ]}
               breadcrumb={{
                 label: 'You are here:',
                 links: [
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index bddc4115ab..f828f41a20 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -42,15 +42,16 @@ import { generateStyles } from './styles'
 import { Drilldown } from '@instructure/ui-drilldown'
 
 /**
----
-category: components
----
-**/
+ ---
+ category: components
+ ---
+ **/
 const CanvasTopNav = ({
   breakpoint = 768,
   lti = false,
   brand,
   breadcrumb,
+  buttons = [],
   mobileButtons = [],
   mobileMenu = [],
   hamburgerOnClick,
@@ -164,8 +165,11 @@ const CanvasTopNav = ({
         </div>
       </DesktopTopNav.Start>
       <DesktopTopNav.End>
-        <Button renderIcon={<IconAddLine />}>IconAddLine</Button>
-        <Button renderIcon={<IconAdminLine />}>IconAdminSolid</Button>
+        {buttons.map((button: any) => (
+          <Button key={button.label} renderIcon={button.icon}>
+            {button.label}
+          </Button>
+        ))}
       </DesktopTopNav.End>
     </DesktopTopNav>
   )

From 9545953ba963f7c1470e89f02a79a65b7d5ae6ef Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 19 Mar 2025 13:52:09 +0100
Subject: [PATCH 29/53] feat(ui-top-nav-bar,ui-drilldown): adjust types

---
 .../src/Drilldown/DrilldownPage/props.ts           |  4 ++--
 packages/ui-drilldown/src/Drilldown/index.tsx      |  4 ++--
 packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx | 14 +++++---------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
index 6737894ec8..eb9bcad00e 100644
--- a/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
+++ b/packages/ui-drilldown/src/Drilldown/DrilldownPage/props.ts
@@ -90,9 +90,9 @@ type DrilldownPageOwnProps = {
    */
   disabled?: boolean
 
-  renderBeforeChildren?: React.ReactNode | (() => React.ReactNode)
+  renderBeforeChildren?: React.ReactNode
 
-  renderAfterChildren?: React.ReactNode | (() => React.ReactNode)
+  renderAfterChildren?: React.ReactNode
 }
 
 type PropKeys = keyof DrilldownPageOwnProps
diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx
index 5a052f6161..24504ad3d0 100644
--- a/packages/ui-drilldown/src/Drilldown/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/index.tsx
@@ -427,7 +427,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     const { currentPage } = this
     const { styles, deterministicId } = this.props
 
-    const headerChildren: PageChildren[] = []
+    const headerChildren: (PageChildren | React.ReactNode)[] = []
 
     if (!currentPage) {
       return headerChildren
@@ -945,7 +945,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       return null
     }
 
-    const pageChildren: PageChildren[] = [
+    const pageChildren: (PageChildren | React.ReactNode)[] = [
       ...headerChildren,
       ...currentPage.children
     ]
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index f828f41a20..2202740d23 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -31,21 +31,17 @@ import {
   jsx,
   withFunctionalStyle
 } from '@instructure/emotion'
-import {
-  IconAddLine,
-  IconAdminLine,
-  IconHamburgerLine
-} from '@instructure/ui-icons'
+import { IconHamburgerLine } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import { generateStyles } from './styles'
 import { Drilldown } from '@instructure/ui-drilldown'
 
 /**
- ---
- category: components
- ---
- **/
+---
+category: components
+---
+**/
 const CanvasTopNav = ({
   breakpoint = 768,
   lti = false,

From 338d4a75f06f855e4b5195d0a0088bbaaf9f4713 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 19 Mar 2025 14:00:18 +0100
Subject: [PATCH 30/53] feat(ui-themes,shared-types): add new colors

INSTUI-4471
---
 packages/shared-types/src/Colors.ts                        | 2 ++
 packages/ui-themes/src/themes/canvas/colors.ts             | 2 ++
 packages/ui-themes/src/themes/canvasHighContrast/colors.ts | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/packages/shared-types/src/Colors.ts b/packages/shared-types/src/Colors.ts
index 337ebbb8e1..12a504950e 100644
--- a/packages/shared-types/src/Colors.ts
+++ b/packages/shared-types/src/Colors.ts
@@ -217,10 +217,12 @@ type Contrasts = {
   grey1111: Primitives['grey11']
   grey1214: Primitives['grey12'] | Primitives['grey14']
   grey1424: Primitives['grey14'] | Primitives['grey24']
+  grey2414: Primitives['grey24'] | Primitives['grey14']
   grey2424: Primitives['grey24']
   grey3045: Primitives['grey30'] | Primitives['grey45']
   grey4570: Primitives['grey45'] | Primitives['grey70']
   grey5782: Primitives['grey57'] | Primitives['grey82']
+  grey8270: Primitives['grey82'] | Primitives['grey70']
   grey100100: Primitives['grey100']
   grey100100op75: Primitives['grey100op75']
   grey125125: Primitives['grey125']
diff --git a/packages/ui-themes/src/themes/canvas/colors.ts b/packages/ui-themes/src/themes/canvas/colors.ts
index 26da842d21..b6c8b45292 100644
--- a/packages/ui-themes/src/themes/canvas/colors.ts
+++ b/packages/ui-themes/src/themes/canvas/colors.ts
@@ -39,9 +39,11 @@ const contrasts: Contrasts = {
   grey1214: primitives.grey12,
   grey1424: primitives.grey14,
   grey2424: primitives.grey24,
+  grey2414: primitives.grey24,
   grey3045: primitives.grey30,
   grey4570: primitives.grey45,
   grey5782: primitives.grey57,
+  grey8270: primitives.grey82,
   grey100100: primitives.grey100,
   grey100100op75: primitives.grey100op75,
   grey125125: primitives.grey125,
diff --git a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
index a678f458e2..021c18c450 100644
--- a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
+++ b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
@@ -38,10 +38,12 @@ const contrasts: Contrasts = {
   grey1111: primitives.grey11,
   grey1214: primitives.grey14,
   grey1424: primitives.grey24,
+  grey2414: primitives.grey14,
   grey2424: primitives.grey24,
   grey3045: primitives.grey45,
   grey4570: primitives.grey70,
   grey5782: primitives.grey82,
+  grey8270: primitives.grey70,
   grey100100: primitives.grey100,
   grey100100op75: primitives.grey100op75,
   grey125125: primitives.grey125,

From 84efd69080fcb8fbe04a41bf5007f182a32858c6 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 20 Mar 2025 11:20:18 +0100
Subject: [PATCH 31/53] feat(ui-top-nav-bar): add stuff

---
 packages/__docs__/src/App/index.tsx           | 42 +++++------
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 70 ++++++++++---------
 2 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index a7993fbc43..c1c7cee45e 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -62,7 +62,7 @@ class App extends Component<AppProps, AppState> {
   }
 
   isCoursePage() {
-    return location.pathname.startsWith('/courses')
+    return location.pathname.startsWith('/course')
   }
 
   componentDidMount() {
@@ -171,24 +171,14 @@ class App extends Component<AppProps, AppState> {
             id: 'courses1',
             label: 'Courses1',
             onClick: () => {
-              this.props.navigate('/courses/course1', { replace: true })
-              setTimeout(() => {
-                window.location.reload()
-              }, 50) // Small delay ensures React updates before reloading
-
-              // window.location.reload()
+              this.props.navigate('/course1', { replace: true })
             }
           },
           {
             id: 'courses2',
             label: 'Courses2',
             onClick: () => {
-              this.props.navigate('/courses/course2', { replace: true })
-              setTimeout(() => {
-                window.location.reload()
-              }, 50) // Small delay ensures React updates before reloading
-
-              // window.location.reload()
+              this.props.navigate('/course2', { replace: true })
             }
           }
         ]
@@ -225,12 +215,16 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={<IconUserLine />}
                   label="Account"
-                  href="/account"
+                  onClick={() =>
+                    this.props.navigate('/account', { replace: true })
+                  }
                 />
                 <SideNavBar.Item
                   icon={<IconCoursesLine />}
                   label="Courses"
-                  href="/courses"
+                  onClick={() =>
+                    this.props.navigate('/course1', { replace: true })
+                  }
                 />
                 <SideNavBar.Item
                   icon={<IconDashboardLine />}
@@ -242,7 +236,7 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={<IconQuestionLine />}
                   label="Help"
-                  href="#"
+                  onClick={() => alert('Help clicked')}
                 />
               </SideNavBar>
             )}
@@ -253,6 +247,7 @@ class App extends Component<AppProps, AppState> {
             <CanvasTopNav
               brand={brandSvg}
               lti={false}
+              showDesktopView={this.isCoursePage()}
               buttons={[
                 {
                   label: 'AddLine',
@@ -268,11 +263,12 @@ class App extends Component<AppProps, AppState> {
               breadcrumb={{
                 label: 'You are here:',
                 links: [
-                  { href: '#', label: 'Student Forecast' },
-                  { href: '#', label: 'University of Utah' },
-                  { label: 'University of Colleges' }
+                  { href: '#', label: 'Crumb 1' },
+                  { href: '#', label: 'Crumb 2' },
+                  { label: 'Home' }
                 ]
               }}
+              hamburgerLabel="Open the main menu"
               hamburgerOnClick={() => alert('Hamburger clicked')}
               mobileButtons={[
                 {
@@ -310,8 +306,12 @@ class App extends Component<AppProps, AppState> {
                     element={<h1>This is the account page</h1>}
                   />
                   <Route
-                    path="/courses"
-                    element={<h1>This is a course home page</h1>}
+                    path="/course1"
+                    element={<h1>This is the first course home page</h1>}
+                  />
+                  <Route
+                    path="/course2"
+                    element={<h1>This is the second course home page</h1>}
                   />
                 </Routes>
               </div>
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 2202740d23..c0f05bc1f5 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -51,6 +51,8 @@ const CanvasTopNav = ({
   mobileButtons = [],
   mobileMenu = [],
   hamburgerOnClick,
+  hamburgerLabel,
+  showDesktopView,
   styles
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -135,39 +137,41 @@ const CanvasTopNav = ({
       </MobileTopNav.Menu>
     </MobileTopNav>
   ) : (
-    <DesktopTopNav lightMode={lti}>
-      <DesktopTopNav.Start>
-        <IconButton
-          withBackground={false}
-          withBorder={false}
-          screenReaderLabel="burgir"
-          onClick={hamburgerOnClick}
-          // color={lti ? 'secondary' : 'primary-inverse'}
-        >
-          <IconHamburgerLine />
-        </IconButton>
-        <div style={{ minWidth: '100%' }}>
-          <Breadcrumb label={breadcrumb.label}>
-            {breadcrumb.links.map((link: any, index: any) =>
-              link.href ? (
-                <Breadcrumb.Link key={index} href={link.href}>
-                  {link.label}
-                </Breadcrumb.Link>
-              ) : (
-                <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-              )
-            )}
-          </Breadcrumb>
-        </div>
-      </DesktopTopNav.Start>
-      <DesktopTopNav.End>
-        {buttons.map((button: any) => (
-          <Button key={button.label} renderIcon={button.icon}>
-            {button.label}
-          </Button>
-        ))}
-      </DesktopTopNav.End>
-    </DesktopTopNav>
+    <div style={{ display: showDesktopView ? 'block' : 'none' }}>
+      <DesktopTopNav lightMode={lti}>
+        <DesktopTopNav.Start>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel={hamburgerLabel}
+            onClick={hamburgerOnClick}
+            // color={lti ? 'secondary' : 'primary-inverse'}
+          >
+            <IconHamburgerLine />
+          </IconButton>
+          <div style={{ minWidth: '100%' }}>
+            <Breadcrumb label={breadcrumb.label}>
+              {breadcrumb.links.map((link: any, index: any) =>
+                link.href ? (
+                  <Breadcrumb.Link key={index} href={link.href}>
+                    {link.label}
+                  </Breadcrumb.Link>
+                ) : (
+                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+                )
+              )}
+            </Breadcrumb>
+          </div>
+        </DesktopTopNav.Start>
+        <DesktopTopNav.End>
+          {buttons.map((button: any) => (
+            <Button key={button.label} renderIcon={button.icon}>
+              {button.label}
+            </Button>
+          ))}
+        </DesktopTopNav.End>
+      </DesktopTopNav>
+    </div>
   )
 }
 

From f7a31e6f728c09b26a5ab2bb7f7591587cc9dbac Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 21 Mar 2025 10:19:16 +0100
Subject: [PATCH 32/53] feat(ui-top-nav-bar): add tray

---
 packages/__docs__/src/App/index.tsx           | 70 +++++++++++++++++--
 .../src/DesktopTopNav/styles.tsx              |  1 -
 2 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index c1c7cee45e..57586b0bb7 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -38,10 +38,15 @@ import {
 } from '@instructure/ui-icons'
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+import { Flex } from '@instructure/ui-flex'
+import { Heading } from '@instructure/ui-heading'
+import { CloseButton } from '@instructure/ui-buttons'
+import { Tray } from '@instructure/ui-tray'
 import { Img } from '@instructure/ui-img'
 import { View } from '@instructure/ui-view'
 import { SideNavBar } from '@instructure/ui-side-nav-bar'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import Link from '../Link'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -57,7 +62,8 @@ class App extends Component<AppProps, AppState> {
     super(props)
 
     this.state = {
-      windowWidth: window.innerWidth
+      windowWidth: window.innerWidth,
+      open: false
     }
   }
 
@@ -65,6 +71,14 @@ class App extends Component<AppProps, AppState> {
     return location.pathname.startsWith('/course')
   }
 
+  isAccountPage() {
+    return location.pathname.startsWith('/account')
+  }
+
+  isDashboardPage() {
+    return location.pathname.startsWith('/dashboard')
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.handleResize)
   }
@@ -77,6 +91,28 @@ class App extends Component<AppProps, AppState> {
     this.setState({ windowWidth: window.innerWidth })
   }
 
+  renderCloseButton() {
+    return (
+      <Flex>
+        <Flex.Item shouldGrow shouldShrink>
+          <Heading>Hello</Heading>
+        </Flex.Item>
+        <Flex.Item>
+          <CloseButton
+            placement="end"
+            offset="small"
+            screenReaderLabel="Close"
+            onClick={() => {
+              this.setState({
+                open: false
+              })
+            }}
+          />
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
   render() {
     const isMobile = this.state.windowWidth < 768
 
@@ -195,7 +231,7 @@ class App extends Component<AppProps, AppState> {
             boxSizing: 'border-box'
           }}
         >
-          <div style={{ height: '100vh' }}>
+          <div style={{ height: '100vh', zIndex: 100 }}>
             {!isMobile && (
               <SideNavBar
                 label="Main navigation"
@@ -218,13 +254,16 @@ class App extends Component<AppProps, AppState> {
                   onClick={() =>
                     this.props.navigate('/account', { replace: true })
                   }
+                  selected={this.isAccountPage()}
                 />
                 <SideNavBar.Item
                   icon={<IconCoursesLine />}
                   label="Courses"
-                  onClick={() =>
+                  onClick={() => {
                     this.props.navigate('/course1', { replace: true })
-                  }
+                    this.setState({ open: true })
+                  }}
+                  selected={this.isCoursePage()}
                 />
                 <SideNavBar.Item
                   icon={<IconDashboardLine />}
@@ -232,6 +271,7 @@ class App extends Component<AppProps, AppState> {
                   onClick={() =>
                     this.props.navigate('/dashboard', { replace: true })
                   }
+                  selected={this.isDashboardPage()}
                 />
                 <SideNavBar.Item
                   icon={<IconQuestionLine />}
@@ -284,6 +324,28 @@ class App extends Component<AppProps, AppState> {
               ]}
               mobileMenu={menuArray}
             />
+            <Tray
+              label="Tray Example"
+              open={this.state.open}
+              onDismiss={() => {
+                this.setState({ open: false })
+              }}
+              size="small"
+              placement="start"
+              themeOverride={{ zIndex: 1 }}
+            >
+              {this.renderCloseButton()}
+
+              <div style={{ marginLeft: '100px' }}>
+                <h1>Courses</h1>
+                <Link href="/course1" display="block">
+                  Course 1
+                </Link>
+                <Link href="/course2" display="block">
+                  Course 2
+                </Link>
+              </div>
+            </Tray>
             <div style={{ display: 'flex' }}>
               {this.isCoursePage() && (
                 <SubNav
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 47ec6844ac..025d06d7a7 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -33,7 +33,6 @@ const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
       backgroundColor: theme.colors.contrasts.grey1111,
       width: '100%',
       color: theme.colors.contrasts.grey125125,
-      zIndex: '1000',
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'row'

From 9ed570af738ebf1158ad4aa85e1160e527c1c8e2 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 21 Mar 2025 10:34:53 +0100
Subject: [PATCH 33/53] feat: replace href to onclick

---
 packages/__docs__/src/App/index.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 57586b0bb7..26e3989c6f 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -338,10 +338,20 @@ class App extends Component<AppProps, AppState> {
 
               <div style={{ marginLeft: '100px' }}>
                 <h1>Courses</h1>
-                <Link href="/course1" display="block">
+                <Link
+                  onClick={() =>
+                    this.props.navigate('/course1', { replace: true })
+                  }
+                  display="block"
+                >
                   Course 1
                 </Link>
-                <Link href="/course2" display="block">
+                <Link
+                  onClick={() =>
+                    this.props.navigate('/course2', { replace: true })
+                  }
+                  display="block"
+                >
                   Course 2
                 </Link>
               </div>

From cb9ce7e267f19bce59ef74278d6f4593b0f1ee8d Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 10 Apr 2025 15:14:50 +0200
Subject: [PATCH 34/53] chore(ui-top-nav-bar): integrate useStyle into SubNav
 to aid testing

---
 packages/ui-top-nav-bar/src/SubNav/index.tsx  | 20 +++++++++----------
 packages/ui-top-nav-bar/src/SubNav/styles.tsx |  9 ++++++---
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 3603732aef..3ddd2e5863 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -23,9 +23,9 @@
  */
 
 /** @jsx jsx */
-import { jsx, withFunctionalStyle } from '@instructure/emotion'
+import { jsx, useStyle, withFunctionalStyle } from '@instructure/emotion'
 
-import { generateStyles } from './styles'
+import { generateStyle } from './styles'
 import { Link } from '@instructure/ui-link'
 import { SubNavProps, MenuItem } from './props'
 
@@ -34,11 +34,13 @@ import { SubNavProps, MenuItem } from './props'
 category: components
 ---
  **/
-const SubNav = ({ menuItems, styles }: SubNavProps) => {
+const SubNav = ({ menuItems }: SubNavProps) => {
+  const styles = useStyle({ generateStyle, params: {} })
+
   return (
-    <div style={styles.container}>
+    <div css={styles.container}>
       {menuItems.map((item: MenuItem) => (
-        <div style={styles.linkContainer(item)} key={item.title}>
+        <div css={styles.linkContainer(item)} key={item.title}>
           <Link
             key={item.title}
             href={item.href}
@@ -54,9 +56,5 @@ const SubNav = ({ menuItems, styles }: SubNavProps) => {
   )
 }
 
-const SC: any = withFunctionalStyle(generateStyles)(SubNav)
-
-SC.displayName = 'SubNav'
-
-export { SC as SubNav }
-export default SC
+export { SubNav }
+export default SubNav
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
index 0a6ce8f351..2c41e7497f 100644
--- a/packages/ui-top-nav-bar/src/SubNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -21,9 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { SubNavProps } from './props'
 
-const generateStyles = (_props: SubNavProps, theme: any) => {
+import { ComponentStyle } from '@instructure/emotion'
+
+type SubNavStyle = ComponentStyle
+
+const generateStyle = (theme: any, params: any): SubNavStyle => {
   return {
     container: {
       marginLeft: '20px',
@@ -57,4 +60,4 @@ const generateStyles = (_props: SubNavProps, theme: any) => {
   }
 }
 
-export { generateStyles }
+export { generateStyle }

From 5d323086e4146dc1e4ff48aa0ff0d87c86e163f7 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 11 Apr 2025 01:50:57 +0200
Subject: [PATCH 35/53] chore(ui-top-nav-bar): finetune subnav

---
 packages/ui-top-nav-bar/src/SubNav/index.tsx  | 16 ++++--
 packages/ui-top-nav-bar/src/SubNav/styles.tsx | 51 ++++++++++---------
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 3ddd2e5863..25a5733b4c 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -23,28 +23,36 @@
  */
 
 /** @jsx jsx */
-import { jsx, useStyle, withFunctionalStyle } from '@instructure/emotion'
+import { jsx, useStyle } from '@instructure/emotion'
 
 import { generateStyle } from './styles'
 import { Link } from '@instructure/ui-link'
 import { SubNavProps, MenuItem } from './props'
+import { LinkTheme } from '@instructure/shared-types'
 
 /**
 ---
 category: components
 ---
- **/
+**/
 const SubNav = ({ menuItems }: SubNavProps) => {
   const styles = useStyle({ generateStyle, params: {} })
 
   return (
     <div css={styles.container}>
       {menuItems.map((item: MenuItem) => (
-        <div css={styles.linkContainer(item)} key={item.title}>
+        <div
+          css={
+            item.selected ? styles.linkContainerSelected : styles.linkContainer
+          }
+          key={item.title}
+        >
           <Link
             key={item.title}
             href={item.href}
-            themeOverride={styles.link(item)}
+            {...(item.selected && {
+              themeOverride: styles.linkOverride as Partial<LinkTheme>
+            })}
             isWithinText={false}
             onClick={item.onClick}
           >
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
index 2c41e7497f..271ded722b 100644
--- a/packages/ui-top-nav-bar/src/SubNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -24,38 +24,41 @@
 
 import { ComponentStyle } from '@instructure/emotion'
 
-type SubNavStyle = ComponentStyle
+type SubNavStyle = ComponentStyle<
+  'container' | 'linkContainer' | 'linkContainerSelected' | 'linkOverride'
+>
+
+const generateStyle = (theme: any, _params: any): SubNavStyle => {
+  const linkContainerBase = {
+    label: 'subNavLinkContainer',
+    display: 'flex',
+    alignItems: 'center',
+    color: theme?.colors?.contrasts?.grey125125,
+    fontSize: '16px',
+    borderColor: theme?.colors?.contrasts?.grey125125,
+    height: '32px',
+    fontWeight: 'bold',
+    marginBottom: '4px',
+    paddingLeft: '4px'
+  }
 
-const generateStyle = (theme: any, params: any): SubNavStyle => {
   return {
     container: {
       marginLeft: '20px',
       marginTop: '20px',
       label: 'subNavContainer'
     },
-    linkContainer: (item: any) => {
-      return {
-        label: 'subNavLinkContainer',
-        display: 'flex',
-        alignItems: 'center',
-        color: theme?.colors?.contrasts?.grey125125,
-        fontSize: '16px',
-        borderLeft: item.selected ? '3px solid' : 'none',
-        borderColor: theme?.colors?.contrasts?.grey125125,
-        height: '32px',
-        fontWeight: 'bold',
-        marginBottom: '4px',
-        paddingLeft: '4px'
-      }
+    linkContainer: {
+      ...linkContainerBase
+    },
+    linkContainerSelected: {
+      ...linkContainerBase,
+      borderLeft: '3px solid'
     },
-    link: (item: any) => {
-      return {
-        label: 'subNavLink',
-        ...(item.selected && {
-          color: theme?.colors?.contrasts?.grey125125,
-          hoverColor: theme?.colors?.contrasts?.grey125125
-        })
-      }
+    linkOverride: {
+      backgroundColor: theme?.colors?.contrasts?.grey125125,
+      color: theme?.colors?.contrasts?.white1010,
+      hoverColor: theme?.colors?.contrasts?.white1010
     }
   }
 }

From 9ed3eec0826590499c8b374593f717d85c20263e Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 11 Apr 2025 09:54:30 +0200
Subject: [PATCH 36/53] chore(ui-top-nav-bar): add stuff

---
 packages/__docs__/src/App/index.tsx           | 57 ++++++++++++++-----
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 11 +++-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx | 19 ++++++-
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  2 +
 packages/ui-top-nav-bar/src/SubNav/props.ts   |  2 +-
 5 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 26e3989c6f..fba222eb8f 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -31,6 +31,7 @@ import {
   IconAdminLine,
   IconAlertsLine,
   IconAnalyticsLine,
+  IconArcLine,
   IconCoursesLine,
   IconDashboardLine,
   IconQuestionLine,
@@ -63,7 +64,8 @@ class App extends Component<AppProps, AppState> {
 
     this.state = {
       windowWidth: window.innerWidth,
-      open: false
+      open: false,
+      openMobile: false
     }
   }
 
@@ -79,6 +81,10 @@ class App extends Component<AppProps, AppState> {
     return location.pathname.startsWith('/dashboard')
   }
 
+  isStudioPage() {
+    return location.pathname.startsWith('/studio')
+  }
+
   componentDidMount() {
     window.addEventListener('resize', this.handleResize)
   }
@@ -159,7 +165,7 @@ class App extends Component<AppProps, AppState> {
             renderBeforeTitle: <IconDashboardLine />,
             onClick: () => {
               this.props.navigate('/dashboard', { replace: true })
-              // window.location.reload()
+              this.setState({ openMobile: false })
             }
           },
           {
@@ -208,6 +214,7 @@ class App extends Component<AppProps, AppState> {
             label: 'Courses1',
             onClick: () => {
               this.props.navigate('/course1', { replace: true })
+              this.setState({ openMobile: false })
             }
           },
           {
@@ -215,6 +222,7 @@ class App extends Component<AppProps, AppState> {
             label: 'Courses2',
             onClick: () => {
               this.props.navigate('/course2', { replace: true })
+              this.setState({ openMobile: false })
             }
           }
         ]
@@ -246,21 +254,24 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={brandSvg}
                   label={<ScreenReaderContent>Home</ScreenReaderContent>}
-                  onClick={() => this.props.navigate('/', { replace: true })}
+                  onClick={() => {
+                    this.setState({ open: false })
+                    this.props.navigate('/', { replace: true })
+                  }}
                 />
                 <SideNavBar.Item
                   icon={<IconUserLine />}
                   label="Account"
-                  onClick={() =>
+                  onClick={() => {
+                    this.setState({ open: false })
                     this.props.navigate('/account', { replace: true })
-                  }
+                  }}
                   selected={this.isAccountPage()}
                 />
                 <SideNavBar.Item
                   icon={<IconCoursesLine />}
                   label="Courses"
                   onClick={() => {
-                    this.props.navigate('/course1', { replace: true })
                     this.setState({ open: true })
                   }}
                   selected={this.isCoursePage()}
@@ -268,11 +279,21 @@ class App extends Component<AppProps, AppState> {
                 <SideNavBar.Item
                   icon={<IconDashboardLine />}
                   label="Dashboard"
-                  onClick={() =>
+                  onClick={() => {
+                    this.setState({ open: false })
                     this.props.navigate('/dashboard', { replace: true })
-                  }
+                  }}
                   selected={this.isDashboardPage()}
                 />
+                <SideNavBar.Item
+                  icon={<IconArcLine />}
+                  label="Studio"
+                  onClick={() => {
+                    this.setState({ open: false })
+                    this.props.navigate('/studio', { replace: true })
+                  }}
+                  selected={this.isStudioPage()}
+                />
                 <SideNavBar.Item
                   icon={<IconQuestionLine />}
                   label="Help"
@@ -286,8 +307,8 @@ class App extends Component<AppProps, AppState> {
           >
             <CanvasTopNav
               brand={brandSvg}
-              lti={false}
-              showDesktopView={this.isCoursePage()}
+              lti={this.isStudioPage()}
+              showDesktopView={this.isCoursePage() || this.isStudioPage()}
               buttons={[
                 {
                   label: 'AddLine',
@@ -323,6 +344,11 @@ class App extends Component<AppProps, AppState> {
                 }
               ]}
               mobileMenu={menuArray}
+              open={this.state.openMobile}
+              onOpenChange={(open: boolean) => {
+                this.setState({ openMobile: open })
+              }}
+              menuItems={['alma', 'korte', 'szilva']}
             />
             <Tray
               label="Tray Example"
@@ -339,17 +365,19 @@ class App extends Component<AppProps, AppState> {
               <div style={{ marginLeft: '100px' }}>
                 <h1>Courses</h1>
                 <Link
-                  onClick={() =>
+                  onClick={() => {
+                    this.setState({ open: false })
                     this.props.navigate('/course1', { replace: true })
-                  }
+                  }}
                   display="block"
                 >
                   Course 1
                 </Link>
                 <Link
-                  onClick={() =>
+                  onClick={() => {
+                    this.setState({ open: false })
                     this.props.navigate('/course2', { replace: true })
-                  }
+                  }}
                   display="block"
                 >
                   Course 2
@@ -385,6 +413,7 @@ class App extends Component<AppProps, AppState> {
                     path="/course2"
                     element={<h1>This is the second course home page</h1>}
                   />
+                  <Route path="/studio" element={<h1>LTI VIEW TEST</h1>} />
                 </Routes>
               </div>
             </div>
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index c0f05bc1f5..75f67fc431 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -53,7 +53,9 @@ const CanvasTopNav = ({
   hamburgerOnClick,
   hamburgerLabel,
   showDesktopView,
-  styles
+  styles,
+  open,
+  onOpenChange
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -102,7 +104,12 @@ const CanvasTopNav = ({
 
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
-    <MobileTopNav lti={lti} brand={brand}>
+    <MobileTopNav
+      lti={lti}
+      brand={brand}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
       <MobileTopNav.End>
         {mobileButtons.map((button: any, index: any) => (
           <IconButton
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 378cd8d894..e63b40237c 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -46,10 +46,14 @@ const MobileTopNav = ({
   lti = false,
   brand,
   styles,
-  children
+  children,
+  open: controlledOpen,
+  onOpenChange
 }: MobileTopNavProps) => {
-  const [open, setOpen] = useState<boolean>(false)
+  const [internalOpen, setInternalOpen] = useState<boolean>(false)
 
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? controlledOpen : internalOpen
   useEffect(() => {
     const body = document.getElementsByTagName('body')[0]
     body.style.overflow = open ? 'hidden' : 'visible'
@@ -62,6 +66,15 @@ const MobileTopNav = ({
     )
   }
 
+  const handleToggle = () => {
+    const newOpen = !open
+    if (isControlled) {
+      onOpenChange?.(newOpen)
+    } else {
+      setInternalOpen(newOpen)
+    }
+  }
+
   return (
     <div style={styles.container(open)}>
       <div style={styles.topBar}>
@@ -73,7 +86,7 @@ const MobileTopNav = ({
             withBorder={false}
             screenReaderLabel="burger"
             color={lti ? undefined : 'primary-inverse'}
-            onClick={() => setOpen((open) => !open)}
+            onClick={handleToggle}
           >
             {open ? <IconXLine /> : <IconHamburgerLine />}
           </IconButton>
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 4da3ddca77..7fc20c3eb2 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -46,6 +46,8 @@ type MobileTopNavStyle = {
 
 type MobileTopNavProps = MobileTopNavOwnProps & {
   styles: MobileTopNavStyle
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 } & PropsWithChildren
 
 export type { MobileTopNavProps, MobileTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/SubNav/props.ts b/packages/ui-top-nav-bar/src/SubNav/props.ts
index 4a8867d312..4c7ac51f46 100644
--- a/packages/ui-top-nav-bar/src/SubNav/props.ts
+++ b/packages/ui-top-nav-bar/src/SubNav/props.ts
@@ -25,7 +25,7 @@
 type MenuItem = {
   href: string
   title: string
-  selected: boolean
+  selected?: boolean
   onClick?: () => void
 }
 

From 617a43edcbfc658c62b0dfd67e2979499723ae6c Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 14 Apr 2025 13:23:01 +0200
Subject: [PATCH 37/53] chore(ui-top-nav-bar): add LTI

---
 packages/__docs__/src/App/index.tsx           |  17 ++-
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 131 +++++++++++++-----
 .../src/CanvasTopNav/styles.tsx               |   7 +
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  11 +-
 4 files changed, 125 insertions(+), 41 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index fba222eb8f..0c4337b3f4 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -142,7 +142,7 @@ class App extends Component<AppProps, AppState> {
         </svg>
       </View>
     )
-
+    // mobile menu
     const menuArray: any = [
       {
         id: 'default',
@@ -308,7 +308,7 @@ class App extends Component<AppProps, AppState> {
             <CanvasTopNav
               brand={brandSvg}
               lti={this.isStudioPage()}
-              showDesktopView={this.isCoursePage() || this.isStudioPage()}
+              showDesktopView={this.isCoursePage() || this.isStudioPage()} // jobb nev
               buttons={[
                 {
                   label: 'AddLine',
@@ -344,14 +344,21 @@ class App extends Component<AppProps, AppState> {
                 }
               ]}
               mobileMenu={menuArray}
-              open={this.state.openMobile}
+              open={this.state.openMobile} // jobb nev, pl mobileMenuOpen
               onOpenChange={(open: boolean) => {
+                // szinten
                 this.setState({ openMobile: open })
               }}
-              menuItems={['alma', 'korte', 'szilva']}
+              ltiIcon={<IconArcLine />}
+              menuItems={[
+                { id: 'library', title: 'My Library' },
+                { id: 'share', title: 'Share with me' },
+                { id: 'settings', title: 'Settings' }
+              ]}
+              currentPageId="library" // ltiCurrentPageID
             />
             <Tray
-              label="Tray Example"
+              label="Courses"
               open={this.state.open}
               onDismiss={() => {
                 this.setState({ open: false })
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 75f67fc431..d9360d120f 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -36,6 +36,8 @@ import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import { generateStyles } from './styles'
 import { Drilldown } from '@instructure/ui-drilldown'
+import { TopNavBarMenuItems } from '../TopNavBar/TopNavBarMenuItems'
+import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
 
 /**
 ---
@@ -53,9 +55,12 @@ const CanvasTopNav = ({
   hamburgerOnClick,
   hamburgerLabel,
   showDesktopView,
+  menuItems,
   styles,
   open,
-  onOpenChange
+  onOpenChange,
+  ltiIcon,
+  currentPageId
 }: any) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
@@ -106,23 +111,25 @@ const CanvasTopNav = ({
   return isSmallScreen ? (
     <MobileTopNav
       lti={lti}
+      ltiIcon={ltiIcon}
       brand={brand}
       open={open}
       onOpenChange={onOpenChange}
     >
       <MobileTopNav.End>
-        {mobileButtons.map((button: any, index: any) => (
-          <IconButton
-            key={index}
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel={button.screenReaderLabel}
-            color={lti ? undefined : 'primary-inverse'}
-            onClick={button.onClick}
-          >
-            {button.icon}
-          </IconButton>
-        ))}
+        {!lti &&
+          mobileButtons.map((button: any, index: any) => (
+            <IconButton
+              key={index}
+              withBackground={false}
+              withBorder={false}
+              screenReaderLabel={button.screenReaderLabel}
+              color={lti ? undefined : 'primary-inverse'}
+              onClick={button.onClick}
+            >
+              {button.icon}
+            </IconButton>
+          ))}
       </MobileTopNav.End>
       <MobileTopNav.Menu>
         <InstUISettingsProvider
@@ -147,28 +154,84 @@ const CanvasTopNav = ({
     <div style={{ display: showDesktopView ? 'block' : 'none' }}>
       <DesktopTopNav lightMode={lti}>
         <DesktopTopNav.Start>
-          <IconButton
-            withBackground={false}
-            withBorder={false}
-            screenReaderLabel={hamburgerLabel}
-            onClick={hamburgerOnClick}
-            // color={lti ? 'secondary' : 'primary-inverse'}
+          {!lti && (
+            <IconButton
+              withBackground={false}
+              withBorder={false}
+              screenReaderLabel={hamburgerLabel}
+              onClick={hamburgerOnClick}
+              // color={lti ? 'secondary' : 'primary-inverse'}
+            >
+              <IconHamburgerLine />
+            </IconButton>
+          )}
+          {lti && <div style={styles.ltiIcon}>{ltiIcon}</div>}
+          {!lti && (
+            <div style={{ minWidth: '100%' }}>
+              <Breadcrumb label={breadcrumb.label}>
+                {breadcrumb.links.map((link: any, index: any) =>
+                  link.href ? (
+                    <Breadcrumb.Link key={index} href={link.href}>
+                      {link.label}
+                    </Breadcrumb.Link>
+                  ) : (
+                    <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
+                  )
+                )}
+              </Breadcrumb>
+            </div>
+          )}
+          <InstUISettingsProvider
+            theme={{
+              componentOverrides: {
+                'TopNavBar.Item': {
+                  ...styles.topNavBarItemOverride
+                }
+              }
+            }}
           >
-            <IconHamburgerLine />
-          </IconButton>
-          <div style={{ minWidth: '100%' }}>
-            <Breadcrumb label={breadcrumb.label}>
-              {breadcrumb.links.map((link: any, index: any) =>
-                link.href ? (
-                  <Breadcrumb.Link key={index} href={link.href}>
-                    {link.label}
-                  </Breadcrumb.Link>
-                ) : (
-                  <Breadcrumb.Link key={index}>{link.label}</Breadcrumb.Link>
-                )
-              )}
-            </Breadcrumb>
-          </div>
+            {' '}
+            <TopNavBarMenuItems
+              renderHiddenItemsMenuTriggerLabel={() => ''}
+              currentPageId={currentPageId}
+            >
+              {menuItems.map((item: any) => (
+                <TopNavBarItem key={item.id} id={item.id}>
+                  {item.title}
+                </TopNavBarItem>
+              ))}
+              <TopNavBarItem
+                renderSubmenu={
+                  <Drilldown rootPageId="root">
+                    <Drilldown.Page id="root">
+                      <Drilldown.Option id="rootOption1" subPageId="secondPage">
+                        Link One
+                      </Drilldown.Option>
+                      <Drilldown.Option id="rootOption2" href="/#TopNavBar">
+                        Link Two
+                      </Drilldown.Option>
+                      <Drilldown.Option id="rootOption3" href="/#TopNavBar">
+                        Link Three
+                      </Drilldown.Option>
+                    </Drilldown.Page>
+                    <Drilldown.Page id="secondPage">
+                      <Drilldown.Option id="secondPageOption1">
+                        Level 2 Option One
+                      </Drilldown.Option>
+                      <Drilldown.Option
+                        id="secondPageOption2"
+                        href="/#TopNavBar"
+                      >
+                        Level 2 Option Two
+                      </Drilldown.Option>
+                    </Drilldown.Page>
+                  </Drilldown>
+                }
+              >
+                Submenu
+              </TopNavBarItem>
+            </TopNavBarMenuItems>
+          </InstUISettingsProvider>
         </DesktopTopNav.Start>
         <DesktopTopNav.End>
           {buttons.map((button: any) => (
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index 991fd86f55..e18962a4b0 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -51,6 +51,13 @@ const generateStyles = (props: TopNavProps, theme: any) => {
       display: 'flex',
       gap: '8px',
       alignItems: 'center'
+    },
+    topNavBarItemOverride: {
+      color: theme?.colors?.contrasts.grey125125,
+      activeIndicatorColor: theme?.colors?.contrasts.grey125125
+    },
+    ltiIcon: {
+      fontSize: '38px'
     }
   }
 }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index e63b40237c..bf8765d6b1 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -48,7 +48,8 @@ const MobileTopNav = ({
   styles,
   children,
   open: controlledOpen,
-  onOpenChange
+  onOpenChange,
+  ltiIcon
 }: MobileTopNavProps) => {
   const [internalOpen, setInternalOpen] = useState<boolean>(false)
 
@@ -78,7 +79,13 @@ const MobileTopNav = ({
   return (
     <div style={styles.container(open)}>
       <div style={styles.topBar}>
-        {brand}
+        {lti ? (
+          <IconButton withBackground={false} withBorder={false}>
+            <div style={{ fontSize: '36px' }}> {ltiIcon}</div>
+          </IconButton>
+        ) : (
+          brand
+        )}
         <span style={styles.end}>
           {!open && getSubComponent('End')}
           <IconButton

From a5ffe3df7352a8311433c1797e8e3a4b0a4f9a4b Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 24 Apr 2025 16:02:34 +0200
Subject: [PATCH 38/53] refactor(ui-top-nav-bar,shared-types): add useStyle

---
 .../src/ComponentThemeVariables.ts            |  31 +++++
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 127 ++++++++++--------
 .../ui-top-nav-bar/src/CanvasTopNav/props.ts  |  23 +++-
 .../src/CanvasTopNav/styles.tsx               |  39 +++---
 .../ui-top-nav-bar/src/CanvasTopNav/theme.ts  |  49 +++++++
 .../src/DesktopTopNav/index.tsx               |  60 ++++++---
 .../ui-top-nav-bar/src/DesktopTopNav/props.ts |   4 +-
 .../src/DesktopTopNav/styles.tsx              |  17 ++-
 .../ui-top-nav-bar/src/DesktopTopNav/theme.ts |  40 ++++++
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  43 +++---
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |   2 +-
 .../src/MobileTopNav/styles.tsx               |  72 ++++++----
 .../ui-top-nav-bar/src/MobileTopNav/theme.ts  |  41 ++++++
 13 files changed, 398 insertions(+), 150 deletions(-)
 create mode 100644 packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
 create mode 100644 packages/ui-top-nav-bar/src/DesktopTopNav/theme.ts
 create mode 100644 packages/ui-top-nav-bar/src/MobileTopNav/theme.ts

diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 19b726549e..78eaf1a7a4 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -1745,6 +1745,34 @@ export type RadioInputGroupTheme = {
   invalidAsteriskColor: Colors['contrasts']['red5782']
 }
 
+export type MobileTopNavTheme = {
+  backgroundColor: string
+  backgroundColorLti: string
+  color: string
+  topBarPadding: string | 0
+}
+
+export type DesktopTopNavTheme = {
+  borderColor: string
+  backgroundColor: string
+  color: string
+}
+
+export type CanvasTopNavTheme = {
+  optionBackgroundLti: string
+  optionBackground: string
+  optionHighlightedBackgroundLti: string
+  optionHighlightedBackground: string
+  optionColorLti: string
+  optionColor: string
+  optionHighlightedLabelColorLti: string
+  optionHighlightedLabelColor: string
+  drilldownBorderColorLti: string
+  drilldownBorderColor: string
+  topNavBarItemColor: string
+  topNavBarItemActiveIndicatorColor: string
+}
+
 export interface ThemeVariables {
   Avatar: AvatarTheme
   Alert: AlertTheme
@@ -1886,4 +1914,7 @@ export interface ThemeVariables {
   ContextView: ContextViewTheme
   View: ViewTheme
   RadioInputGroup: RadioInputGroupTheme
+  MobileTopNav: MobileTopNavTheme
+  DesktopTopNav: DesktopTopNavTheme
+  CanvasTopNav: CanvasTopNavTheme
 }
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index d9360d120f..a8d6c18631 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -26,18 +26,17 @@
 import { useEffect, useState } from 'react'
 import { DesktopTopNav } from '../DesktopTopNav'
 import { MobileTopNav } from '../MobileTopNav'
-import {
-  InstUISettingsProvider,
-  jsx,
-  withFunctionalStyle
-} from '@instructure/emotion'
+import { InstUISettingsProvider, jsx, useStyle } from '@instructure/emotion'
 import { IconHamburgerLine } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
-import { generateStyles } from './styles'
+import { generateStyle } from './styles'
 import { Drilldown } from '@instructure/ui-drilldown'
 import { TopNavBarMenuItems } from '../TopNavBar/TopNavBarMenuItems'
 import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
+import { CanvasTopNavProps } from './props'
+import generateComponentTheme from './theme'
+import TopNavBarContext from '../TopNavBar/TopNavBarContext'
 
 /**
 ---
@@ -56,12 +55,11 @@ const CanvasTopNav = ({
   hamburgerLabel,
   showDesktopView,
   menuItems,
-  styles,
   open,
   onOpenChange,
   ltiIcon,
   currentPageId
-}: any) => {
+}: CanvasTopNavProps) => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
 
   // Resize listener to check if the screen is small or not
@@ -76,6 +74,14 @@ const CanvasTopNav = ({
     return () => window.removeEventListener('resize', handleResize)
   }, [breakpoint])
 
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: { lti },
+    componentId: 'CanvasTopNav',
+    displayName: 'CanvasTopNav'
+  })
+
   const renderDrilldownPages = (items: any) => {
     return items.map((item: any) => {
       return (
@@ -94,7 +100,7 @@ const CanvasTopNav = ({
                   onOptionClick={option.onClick}
                   afterLabelContentVAlign={'center'}
                 >
-                  <div style={styles.optionContainer}>
+                  <div css={styles.optionContainer}>
                     {option.renderBeforeTitle}
                     {option.label}
                   </div>
@@ -152,7 +158,7 @@ const CanvasTopNav = ({
     </MobileTopNav>
   ) : (
     <div style={{ display: showDesktopView ? 'block' : 'none' }}>
-      <DesktopTopNav lightMode={lti}>
+      <DesktopTopNav>
         <DesktopTopNav.Start>
           {!lti && (
             <IconButton
@@ -165,11 +171,11 @@ const CanvasTopNav = ({
               <IconHamburgerLine />
             </IconButton>
           )}
-          {lti && <div style={styles.ltiIcon}>{ltiIcon}</div>}
+          {lti && <div css={styles.ltiIcon}>{ltiIcon}</div>}
           {!lti && (
             <div style={{ minWidth: '100%' }}>
-              <Breadcrumb label={breadcrumb.label}>
-                {breadcrumb.links.map((link: any, index: any) =>
+              <Breadcrumb label={breadcrumb?.label}>
+                {breadcrumb?.links.map((link: any, index: any) =>
                   link.href ? (
                     <Breadcrumb.Link key={index} href={link.href}>
                       {link.label}
@@ -190,47 +196,57 @@ const CanvasTopNav = ({
               }
             }}
           >
-            {' '}
-            <TopNavBarMenuItems
-              renderHiddenItemsMenuTriggerLabel={() => ''}
-              currentPageId={currentPageId}
+            <TopNavBarContext.Provider
+              value={{
+                layout: 'desktop',
+                inverseColor: true
+              }}
             >
-              {menuItems.map((item: any) => (
-                <TopNavBarItem key={item.id} id={item.id}>
-                  {item.title}
-                </TopNavBarItem>
-              ))}
-              <TopNavBarItem
-                renderSubmenu={
-                  <Drilldown rootPageId="root">
-                    <Drilldown.Page id="root">
-                      <Drilldown.Option id="rootOption1" subPageId="secondPage">
-                        Link One
-                      </Drilldown.Option>
-                      <Drilldown.Option id="rootOption2" href="/#TopNavBar">
-                        Link Two
-                      </Drilldown.Option>
-                      <Drilldown.Option id="rootOption3" href="/#TopNavBar">
-                        Link Three
-                      </Drilldown.Option>
-                    </Drilldown.Page>
-                    <Drilldown.Page id="secondPage">
-                      <Drilldown.Option id="secondPageOption1">
-                        Level 2 Option One
-                      </Drilldown.Option>
-                      <Drilldown.Option
-                        id="secondPageOption2"
-                        href="/#TopNavBar"
-                      >
-                        Level 2 Option Two
-                      </Drilldown.Option>
-                    </Drilldown.Page>
-                  </Drilldown>
-                }
+              <TopNavBarMenuItems
+                renderHiddenItemsMenuTriggerLabel={() => ''}
+                currentPageId={currentPageId}
               >
-                Submenu
-              </TopNavBarItem>
-            </TopNavBarMenuItems>
+                {menuItems?.map((item: any) => (
+                  <TopNavBarItem key={item.id} id={item.id}>
+                    {item.title}
+                  </TopNavBarItem>
+                ))}
+                <TopNavBarItem
+                  id="submenu"
+                  renderSubmenu={
+                    <Drilldown rootPageId="root">
+                      <Drilldown.Page id="root">
+                        <Drilldown.Option
+                          id="rootOption1"
+                          subPageId="secondPage"
+                        >
+                          Link One
+                        </Drilldown.Option>
+                        <Drilldown.Option id="rootOption2" href="/#TopNavBar">
+                          Link Two
+                        </Drilldown.Option>
+                        <Drilldown.Option id="rootOption3" href="/#TopNavBar">
+                          Link Three
+                        </Drilldown.Option>
+                      </Drilldown.Page>
+                      <Drilldown.Page id="secondPage">
+                        <Drilldown.Option id="secondPageOption1">
+                          Level 2 Option One
+                        </Drilldown.Option>
+                        <Drilldown.Option
+                          id="secondPageOption2"
+                          href="/#TopNavBar"
+                        >
+                          Level 2 Option Two
+                        </Drilldown.Option>
+                      </Drilldown.Page>
+                    </Drilldown>
+                  }
+                >
+                  Submenu
+                </TopNavBarItem>
+              </TopNavBarMenuItems>
+            </TopNavBarContext.Provider>
           </InstUISettingsProvider>
         </DesktopTopNav.Start>
         <DesktopTopNav.End>
@@ -245,8 +261,7 @@ const CanvasTopNav = ({
   )
 }
 
-const SC: any = withFunctionalStyle(generateStyles)(CanvasTopNav)
-SC.displayName = 'CanvasTopNav'
+CanvasTopNav.displayName = 'CanvasTopNav'
 
-export { SC as CanvasTopNav }
-export default SC
+export { CanvasTopNav }
+export default CanvasTopNav
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
index 4c8cd92c9d..9fc823d0bb 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
@@ -22,13 +22,26 @@
  * SOFTWARE.
  */
 
-import type { PropsWithChildren } from 'react'
+import type { PropsWithChildren, ReactNode } from 'react'
 
-type TopNavOwnProps = {
+type CanvasTopNavOwnProps = {
   lti?: boolean
-  breakpoint?: string
+  breakpoint?: number
+  brand?: ReactNode
+  breadcrumb?: { label: string; links: { label: string; href?: string }[] }
+  buttons?: any[]
+  mobileButtons?: any[]
+  mobileMenu?: any[]
+  hamburgerOnClick?: () => void
+  hamburgerLabel?: string
+  showDesktopView?: boolean
+  menuItems?: any[]
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  ltiIcon?: ReactNode
+  currentPageId?: string
 }
 
-type TopNavProps = TopNavOwnProps & PropsWithChildren
+type CanvasTopNavProps = CanvasTopNavOwnProps & PropsWithChildren
 
-export type { TopNavProps, TopNavOwnProps }
+export type { CanvasTopNavProps, CanvasTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index e18962a4b0..1b75814576 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -21,45 +21,50 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { TopNavProps } from './props'
+import type { CanvasTopNavProps } from './props'
+import { CanvasTopNavTheme } from '@instructure/shared-types'
+
+const generateStyle = (
+  componentTheme: CanvasTopNavTheme,
+  params: CanvasTopNavProps
+) => {
+  const { lti } = params
 
-const generateStyles = (props: TopNavProps, theme: any) => {
-  const { lti } = props
   return {
     optionsOverride: {
       background: lti
-        ? theme?.colors?.contrasts?.grey1111
-        : theme?.colors?.contrasts?.grey100100, //-> grey100100
+        ? componentTheme.optionBackgroundLti
+        : componentTheme.optionBackground,
       highlightedBackground: lti
-        ? theme?.colors?.contrasts?.grey1214
-        : theme?.colors?.contrasts?.grey5782,
-      color: lti
-        ? theme?.colors?.contrasts?.grey125125
-        : theme?.colors?.contrasts?.white1010,
+        ? componentTheme.optionHighlightedBackgroundLti
+        : componentTheme.optionHighlightedBackground,
+      color: lti ? componentTheme.optionColorLti : componentTheme.optionColor,
       highlightedLabelColor: lti
-        ? theme?.colors?.contrasts?.grey125125
-        : theme?.colors?.contrasts?.white1010,
+        ? componentTheme.optionHighlightedLabelColorLti
+        : componentTheme.optionHighlightedLabelColor,
       padding: '16px 12px',
       lineHeight: '1.5'
     },
     drilldownOverride: {
       borderColor: lti
-        ? theme?.colors?.contrasts?.grey1424
-        : theme?.colors?.contrasts?.grey100100
+        ? componentTheme.drilldownBorderColorLti
+        : componentTheme.drilldownBorderColor
     },
     optionContainer: {
+      label: 'canvasTopNavOptionContainer',
       display: 'flex',
       gap: '8px',
       alignItems: 'center'
     },
     topNavBarItemOverride: {
-      color: theme?.colors?.contrasts.grey125125,
-      activeIndicatorColor: theme?.colors?.contrasts.grey125125
+      color: componentTheme.topNavBarItemColor,
+      activeIndicatorColor: componentTheme.topNavBarItemActiveIndicatorColor
     },
     ltiIcon: {
+      label: 'canvasTopNavLtiIcon',
       fontSize: '38px'
     }
   }
 }
 
-export { generateStyles }
+export { generateStyle }
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
new file mode 100644
index 0000000000..cfdb38ab3a
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
@@ -0,0 +1,49 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { CanvasTopNavTheme } from '@instructure/shared-types'
+
+const generateComponentTheme = (theme: Theme): CanvasTopNavTheme => {
+  const componentVariables: CanvasTopNavTheme = {
+    optionBackgroundLti: theme?.colors?.contrasts?.grey1111,
+    optionBackground: theme?.colors?.contrasts?.grey100100,
+    optionHighlightedBackgroundLti: theme?.colors?.contrasts?.grey1214,
+    optionHighlightedBackground: theme?.colors?.contrasts?.grey5782,
+    optionColorLti: theme?.colors?.contrasts?.grey125125,
+    optionColor: theme?.colors?.contrasts?.white1010,
+    optionHighlightedLabelColorLti: theme?.colors?.contrasts?.grey125125,
+    optionHighlightedLabelColor: theme?.colors?.contrasts?.white1010,
+    drilldownBorderColorLti: theme?.colors?.contrasts?.grey1424,
+    drilldownBorderColor: theme?.colors?.contrasts?.grey100100,
+    topNavBarItemColor: theme?.colors?.contrasts?.grey125125,
+    topNavBarItemActiveIndicatorColor: theme?.colors?.contrasts?.grey125125
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index ee540dc6d9..3bdce4c8c6 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -24,45 +24,71 @@
 
 /** @jsx jsx */
 import { Children, PropsWithChildren } from 'react'
-import { jsx, withFunctionalStyle } from '@instructure/emotion'
+import { jsx, useStyle } from '@instructure/emotion'
 import type { DesktopTopNavProps } from './props'
 
-import { generateStyles } from './styles'
+import { generateStyle } from './styles'
+import generateComponentTheme from './theme'
 
 /**
 ---
 category: utilities
 ---
- **/
-const DesktopTopNav = ({ styles, children }: DesktopTopNavProps) => {
+**/
+const DesktopTopNav = ({ children }: DesktopTopNavProps) => {
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: {},
+    componentId: 'DesktopTopNav',
+    displayName: 'DesktopTopNav'
+  })
+
   const getSubComponent = (displayName: any) => {
     return Children.map(children, (child: any) => child)?.filter(
       (child: any) => child?.type?.displayName === displayName
     )
   }
   return (
-    <div style={styles.container}>
+    <div css={styles.container}>
       {getSubComponent('Start')}
       {getSubComponent('End')}
     </div>
   )
 }
 
-const Start = ({ children, styles }: PropsWithChildren & { styles: any }) => {
-  return <div style={styles.start}>{children}</div>
+const Start = ({ children }: PropsWithChildren) => {
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: {},
+    componentId: 'DesktopTopNav.Start',
+    displayName: 'DesktopTopNav.Start'
+  })
+  return <div css={styles.start}>{children}</div>
 }
 
-const End = ({ children, styles }: PropsWithChildren & { styles: any }) => {
-  return <div style={styles.end}>{children}</div>
+const End = ({ children }: PropsWithChildren) => {
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: {},
+    componentId: 'DesktopTopNav.End',
+    displayName: 'DesktopTopNav.End'
+  })
+  return <div css={styles.end}>{children}</div>
 }
 
-const SC: any = withFunctionalStyle(generateStyles)(DesktopTopNav)
+Start.displayName = 'Start'
+End.displayName = 'End'
+DesktopTopNav.Start = Start
+DesktopTopNav.End = End
 
-SC.displayName = 'DesktopTopNav'
-SC.Start = withFunctionalStyle(generateStyles)(Start)
-SC.Start.displayName = 'Start'
-SC.End = withFunctionalStyle(generateStyles)(End)
-SC.End.displayName = 'End'
+DesktopTopNav.displayName = 'DesktopTopNav'
+Start.displayName = 'Start'
+End.displayName = 'End'
+DesktopTopNav.Start = Start
+DesktopTopNav.End = End
 
-export { SC as DesktopTopNav }
-export default SC
+export { DesktopTopNav }
+export default DesktopTopNav
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
index bb320542ce..9e6f75be7e 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
@@ -44,8 +44,6 @@ type DesktopTopNavStyle = {
   }
 }
 
-type DesktopTopNavProps = DesktopTopNavOwnProps & {
-  styles: DesktopTopNavStyle
-} & PropsWithChildren
+type DesktopTopNavProps = DesktopTopNavOwnProps & PropsWithChildren
 
 export type { DesktopTopNavProps, DesktopTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index 025d06d7a7..a67ec26c0d 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -22,22 +22,28 @@
  * SOFTWARE.
  */
 import type { DesktopTopNavProps } from './props'
+import type { DesktopTopNavTheme } from '@instructure/shared-types'
 
-const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
+const generateStyle = (
+  componentTheme: DesktopTopNavTheme,
+  _params: DesktopTopNavProps
+) => {
   return {
     container: {
+      label: 'desktopTopNavContainer',
       height: '66px',
       position: 'relative',
       borderBottom: '1px solid',
-      borderColor: theme.colors.contrasts.grey1424,
-      backgroundColor: theme.colors.contrasts.grey1111,
+      borderColor: componentTheme.borderColor,
+      backgroundColor: componentTheme.backgroundColor,
       width: '100%',
-      color: theme.colors.contrasts.grey125125,
+      color: componentTheme.color,
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'row'
     },
     start: {
+      label: 'desktopTopNavStart',
       marginLeft: '24px',
       marginRight: 'auto',
       display: 'flex',
@@ -46,6 +52,7 @@ const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
       gap: '16px'
     },
     end: {
+      label: 'desktopTopNavEnd',
       marginRight: '24px',
       display: 'flex',
       gap: '12px'
@@ -53,4 +60,4 @@ const generateStyles = (_props: DesktopTopNavProps, theme: any) => {
   }
 }
 
-export { generateStyles }
+export { generateStyle }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/theme.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/theme.ts
new file mode 100644
index 0000000000..d8f7f49a80
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/theme.ts
@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { DesktopTopNavTheme } from '@instructure/shared-types'
+
+const generateComponentTheme = (theme: Theme): DesktopTopNavTheme => {
+  const componentVariables: DesktopTopNavTheme = {
+    borderColor: theme.colors.contrasts.grey1424,
+    backgroundColor: theme.colors.contrasts.grey1111,
+    color: theme.colors.contrasts.grey125125
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index bf8765d6b1..21ebd971bf 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -30,12 +30,13 @@ import {
   useEffect,
   useState
 } from 'react'
-import { jsx, withFunctionalStyle } from '@instructure/emotion'
+import { jsx, useStyle } from '@instructure/emotion'
 import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
 import { IconHamburgerLine, IconXLine } from '@instructure/ui-icons'
-import { generateStyles } from './styles'
+import { generateStyle } from './styles'
+import generateComponentTheme from './theme'
 
 /**
 ---
@@ -45,7 +46,6 @@ category: utilities
 const MobileTopNav = ({
   lti = false,
   brand,
-  styles,
   children,
   open: controlledOpen,
   onOpenChange,
@@ -53,6 +53,16 @@ const MobileTopNav = ({
 }: MobileTopNavProps) => {
   const [internalOpen, setInternalOpen] = useState<boolean>(false)
 
+  const styles = useStyle({
+    generateStyle,
+    generateComponentTheme,
+    params: {
+      lti
+    },
+    componentId: 'MobileTopNav',
+    displayName: 'MobileTopNav'
+  })
+
   const isControlled = controlledOpen !== undefined
   const open = isControlled ? controlledOpen : internalOpen
   useEffect(() => {
@@ -77,8 +87,8 @@ const MobileTopNav = ({
   }
 
   return (
-    <div style={styles.container(open)}>
-      <div style={styles.topBar}>
+    <div css={styles.container}>
+      <div css={styles.topBar}>
         {lti ? (
           <IconButton withBackground={false} withBorder={false}>
             <div style={{ fontSize: '36px' }}> {ltiIcon}</div>
@@ -86,7 +96,7 @@ const MobileTopNav = ({
         ) : (
           brand
         )}
-        <span style={styles.end}>
+        <span css={styles.end}>
           {!open && getSubComponent('End')}
           <IconButton
             withBackground={false}
@@ -100,7 +110,9 @@ const MobileTopNav = ({
         </span>
       </div>
 
-      <div style={styles.content(open)}>{getSubComponent('Menu')}</div>
+      <div css={open ? styles.contentOpen : styles.contentClosed}>
+        {getSubComponent('Menu')}
+      </div>
     </div>
   )
 }
@@ -113,14 +125,11 @@ const Menu = ({ children }: PropsWithChildren) => {
   return <Fragment>{children}</Fragment>
 }
 
-const SC: any = withFunctionalStyle(generateStyles)(MobileTopNav)
-
-SC.End = End
-SC.End.displayName = 'End'
-// TODO investigate whether displayName should be added to the original component
-SC.Menu = Menu
-SC.Menu.displayName = 'Menu'
-SC.displayName = 'MobileTopNav'
+MobileTopNav.End = End
+;(MobileTopNav.End as React.FC).displayName = 'End'
+MobileTopNav.Menu = Menu
+;(MobileTopNav.Menu as React.FC).displayName = 'Menu'
+MobileTopNav.displayName = 'MobileTopNav'
 
-export { SC as MobileTopNav }
-export default SC
+export { MobileTopNav }
+export default MobileTopNav
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 7fc20c3eb2..067a90ad47 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -45,9 +45,9 @@ type MobileTopNavStyle = {
 }
 
 type MobileTopNavProps = MobileTopNavOwnProps & {
-  styles: MobileTopNavStyle
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  ltiIcon?: ReactNode
 } & PropsWithChildren
 
 export type { MobileTopNavProps, MobileTopNavOwnProps }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index a72ecf9972..cadd982e5a 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -22,45 +22,59 @@
  * SOFTWARE.
  */
 import type { MobileTopNavProps } from './props'
+import type { MobileTopNavTheme } from '@instructure/shared-types'
+
+const generateStyle = (
+  componentTheme: MobileTopNavTheme,
+  params: MobileTopNavProps
+) => {
+  const { lti } = params
+
+  const contentBase = {
+    top: '3.375rem',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    position: 'fixed',
+    backgroundColor: lti
+      ? componentTheme.backgroundColorLti
+      : componentTheme.backgroundColor,
+    color: componentTheme.backgroundColor
+  }
 
-//TODO use theme variables for spacing
-const generateStyles = (props: MobileTopNavProps, theme: any) => {
-  const { lti } = props
   return {
-    container: (_open: boolean) => {
-      return {
-        height: '54px',
-        backgroundColor: lti
-          ? theme?.colors?.contrasts?.grey1111
-          : theme?.colors?.contrasts?.grey100100, //CANVAS, LTI LATER
-        color: theme?.colors?.contrasts?.grey125125,
-        width: '100%',
-        zIndex: '9999'
-      }
+    container: {
+      label: 'mobileTopNavContainer',
+      height: '54px',
+      backgroundColor: lti
+        ? componentTheme.backgroundColorLti
+        : componentTheme.backgroundColor,
+      color: componentTheme.backgroundColor,
+      width: '100%',
+      zIndex: '9999'
     },
     topBar: {
-      padding: `0 ${theme.spacing.small}`,
+      label: 'mobileTopNavTopBar',
+      padding: `0 ${componentTheme.topBarPadding}`,
       height: '54px',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between'
     },
-    content: (open: boolean) => {
-      return {
-        height: open ? '100%' : '0px',
-        top: '3.375rem',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflow: open ? 'hidden' : 'scroll',
-        position: 'fixed',
-        backgroundColor: lti
-          ? theme?.colors?.contrasts?.grey1111
-          : theme?.colors?.contrasts?.grey100100,
-        color: theme.colors?.contrasts?.white1010
-      }
+    contentOpen: {
+      label: 'mobileTopNavContentOpen',
+      ...contentBase,
+      height: '100%',
+      overflow: 'hidden'
+    },
+    contentClosed: {
+      label: 'mobileTopNavContentClosed',
+      ...contentBase,
+      height: '0px',
+      overflow: 'scroll'
     },
     end: {
+      label: 'mobileTopNavEnd',
       display: 'flex',
       gap: '12px',
       marginLeft: 'auto'
@@ -68,4 +82,4 @@ const generateStyles = (props: MobileTopNavProps, theme: any) => {
   }
 }
 
-export { generateStyles }
+export { generateStyle }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/theme.ts b/packages/ui-top-nav-bar/src/MobileTopNav/theme.ts
new file mode 100644
index 0000000000..f4f2fc9dfb
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/theme.ts
@@ -0,0 +1,41 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { MobileTopNavTheme } from '@instructure/shared-types'
+
+const generateComponentTheme = (theme: Theme): MobileTopNavTheme => {
+  const componentVariables: MobileTopNavTheme = {
+    backgroundColor: theme?.colors?.contrasts?.grey100100,
+    backgroundColorLti: theme?.colors?.contrasts?.grey1111,
+    color: theme?.colors?.contrasts?.grey125125,
+    topBarPadding: theme?.spacing?.small
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme

From 5ff13c929e13963c9f17bc322261d4aa97eb7067 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 24 Apr 2025 16:48:57 +0200
Subject: [PATCH 39/53] refactor(ui-top-nav-bar): fix svg

---
 packages/__docs__/src/App/index.tsx           | 29 +++++++++++--------
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx |  6 +++-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 0c4337b3f4..b89a921400 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -124,22 +124,30 @@ class App extends Component<AppProps, AppState> {
 
     const brandSvg = (
       <View
-        href="#"
+        href="/"
         tabIndex={0}
         role="button"
         position="relative"
+        display="inline-block"
         borderRadius="small"
         focusColor="inverse" // LTI eseten nincs itt inverse, kek marad a focusring
       >
-        <svg
-          viewBox="0 0 1920 1920"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="#fff"
-          width="28px"
-          height="28px"
+        <Flex
+          width="100%"
+          height="100%"
+          alignItems="center"
+          justifyItems="center"
         >
-          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
-        </svg>
+          <svg
+            viewBox="0 0 1920 1920"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="#fff"
+            width="36px"
+            height="36px"
+          >
+            <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+          </svg>
+        </Flex>
       </View>
     )
     // mobile menu
@@ -248,9 +256,6 @@ class App extends Component<AppProps, AppState> {
                   minimizedLabel: 'Expand SideNavBar'
                 }}
               >
-                <SideNavBar.Item
-                  label={<ScreenReaderContent>Home</ScreenReaderContent>}
-                />
                 <SideNavBar.Item
                   icon={brandSvg}
                   label={<ScreenReaderContent>Home</ScreenReaderContent>}
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index a8d6c18631..c1a25d1a88 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -251,7 +251,11 @@ const CanvasTopNav = ({
         </DesktopTopNav.Start>
         <DesktopTopNav.End>
           {buttons.map((button: any) => (
-            <Button key={button.label} renderIcon={button.icon}>
+            <Button
+              key={button.label}
+              renderIcon={button.icon}
+              onClick={button.onClick}
+            >
               {button.label}
             </Button>
           ))}

From 75d54c80aac1a59db1f53b74bbe1a1afa8b03b3b Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 29 Apr 2025 09:44:00 +0200
Subject: [PATCH 40/53] refactor(ui-top-nav-bar): fix style stuff

---
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 118 +++++++++---------
 .../ui-top-nav-bar/src/DesktopTopNav/props.ts |  18 +--
 .../src/DesktopTopNav/styles.tsx              |   4 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |   6 +-
 .../ui-top-nav-bar/src/MobileTopNav/props.ts  |  20 +--
 .../src/MobileTopNav/styles.tsx               |   4 +-
 6 files changed, 77 insertions(+), 93 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index c1a25d1a88..2c9e89f904 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -172,9 +172,9 @@ const CanvasTopNav = ({
             </IconButton>
           )}
           {lti && <div css={styles.ltiIcon}>{ltiIcon}</div>}
-          {!lti && (
+          {!lti && breadcrumb && (
             <div style={{ minWidth: '100%' }}>
-              <Breadcrumb label={breadcrumb?.label}>
+              <Breadcrumb label={breadcrumb.label}>
                 {breadcrumb?.links.map((link: any, index: any) =>
                   link.href ? (
                     <Breadcrumb.Link key={index} href={link.href}>
@@ -187,67 +187,69 @@ const CanvasTopNav = ({
               </Breadcrumb>
             </div>
           )}
-          <InstUISettingsProvider
-            theme={{
-              componentOverrides: {
-                'TopNavBar.Item': {
-                  ...styles.topNavBarItemOverride
+          {lti && (
+            <InstUISettingsProvider
+              theme={{
+                componentOverrides: {
+                  'TopNavBar.Item': {
+                    ...styles.topNavBarItemOverride
+                  }
                 }
-              }
-            }}
-          >
-            <TopNavBarContext.Provider
-              value={{
-                layout: 'desktop',
-                inverseColor: true
               }}
             >
-              <TopNavBarMenuItems
-                renderHiddenItemsMenuTriggerLabel={() => ''}
-                currentPageId={currentPageId}
+              <TopNavBarContext.Provider
+                value={{
+                  layout: 'desktop',
+                  inverseColor: true
+                }}
               >
-                {menuItems?.map((item: any) => (
-                  <TopNavBarItem key={item.id} id={item.id}>
-                    {item.title}
-                  </TopNavBarItem>
-                ))}
-                <TopNavBarItem
-                  id="submenu"
-                  renderSubmenu={
-                    <Drilldown rootPageId="root">
-                      <Drilldown.Page id="root">
-                        <Drilldown.Option
-                          id="rootOption1"
-                          subPageId="secondPage"
-                        >
-                          Link One
-                        </Drilldown.Option>
-                        <Drilldown.Option id="rootOption2" href="/#TopNavBar">
-                          Link Two
-                        </Drilldown.Option>
-                        <Drilldown.Option id="rootOption3" href="/#TopNavBar">
-                          Link Three
-                        </Drilldown.Option>
-                      </Drilldown.Page>
-                      <Drilldown.Page id="secondPage">
-                        <Drilldown.Option id="secondPageOption1">
-                          Level 2 Option One
-                        </Drilldown.Option>
-                        <Drilldown.Option
-                          id="secondPageOption2"
-                          href="/#TopNavBar"
-                        >
-                          Level 2 Option Two
-                        </Drilldown.Option>
-                      </Drilldown.Page>
-                    </Drilldown>
-                  }
+                <TopNavBarMenuItems
+                  renderHiddenItemsMenuTriggerLabel={() => ''}
+                  currentPageId={currentPageId}
                 >
-                  Submenu
-                </TopNavBarItem>
-              </TopNavBarMenuItems>
-            </TopNavBarContext.Provider>
-          </InstUISettingsProvider>
+                  {menuItems?.map((item: any) => (
+                    <TopNavBarItem key={item.id} id={item.id}>
+                      {item.title}
+                    </TopNavBarItem>
+                  ))}
+                  <TopNavBarItem
+                    id="submenu"
+                    renderSubmenu={
+                      <Drilldown rootPageId="root">
+                        <Drilldown.Page id="root">
+                          <Drilldown.Option
+                            id="rootOption1"
+                            subPageId="secondPage"
+                          >
+                            Link One
+                          </Drilldown.Option>
+                          <Drilldown.Option id="rootOption2" href="/#TopNavBar">
+                            Link Two
+                          </Drilldown.Option>
+                          <Drilldown.Option id="rootOption3" href="/#TopNavBar">
+                            Link Three
+                          </Drilldown.Option>
+                        </Drilldown.Page>
+                        <Drilldown.Page id="secondPage">
+                          <Drilldown.Option id="secondPageOption1">
+                            Level 2 Option One
+                          </Drilldown.Option>
+                          <Drilldown.Option
+                            id="secondPageOption2"
+                            href="/#TopNavBar"
+                          >
+                            Level 2 Option Two
+                          </Drilldown.Option>
+                        </Drilldown.Page>
+                      </Drilldown>
+                    }
+                  >
+                    Submenu
+                  </TopNavBarItem>
+                </TopNavBarMenuItems>
+              </TopNavBarContext.Provider>
+            </InstUISettingsProvider>
+          )}
         </DesktopTopNav.Start>
         <DesktopTopNav.End>
           {buttons.map((button: any) => (
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
index 9e6f75be7e..5df2af6a09 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/props.ts
@@ -23,27 +23,15 @@
  */
 
 import type { ReactNode, PropsWithChildren } from 'react'
+import { ComponentStyle } from '@instructure/emotion'
 
 type DesktopTopNavOwnProps = {
   lti?: boolean
   brand?: ReactNode
 }
 
-type DesktopTopNavStyle = {
-  container: {
-    [key: string]: string | number
-  }
-  content: (open: boolean) => {
-    [key: string]: string | number
-  }
-  topBar: {
-    [key: string]: string | number
-  }
-  btnRow: {
-    [key: string]: string | number
-  }
-}
+type DesktopTopNavStyle = ComponentStyle<'container' | 'start' | 'end'>
 
 type DesktopTopNavProps = DesktopTopNavOwnProps & PropsWithChildren
 
-export type { DesktopTopNavProps, DesktopTopNavOwnProps }
+export type { DesktopTopNavProps, DesktopTopNavOwnProps, DesktopTopNavStyle }
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
index a67ec26c0d..53dba293fe 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/styles.tsx
@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { DesktopTopNavProps } from './props'
+import type { DesktopTopNavProps, DesktopTopNavStyle } from './props'
 import type { DesktopTopNavTheme } from '@instructure/shared-types'
 
 const generateStyle = (
   componentTheme: DesktopTopNavTheme,
   _params: DesktopTopNavProps
-) => {
+): DesktopTopNavStyle => {
   return {
     container: {
       label: 'desktopTopNavContainer',
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 21ebd971bf..778d7293f4 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -90,7 +90,11 @@ const MobileTopNav = ({
     <div css={styles.container}>
       <div css={styles.topBar}>
         {lti ? (
-          <IconButton withBackground={false} withBorder={false}>
+          <IconButton
+            withBackground={false}
+            withBorder={false}
+            screenReaderLabel={'lti'}
+          >
             <div style={{ fontSize: '36px' }}> {ltiIcon}</div>
           </IconButton>
         ) : (
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
index 067a90ad47..c1896f41d6 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/props.ts
@@ -23,26 +23,16 @@
  */
 
 import type { ReactNode, PropsWithChildren } from 'react'
+import { ComponentStyle } from '@instructure/emotion'
 
 type MobileTopNavOwnProps = {
   lti?: boolean
   brand?: ReactNode
 }
 
-type MobileTopNavStyle = {
-  container: (open: boolean) => {
-    [key: string]: string | number
-  }
-  content: (open: boolean) => {
-    [key: string]: string | number
-  }
-  topBar: {
-    [key: string]: string | number
-  }
-  end: {
-    [key: string]: string | number
-  }
-}
+type MobileTopNavStyle = ComponentStyle<
+  'container' | 'topBar' | 'contentOpen' | 'contentClosed' | 'end'
+>
 
 type MobileTopNavProps = MobileTopNavOwnProps & {
   open?: boolean
@@ -50,4 +40,4 @@ type MobileTopNavProps = MobileTopNavOwnProps & {
   ltiIcon?: ReactNode
 } & PropsWithChildren
 
-export type { MobileTopNavProps, MobileTopNavOwnProps }
+export type { MobileTopNavProps, MobileTopNavOwnProps, MobileTopNavStyle }
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
index cadd982e5a..79897da9b0 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/styles.tsx
@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { MobileTopNavProps } from './props'
+import type { MobileTopNavProps, MobileTopNavStyle } from './props'
 import type { MobileTopNavTheme } from '@instructure/shared-types'
 
 const generateStyle = (
   componentTheme: MobileTopNavTheme,
   params: MobileTopNavProps
-) => {
+): MobileTopNavStyle => {
   const { lti } = params
 
   const contentBase = {

From a9940156b3cecc0220ec327901ff684ab38adf79 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 29 Apr 2025 14:32:04 +0200
Subject: [PATCH 41/53] chore(ui-top-nav-bar): add DeepPartial theme

---
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 131 ++++++++++--------
 .../ui-top-nav-bar/src/CanvasTopNav/props.ts  |  12 +-
 .../src/CanvasTopNav/styles.tsx               |   9 +-
 3 files changed, 91 insertions(+), 61 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 2c9e89f904..a1bd30bca2 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -37,6 +37,12 @@ import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
 import { CanvasTopNavProps } from './props'
 import generateComponentTheme from './theme'
 import TopNavBarContext from '../TopNavBar/TopNavBarContext'
+import {
+  DeepPartial,
+  DrilldownTheme,
+  OptionsItemTheme,
+  TopNavBarItemTheme
+} from '@instructure/shared-types'
 
 /**
 ---
@@ -88,6 +94,7 @@ const CanvasTopNav = ({
         <Drilldown.Page
           key={item.id}
           id={item.id} //TODO renderbackbuttonlabel
+          renderBackButtonLabel={item?.backButtonLabel}
           renderBeforeChildren={item.renderBeforeMobileMenuItems}
           renderAfterChildren={item.renderAfterMobileMenuItems}
         >
@@ -142,10 +149,10 @@ const CanvasTopNav = ({
           theme={{
             componentOverrides: {
               'Options.Item': {
-                ...styles.optionsOverride
+                ...(styles.optionsOverride as DeepPartial<OptionsItemTheme>)
               },
               Drilldown: {
-                ...styles.drilldownOverride
+                ...(styles.drilldownOverride as DeepPartial<DrilldownTheme>)
               }
             }
           }}
@@ -188,67 +195,75 @@ const CanvasTopNav = ({
             </div>
           )}
           {lti && (
-            <InstUISettingsProvider
-              theme={{
-                componentOverrides: {
-                  'TopNavBar.Item': {
-                    ...styles.topNavBarItemOverride
+            <div css={styles.menuItems}>
+              <InstUISettingsProvider
+                theme={{
+                  componentOverrides: {
+                    'TopNavBar.Item': {
+                      ...(styles.topNavBarItemOverride as DeepPartial<TopNavBarItemTheme>)
+                    }
                   }
-                }
-              }}
-            >
-              <TopNavBarContext.Provider
-                value={{
-                  layout: 'desktop',
-                  inverseColor: true
                 }}
               >
-                <TopNavBarMenuItems
-                  renderHiddenItemsMenuTriggerLabel={() => ''}
-                  currentPageId={currentPageId}
+                <TopNavBarContext.Provider
+                  value={{
+                    layout: 'desktop',
+                    inverseColor: true
+                  }}
                 >
-                  {menuItems?.map((item: any) => (
-                    <TopNavBarItem key={item.id} id={item.id}>
-                      {item.title}
-                    </TopNavBarItem>
-                  ))}
-                  <TopNavBarItem
-                    id="submenu"
-                    renderSubmenu={
-                      <Drilldown rootPageId="root">
-                        <Drilldown.Page id="root">
-                          <Drilldown.Option
-                            id="rootOption1"
-                            subPageId="secondPage"
-                          >
-                            Link One
-                          </Drilldown.Option>
-                          <Drilldown.Option id="rootOption2" href="/#TopNavBar">
-                            Link Two
-                          </Drilldown.Option>
-                          <Drilldown.Option id="rootOption3" href="/#TopNavBar">
-                            Link Three
-                          </Drilldown.Option>
-                        </Drilldown.Page>
-                        <Drilldown.Page id="secondPage">
-                          <Drilldown.Option id="secondPageOption1">
-                            Level 2 Option One
-                          </Drilldown.Option>
-                          <Drilldown.Option
-                            id="secondPageOption2"
-                            href="/#TopNavBar"
-                          >
-                            Level 2 Option Two
-                          </Drilldown.Option>
-                        </Drilldown.Page>
-                      </Drilldown>
-                    }
+                  <TopNavBarMenuItems
+                    renderHiddenItemsMenuTriggerLabel={() => ''}
+                    currentPageId={currentPageId}
                   >
-                    Submenu
-                  </TopNavBarItem>
-                </TopNavBarMenuItems>
-              </TopNavBarContext.Provider>
-            </InstUISettingsProvider>
+                    {menuItems?.map((item: any) => (
+                      <TopNavBarItem key={item.id} id={item.id}>
+                        {item.title}
+                      </TopNavBarItem>
+                    ))}
+                    <TopNavBarItem
+                      id="submenu"
+                      renderSubmenu={
+                        <Drilldown rootPageId="root">
+                          <Drilldown.Page id="root">
+                            <Drilldown.Option
+                              id="rootOption1"
+                              subPageId="secondPage"
+                            >
+                              Link One
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="rootOption2"
+                              href="/#TopNavBar"
+                            >
+                              Link Two
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="rootOption3"
+                              href="/#TopNavBar"
+                            >
+                              Link Three
+                            </Drilldown.Option>
+                          </Drilldown.Page>
+                          <Drilldown.Page id="secondPage">
+                            <Drilldown.Option id="secondPageOption1">
+                              Level 2 Option One
+                            </Drilldown.Option>
+                            <Drilldown.Option
+                              id="secondPageOption2"
+                              href="/#TopNavBar"
+                            >
+                              Level 2 Option Two
+                            </Drilldown.Option>
+                          </Drilldown.Page>
+                        </Drilldown>
+                      }
+                    >
+                      Submenu
+                    </TopNavBarItem>
+                  </TopNavBarMenuItems>
+                </TopNavBarContext.Provider>
+              </InstUISettingsProvider>
+            </div>
           )}
         </DesktopTopNav.Start>
         <DesktopTopNav.End>
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
index 9fc823d0bb..56993a4b43 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
@@ -23,6 +23,7 @@
  */
 
 import type { PropsWithChildren, ReactNode } from 'react'
+import { ComponentStyle } from '@instructure/emotion'
 
 type CanvasTopNavOwnProps = {
   lti?: boolean
@@ -42,6 +43,15 @@ type CanvasTopNavOwnProps = {
   currentPageId?: string
 }
 
+type CanvasTopNavStyle = ComponentStyle<
+  | 'optionsOverride'
+  | 'drilldownOverride'
+  | 'optionContainer'
+  | 'topNavBarItemOverride'
+  | 'ltiIcon'
+  | 'menuItems'
+>
+
 type CanvasTopNavProps = CanvasTopNavOwnProps & PropsWithChildren
 
-export type { CanvasTopNavProps, CanvasTopNavOwnProps }
+export type { CanvasTopNavProps, CanvasTopNavOwnProps, CanvasTopNavStyle }
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index 1b75814576..64b5ec997b 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -21,13 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import type { CanvasTopNavProps } from './props'
+import type { CanvasTopNavProps, CanvasTopNavStyle } from './props'
 import { CanvasTopNavTheme } from '@instructure/shared-types'
 
 const generateStyle = (
   componentTheme: CanvasTopNavTheme,
   params: CanvasTopNavProps
-) => {
+): CanvasTopNavStyle => {
   const { lti } = params
 
   return {
@@ -63,6 +63,11 @@ const generateStyle = (
     ltiIcon: {
       label: 'canvasTopNavLtiIcon',
       fontSize: '38px'
+    },
+    menuItems: {
+      label: 'canvasTopNavMenuitems',
+      display: 'flex',
+      height: '50px'
     }
   }
 }

From e3c410f9ca9fd9c68e4826f2540d441286043ff3 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 5 May 2025 16:58:12 +0200
Subject: [PATCH 42/53] refactor(ui-top-nav-bar): asddsads

---
 packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx | 1 -
 packages/ui-top-nav-bar/src/MobileTopNav/index.tsx | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index a1bd30bca2..04199cd3c1 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -173,7 +173,6 @@ const CanvasTopNav = ({
               withBorder={false}
               screenReaderLabel={hamburgerLabel}
               onClick={hamburgerOnClick}
-              // color={lti ? 'secondary' : 'primary-inverse'}
             >
               <IconHamburgerLine />
             </IconButton>
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 778d7293f4..75c278b7ce 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -105,7 +105,7 @@ const MobileTopNav = ({
           <IconButton
             withBackground={false}
             withBorder={false}
-            screenReaderLabel="burger"
+            screenReaderLabel={open ? 'Close menu' : 'Open menu'}
             color={lti ? undefined : 'primary-inverse'}
             onClick={handleToggle}
           >

From 6dfddbaef2f20b0a2c6f2d54f1dd58feb9cb6d86 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Sun, 25 May 2025 16:36:10 +0200
Subject: [PATCH 43/53] chore(ui-top-nav-bar,ui-drilldown,emotion): kk

---
 packages/__docs__/src/App/index.tsx           | 34 +++++++++-----
 packages/__docs__/src/App/props.ts            |  1 -
 packages/emotion/src/index.ts                 |  1 -
 packages/emotion/src/withFunctionalStyle.tsx  | 44 -------------------
 packages/ui-drilldown/src/Drilldown/styles.ts |  1 -
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx |  9 ++--
 .../ui-top-nav-bar/src/CanvasTopNav/props.ts  |  2 +-
 .../src/DesktopTopNav/index.tsx               |  3 +-
 .../ui-top-nav-bar/src/MobileTopNav/index.tsx |  3 +-
 packages/ui-top-nav-bar/src/SubNav/index.tsx  |  3 +-
 packages/ui-top-nav-bar/src/SubNav/props.ts   | 22 +++-------
 packages/ui-top-nav-bar/src/SubNav/styles.tsx |  6 +--
 12 files changed, 38 insertions(+), 91 deletions(-)
 delete mode 100644 packages/emotion/src/withFunctionalStyle.tsx

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index b89a921400..d59d2ce9db 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 import { Route, Routes, useNavigate } from 'react-router-dom'
-import { withStyle } from '@instructure/emotion'
+import { withStyle, InstUISettingsProvider } from '@instructure/emotion'
 import { CanvasTopNav, SubNav } from '@instructure/ui-top-nav-bar'
 import {
   IconAddLine,
@@ -54,7 +54,9 @@ type AppProps = {
 }
 
 type AppState = {
-  menuStack: string[]
+  windowWidth: number
+  open: boolean
+  openMobile: boolean
 }
 
 @withStyle(generateStyle, generateComponentTheme)
@@ -239,14 +241,7 @@ class App extends Component<AppProps, AppState> {
 
     return (
       <div style={{ display: 'flex', flexDirection: 'row' }}>
-        <InstUISettingsProvider
-          style={{
-            position: 'relative',
-            width: '100%',
-            maxWidth: '100%',
-            boxSizing: 'border-box'
-          }}
-        >
+        <InstUISettingsProvider>
           <div style={{ height: '100vh', zIndex: 100 }}>
             {!isMobile && (
               <SideNavBar
@@ -329,7 +324,10 @@ class App extends Component<AppProps, AppState> {
               breadcrumb={{
                 label: 'You are here:',
                 links: [
-                  { href: '#', label: 'Crumb 1' },
+                  {
+                    href: '#',
+                    label: 'Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1'
+                  },
                   { href: '#', label: 'Crumb 2' },
                   { label: 'Home' }
                 ]
@@ -355,10 +353,22 @@ class App extends Component<AppProps, AppState> {
                 this.setState({ openMobile: open })
               }}
               ltiIcon={<IconArcLine />}
-              menuItems={[
+              ltiMenuItems={[
                 { id: 'library', title: 'My Library' },
                 { id: 'share', title: 'Share with me' },
                 { id: 'settings', title: 'Settings' }
+                // { id: 'SubMenu', title: 'SubMenu', options: [ {
+                //     id: 'account',
+                //     label: 'Account',
+                //     renderBeforeTitle: <IconUserLine />,
+                //     subPageId: 'account'
+                //   },
+                //     {
+                //       id: 'courses',
+                //       label: 'Courses',
+                //       renderBeforeTitle: <IconCoursesLine />,
+                //       subPageId: 'courses'
+                //     },] }
               ]}
               currentPageId="library" // ltiCurrentPageID
             />
diff --git a/packages/__docs__/src/App/props.ts b/packages/__docs__/src/App/props.ts
index 03e6a6f5d9..663c3c967b 100644
--- a/packages/__docs__/src/App/props.ts
+++ b/packages/__docs__/src/App/props.ts
@@ -97,7 +97,6 @@ type AppState = {
   changelogData?: DocData
   // the currently shown document
   currentDocData?: DocData
-  lightMode: boolean
 }
 
 type ThemeFunctionsClassic = {
diff --git a/packages/emotion/src/index.ts b/packages/emotion/src/index.ts
index 4e74f22d7d..91b0353dbb 100644
--- a/packages/emotion/src/index.ts
+++ b/packages/emotion/src/index.ts
@@ -27,7 +27,6 @@ export * from '@emotion/react'
 
 export { InstUISettingsProvider } from './InstUISettingsProvider'
 export { withStyle } from './withStyle'
-export { withFunctionalStyle } from './withFunctionalStyle'
 export {
   ThemeablePropValues,
   ThemeablePropTypes,
diff --git a/packages/emotion/src/withFunctionalStyle.tsx b/packages/emotion/src/withFunctionalStyle.tsx
deleted file mode 100644
index b123f777ec..0000000000
--- a/packages/emotion/src/withFunctionalStyle.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useTheme } from './index'
-import React from 'react'
-
-const withFunctionalStyle =
-  <ComponentOwnProps, ComponentStyle>(
-    generateStyles: (props: any, theme: any) => ComponentStyle
-  ) =>
-  (WrappedComponent: any) =>
-  // eslint-disable-next-line react/display-name
-  (originalProps: ComponentOwnProps) => {
-    const theme = useTheme()
-    const styledProps = {
-      styles: generateStyles(originalProps, theme),
-      ...originalProps
-    }
-    return <WrappedComponent {...styledProps} />
-  }
-
-export default withFunctionalStyle
-export { withFunctionalStyle }
diff --git a/packages/ui-drilldown/src/Drilldown/styles.ts b/packages/ui-drilldown/src/Drilldown/styles.ts
index e1ad57bd0f..a0b20442b3 100644
--- a/packages/ui-drilldown/src/Drilldown/styles.ts
+++ b/packages/ui-drilldown/src/Drilldown/styles.ts
@@ -51,7 +51,6 @@ const generateStyle = (
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
       borderColor: componentTheme.borderColor,
-      background: '#334451',
       ...(hasHighlightedOption && {
         '&:focus::before': {
           display: 'none'
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 04199cd3c1..62b19efe2e 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -22,11 +22,10 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { useEffect, useState } from 'react'
 import { DesktopTopNav } from '../DesktopTopNav'
 import { MobileTopNav } from '../MobileTopNav'
-import { InstUISettingsProvider, jsx, useStyle } from '@instructure/emotion'
+import { InstUISettingsProvider, useStyle } from '@instructure/emotion'
 import { IconHamburgerLine } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
@@ -60,7 +59,7 @@ const CanvasTopNav = ({
   hamburgerOnClick,
   hamburgerLabel,
   showDesktopView,
-  menuItems,
+  ltiMenuItems,
   open,
   onOpenChange,
   ltiIcon,
@@ -93,7 +92,7 @@ const CanvasTopNav = ({
       return (
         <Drilldown.Page
           key={item.id}
-          id={item.id} //TODO renderbackbuttonlabel
+          id={item.id}
           renderBackButtonLabel={item?.backButtonLabel}
           renderBeforeChildren={item.renderBeforeMobileMenuItems}
           renderAfterChildren={item.renderAfterMobileMenuItems}
@@ -214,7 +213,7 @@ const CanvasTopNav = ({
                     renderHiddenItemsMenuTriggerLabel={() => ''}
                     currentPageId={currentPageId}
                   >
-                    {menuItems?.map((item: any) => (
+                    {ltiMenuItems?.map((item: any) => (
                       <TopNavBarItem key={item.id} id={item.id}>
                         {item.title}
                       </TopNavBarItem>
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
index 56993a4b43..8d7b22fc52 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
@@ -36,7 +36,7 @@ type CanvasTopNavOwnProps = {
   hamburgerOnClick?: () => void
   hamburgerLabel?: string
   showDesktopView?: boolean
-  menuItems?: any[]
+  ltiMenuItems?: any[]
   open?: boolean
   onOpenChange?: (open: boolean) => void
   ltiIcon?: ReactNode
diff --git a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
index 3bdce4c8c6..a742451a19 100644
--- a/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/DesktopTopNav/index.tsx
@@ -22,9 +22,8 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Children, PropsWithChildren } from 'react'
-import { jsx, useStyle } from '@instructure/emotion'
+import { useStyle } from '@instructure/emotion'
 import type { DesktopTopNavProps } from './props'
 
 import { generateStyle } from './styles'
diff --git a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
index 75c278b7ce..ce81c90576 100644
--- a/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/MobileTopNav/index.tsx
@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import {
   Children,
   Fragment,
@@ -30,7 +29,7 @@ import {
   useEffect,
   useState
 } from 'react'
-import { jsx, useStyle } from '@instructure/emotion'
+import { useStyle } from '@instructure/emotion'
 import type { MobileTopNavProps } from './props'
 
 import { IconButton } from '@instructure/ui-buttons'
diff --git a/packages/ui-top-nav-bar/src/SubNav/index.tsx b/packages/ui-top-nav-bar/src/SubNav/index.tsx
index 25a5733b4c..8ab962f76c 100644
--- a/packages/ui-top-nav-bar/src/SubNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/index.tsx
@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-import { jsx, useStyle } from '@instructure/emotion'
+import { useStyle } from '@instructure/emotion'
 
 import { generateStyle } from './styles'
 import { Link } from '@instructure/ui-link'
diff --git a/packages/ui-top-nav-bar/src/SubNav/props.ts b/packages/ui-top-nav-bar/src/SubNav/props.ts
index 4c7ac51f46..3a2d4dcac3 100644
--- a/packages/ui-top-nav-bar/src/SubNav/props.ts
+++ b/packages/ui-top-nav-bar/src/SubNav/props.ts
@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import { ComponentStyle } from '@instructure/emotion'
+
 type MenuItem = {
   href: string
   title: string
@@ -33,20 +35,10 @@ type SubNavOwnProps = {
   menuItems: MenuItem[]
 }
 
-type SubNavStyle = {
-  container: {
-    [key: string]: string | number
-  }
-  linkContainer: (item: MenuItem) => {
-    [key: string]: string | number
-  }
-  link: (item: MenuItem) => {
-    [key: string]: string | number
-  }
-}
+type SubNavStyle = ComponentStyle<
+  'container' | 'linkContainer' | 'linkContainerSelected' | 'linkOverride'
+>
 
-type SubNavProps = SubNavOwnProps & {
-  styles: SubNavStyle
-}
+type SubNavProps = SubNavOwnProps
 
-export type { SubNavProps, SubNavOwnProps, MenuItem }
+export type { SubNavProps, SubNavOwnProps, MenuItem, SubNavStyle }
diff --git a/packages/ui-top-nav-bar/src/SubNav/styles.tsx b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
index 271ded722b..23e98d4206 100644
--- a/packages/ui-top-nav-bar/src/SubNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/SubNav/styles.tsx
@@ -22,11 +22,7 @@
  * SOFTWARE.
  */
 
-import { ComponentStyle } from '@instructure/emotion'
-
-type SubNavStyle = ComponentStyle<
-  'container' | 'linkContainer' | 'linkContainerSelected' | 'linkOverride'
->
+import { SubNavStyle } from './props'
 
 const generateStyle = (theme: any, _params: any): SubNavStyle => {
   const linkContainerBase = {

From 38a1538f4669d23f8d490e8ad5f756bb95b5a341 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Wed, 28 May 2025 10:21:42 +0200
Subject: [PATCH 44/53] refactor(ui-top-nav-bar): add submenu pages

---
 packages/__docs__/src/App/index.tsx           |  44 +++++---
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 102 ++++++++++--------
 2 files changed, 89 insertions(+), 57 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index d59d2ce9db..a3ee8ba2fe 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -356,19 +356,37 @@ class App extends Component<AppProps, AppState> {
               ltiMenuItems={[
                 { id: 'library', title: 'My Library' },
                 { id: 'share', title: 'Share with me' },
-                { id: 'settings', title: 'Settings' }
-                // { id: 'SubMenu', title: 'SubMenu', options: [ {
-                //     id: 'account',
-                //     label: 'Account',
-                //     renderBeforeTitle: <IconUserLine />,
-                //     subPageId: 'account'
-                //   },
-                //     {
-                //       id: 'courses',
-                //       label: 'Courses',
-                //       renderBeforeTitle: <IconCoursesLine />,
-                //       subPageId: 'courses'
-                //     },] }
+                { id: 'settings', title: 'Settings' },
+                {
+                  id: 'submenu',
+                  title: 'SubMenu',
+                  options: [
+                    {
+                      id: 'account',
+                      label: 'Account',
+                      renderBeforeTitle: <IconUserLine />,
+                      subPageId: 'accountPage',
+                      subOptions: [
+                        {
+                          id: 'profile',
+                          label: 'Profile Settings',
+                          href: '/profile'
+                        },
+                        {
+                          id: 'privacy',
+                          label: 'Privacy',
+                          href: '/privacy'
+                        }
+                      ]
+                    },
+                    {
+                      id: 'courses',
+                      label: 'Courses',
+                      renderBeforeTitle: <IconCoursesLine />,
+                      href: '/courses'
+                    }
+                  ]
+                }
               ]}
               currentPageId="library" // ltiCurrentPageID
             />
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 62b19efe2e..3e1ff6a23e 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -213,51 +213,65 @@ const CanvasTopNav = ({
                     renderHiddenItemsMenuTriggerLabel={() => ''}
                     currentPageId={currentPageId}
                   >
-                    {ltiMenuItems?.map((item: any) => (
-                      <TopNavBarItem key={item.id} id={item.id}>
-                        {item.title}
-                      </TopNavBarItem>
-                    ))}
-                    <TopNavBarItem
-                      id="submenu"
-                      renderSubmenu={
-                        <Drilldown rootPageId="root">
-                          <Drilldown.Page id="root">
-                            <Drilldown.Option
-                              id="rootOption1"
-                              subPageId="secondPage"
-                            >
-                              Link One
-                            </Drilldown.Option>
-                            <Drilldown.Option
-                              id="rootOption2"
-                              href="/#TopNavBar"
-                            >
-                              Link Two
-                            </Drilldown.Option>
-                            <Drilldown.Option
-                              id="rootOption3"
-                              href="/#TopNavBar"
-                            >
-                              Link Three
-                            </Drilldown.Option>
-                          </Drilldown.Page>
-                          <Drilldown.Page id="secondPage">
-                            <Drilldown.Option id="secondPageOption1">
-                              Level 2 Option One
-                            </Drilldown.Option>
-                            <Drilldown.Option
-                              id="secondPageOption2"
-                              href="/#TopNavBar"
-                            >
-                              Level 2 Option Two
-                            </Drilldown.Option>
-                          </Drilldown.Page>
-                        </Drilldown>
+                    {ltiMenuItems?.map((item: any) => {
+                      // Check if this item has a submenu
+                      if (item.options?.length) {
+                        return (
+                          <TopNavBarItem
+                            key={item.id}
+                            id={item.id}
+                            renderSubmenu={
+                              <Drilldown rootPageId={item.id}>
+                                {/* Root Page */}
+                                <Drilldown.Page id={item.id}>
+                                  {item.options.map((option: any) => (
+                                    <Drilldown.Option
+                                      key={option.id}
+                                      id={option.id}
+                                      subPageId={option.subPageId}
+                                      href={option.href}
+                                    >
+                                      {option.renderBeforeTitle}
+                                      {option.label}
+                                    </Drilldown.Option>
+                                  ))}
+                                </Drilldown.Page>
+
+                                {/* Optional nested pages if subPageId is used */}
+                                {item.options
+                                  .filter((opt: any) => opt.subOptions?.length)
+                                  .map((opt: any) => (
+                                    <Drilldown.Page
+                                      key={opt.subPageId}
+                                      id={opt.subPageId}
+                                    >
+                                      {opt.subOptions.map((subOpt: any) => (
+                                        <Drilldown.Option
+                                          key={subOpt.id}
+                                          id={subOpt.id}
+                                          href={subOpt.href}
+                                        >
+                                          {subOpt.renderBeforeTitle}
+                                          {subOpt.label}
+                                        </Drilldown.Option>
+                                      ))}
+                                    </Drilldown.Page>
+                                  ))}
+                              </Drilldown>
+                            }
+                          >
+                            {item.title}
+                          </TopNavBarItem>
+                        )
                       }
-                    >
-                      Submenu
-                    </TopNavBarItem>
+
+                      // Top-level item with no submenu
+                      return (
+                        <TopNavBarItem key={item.id} id={item.id}>
+                          {item.title}
+                        </TopNavBarItem>
+                      )
+                    })}
                   </TopNavBarMenuItems>
                 </TopNavBarContext.Provider>
               </InstUISettingsProvider>

From 38f2e320dc59c06f9005806644d603cd3410b3e8 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 5 Jun 2025 14:00:24 +0200
Subject: [PATCH 45/53] feat(ui-top-nav-bar,shared-types): style fix

---
 packages/__docs__/src/App/index.tsx                  | 2 +-
 packages/shared-types/src/ComponentThemeVariables.ts | 1 +
 packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx   | 4 ++++
 packages/ui-top-nav-bar/src/CanvasTopNav/props.ts    | 1 +
 packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx  | 4 ++++
 packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts    | 3 ++-
 6 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index a3ee8ba2fe..2f4462c062 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -388,7 +388,7 @@ class App extends Component<AppProps, AppState> {
                   ]
                 }
               ]}
-              currentPageId="library" // ltiCurrentPageID
+              currentPageId="share" // ltiCurrentPageID
             />
             <Tray
               label="Courses"
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 78eaf1a7a4..11179d1eca 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -1771,6 +1771,7 @@ export type CanvasTopNavTheme = {
   drilldownBorderColor: string
   topNavBarItemColor: string
   topNavBarItemActiveIndicatorColor: string
+  optionSeparatorColor: string
 }
 
 export interface ThemeVariables {
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 3e1ff6a23e..6b69a4f93f 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -40,6 +40,7 @@ import {
   DeepPartial,
   DrilldownTheme,
   OptionsItemTheme,
+  OptionsSeparatorTheme,
   TopNavBarItemTheme
 } from '@instructure/shared-types'
 
@@ -152,6 +153,9 @@ const CanvasTopNav = ({
               },
               Drilldown: {
                 ...(styles.drilldownOverride as DeepPartial<DrilldownTheme>)
+              },
+              'Options.Separator': {
+                ...(styles.optionSeparatorOverride as DeepPartial<OptionsSeparatorTheme>)
               }
             }
           }}
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
index 8d7b22fc52..5ddfd06615 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/props.ts
@@ -50,6 +50,7 @@ type CanvasTopNavStyle = ComponentStyle<
   | 'topNavBarItemOverride'
   | 'ltiIcon'
   | 'menuItems'
+  | 'optionSeparatorOverride'
 >
 
 type CanvasTopNavProps = CanvasTopNavOwnProps & PropsWithChildren
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
index 64b5ec997b..47c6800dd0 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/styles.tsx
@@ -56,6 +56,10 @@ const generateStyle = (
       gap: '8px',
       alignItems: 'center'
     },
+    optionSeparatorOverride: {
+      background: componentTheme.optionSeparatorColor,
+      margin: '0'
+    },
     topNavBarItemOverride: {
       color: componentTheme.topNavBarItemColor,
       activeIndicatorColor: componentTheme.topNavBarItemActiveIndicatorColor
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts b/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
index cfdb38ab3a..aa8c9d69e4 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/theme.ts
@@ -35,8 +35,9 @@ const generateComponentTheme = (theme: Theme): CanvasTopNavTheme => {
     optionColor: theme?.colors?.contrasts?.white1010,
     optionHighlightedLabelColorLti: theme?.colors?.contrasts?.grey125125,
     optionHighlightedLabelColor: theme?.colors?.contrasts?.white1010,
-    drilldownBorderColorLti: theme?.colors?.contrasts?.grey1424,
+    drilldownBorderColorLti: theme?.colors?.contrasts?.grey1111,
     drilldownBorderColor: theme?.colors?.contrasts?.grey100100,
+    optionSeparatorColor: theme?.colors?.contrasts?.grey1424,
     topNavBarItemColor: theme?.colors?.contrasts?.grey125125,
     topNavBarItemActiveIndicatorColor: theme?.colors?.contrasts?.grey125125
   }

From 01b66ab1374821847bf329cacec892ac07f1db45 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Tue, 24 Jun 2025 16:08:06 +0200
Subject: [PATCH 46/53] refactor(ui-top-nav-bar): change api

---
 packages/__docs__/src/App/index.tsx           | 183 ++++++++++++++----
 .../ui-top-nav-bar/src/CanvasTopNav/index.tsx | 104 +---------
 2 files changed, 148 insertions(+), 139 deletions(-)

diff --git a/packages/__docs__/src/App/index.tsx b/packages/__docs__/src/App/index.tsx
index 2f4462c062..e60510159e 100644
--- a/packages/__docs__/src/App/index.tsx
+++ b/packages/__docs__/src/App/index.tsx
@@ -46,8 +46,10 @@ import { Tray } from '@instructure/ui-tray'
 import { Img } from '@instructure/ui-img'
 import { View } from '@instructure/ui-view'
 import { SideNavBar } from '@instructure/ui-side-nav-bar'
+import { TopNavBar } from '@instructure/ui-top-nav-bar'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import Link from '../Link'
+import { Drilldown } from '@instructure/ui-drilldown'
 
 type AppProps = {
   navigate: (path: string, options?: { replace: boolean }) => void
@@ -239,6 +241,121 @@ class App extends Component<AppProps, AppState> {
       }
     ]
 
+    const drillDown = (
+      <Drilldown
+        rootPageId={'default'} //renderBackButtonLabel={item?.backButtonLabel}
+      >
+        <Drilldown.Page id={'default'}>
+          <Drilldown.Group key={'default'} id={'default'}>
+            <Drilldown.Option
+              id={'account'}
+              subPageId={'account'}
+              afterLabelContentVAlign={'center'}
+            >
+              <div>
+                <IconUserLine /> Account
+              </div>
+            </Drilldown.Option>
+            <Drilldown.Option
+              id={'courses'}
+              subPageId={'courses'}
+              afterLabelContentVAlign={'center'}
+            >
+              <div>
+                <IconCoursesLine /> Courses
+              </div>
+            </Drilldown.Option>
+            <Drilldown.Option
+              id={'dashboard'}
+              afterLabelContentVAlign={'center'}
+              onOptionClick={() => {
+                this.props.navigate('/dashboard', { replace: true })
+                this.setState({ openMobile: false })
+              }}
+            >
+              <div>
+                <IconDashboardLine /> Dashboard
+              </div>
+            </Drilldown.Option>
+            <Drilldown.Option
+              id={'help'}
+              afterLabelContentVAlign={'center'}
+              onOptionClick={() => alert('Help clicked')}
+            >
+              <div>
+                <IconQuestionLine /> Help
+              </div>
+            </Drilldown.Option>
+          </Drilldown.Group>
+        </Drilldown.Page>
+        <Drilldown.Page
+          id={'account'}
+          renderBackButtonLabel={'Account'}
+          renderAfterChildren={
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+              aliquet erat in orci semper fringilla. Nullam suscipit mollis mi,
+              at vehicula magna vulputate eu. Cras mattis felis id quam vehicula
+              euismod. Nulla dolor enim, ornare in odio a, molestie dictum
+              ligula. Nullam maximus et dolor eget porttitor. Vestibulum
+              faucibus viverra pellentesque. Duis lorem lectus, porta vitae
+              aliquam vitae, vehicula sagittis nulla. Aenean sagittis congue
+              rhoncus. Cras laoreet eu nulla eu dignissim. Maecenas sed massa
+              nisi. Suspendisse pellentesque, metus sed ultricies porta, justo
+              tellus pulvinar diam, ac ornare massa nibh quis purus. Duis erat
+              ipsum, pellentesque in diam non, luctus accumsan metus. In ipsum
+              tellus, ullamcorper a faucibus a, venenatis ut urna. Sed at rutrum
+              turpis.
+            </p>
+          }
+          renderBeforeChildren={
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+            </div>
+          }
+        >
+          <Drilldown.Group key={'account'} id={'account'}>
+            <Drilldown.Option
+              id={'accountinfo1'}
+              afterLabelContentVAlign={'center'}
+            >
+              <div>Account info 1</div>
+            </Drilldown.Option>
+            <Drilldown.Option
+              id={'accountinfo2'}
+              afterLabelContentVAlign={'center'}
+            >
+              <div>Account info 2</div>
+            </Drilldown.Option>
+          </Drilldown.Group>
+        </Drilldown.Page>
+        <Drilldown.Page id={'courses'} renderBackButtonLabel={'Courses'}>
+          <Drilldown.Group key={'courses'} id={'courses'}>
+            <Drilldown.Option
+              id={'courses1'}
+              afterLabelContentVAlign={'center'}
+              onOptionClick={() => {
+                this.props.navigate('/course1', { replace: true })
+                this.setState({ openMobile: false })
+              }}
+            >
+              <div>Courses1</div>
+            </Drilldown.Option>
+            <Drilldown.Option
+              id={'courses2'}
+              afterLabelContentVAlign={'center'}
+              onOptionClick={() => {
+                this.props.navigate('/course2', { replace: true })
+                this.setState({ openMobile: false })
+              }}
+            >
+              <div>Courses2</div>
+            </Drilldown.Option>
+          </Drilldown.Group>
+        </Drilldown.Page>
+      </Drilldown>
+    )
+
     return (
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <InstUISettingsProvider>
@@ -346,49 +463,41 @@ class App extends Component<AppProps, AppState> {
                   onClick: () => alert('Alerts clicked')
                 }
               ]}
-              mobileMenu={menuArray}
+              mobileMenu={drillDown}
               open={this.state.openMobile} // jobb nev, pl mobileMenuOpen
               onOpenChange={(open: boolean) => {
                 // szinten
                 this.setState({ openMobile: open })
               }}
               ltiIcon={<IconArcLine />}
-              ltiMenuItems={[
-                { id: 'library', title: 'My Library' },
-                { id: 'share', title: 'Share with me' },
-                { id: 'settings', title: 'Settings' },
-                {
-                  id: 'submenu',
-                  title: 'SubMenu',
-                  options: [
-                    {
-                      id: 'account',
-                      label: 'Account',
-                      renderBeforeTitle: <IconUserLine />,
-                      subPageId: 'accountPage',
-                      subOptions: [
-                        {
-                          id: 'profile',
-                          label: 'Profile Settings',
-                          href: '/profile'
-                        },
-                        {
-                          id: 'privacy',
-                          label: 'Privacy',
-                          href: '/privacy'
-                        }
-                      ]
-                    },
-                    {
-                      id: 'courses',
-                      label: 'Courses',
-                      renderBeforeTitle: <IconCoursesLine />,
-                      href: '/courses'
-                    }
-                  ]
-                }
-              ]}
-              currentPageId="share" // ltiCurrentPageID
+              ltiMenuItems={
+                <TopNavBar.MenuItems
+                  listLabel="Page navigation"
+                  currentPageId="OverviewPage"
+                  renderHiddenItemsMenuTriggerLabel={(hiddenChildrenCount) =>
+                    `${hiddenChildrenCount} More`
+                  }
+                >
+                  <TopNavBar.Item id="OverviewPage" href="/#TopNavBar">
+                    Overview
+                  </TopNavBar.Item>
+                  <TopNavBar.Item id="AdminPage" href="/#TopNavBar">
+                    Admin
+                  </TopNavBar.Item>
+                  <TopNavBar.Item id="SettingsPage" href="/#TopNavBar">
+                    Settings
+                  </TopNavBar.Item>
+                  <TopNavBar.Item id="MapsPage" href="/#TopNavBar">
+                    Maps
+                  </TopNavBar.Item>
+                  <TopNavBar.Item id="AssessmentsPage" href="/#TopNavBar">
+                    Assessments
+                  </TopNavBar.Item>
+                  <TopNavBar.Item id="CommunityPage" href="/#TopNavBar">
+                    Community
+                  </TopNavBar.Item>
+                </TopNavBar.MenuItems>
+              }
             />
             <Tray
               label="Courses"
diff --git a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
index 6b69a4f93f..cac2e30483 100644
--- a/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
+++ b/packages/ui-top-nav-bar/src/CanvasTopNav/index.tsx
@@ -30,9 +30,6 @@ import { IconHamburgerLine } from '@instructure/ui-icons'
 import { Button, IconButton } from '@instructure/ui-buttons'
 import { Breadcrumb } from '@instructure/ui-breadcrumb'
 import { generateStyle } from './styles'
-import { Drilldown } from '@instructure/ui-drilldown'
-import { TopNavBarMenuItems } from '../TopNavBar/TopNavBarMenuItems'
-import { TopNavBarItem } from '../TopNavBar/TopNavBarItem'
 import { CanvasTopNavProps } from './props'
 import generateComponentTheme from './theme'
 import TopNavBarContext from '../TopNavBar/TopNavBarContext'
@@ -88,38 +85,6 @@ const CanvasTopNav = ({
     displayName: 'CanvasTopNav'
   })
 
-  const renderDrilldownPages = (items: any) => {
-    return items.map((item: any) => {
-      return (
-        <Drilldown.Page
-          key={item.id}
-          id={item.id}
-          renderBackButtonLabel={item?.backButtonLabel}
-          renderBeforeChildren={item.renderBeforeMobileMenuItems}
-          renderAfterChildren={item.renderAfterMobileMenuItems}
-        >
-          {item.options.map((option: any) => {
-            return (
-              <Drilldown.Group key={option.id} id={option.id}>
-                <Drilldown.Option
-                  id={option.id}
-                  subPageId={option.subPageId}
-                  onOptionClick={option.onClick}
-                  afterLabelContentVAlign={'center'}
-                >
-                  <div css={styles.optionContainer}>
-                    {option.renderBeforeTitle}
-                    {option.label}
-                  </div>
-                </Drilldown.Option>
-              </Drilldown.Group>
-            )
-          })}
-        </Drilldown.Page>
-      )
-    })
-  }
-
   // Render mobile or desktop nav based on screen size
   return isSmallScreen ? (
     <MobileTopNav
@@ -160,9 +125,7 @@ const CanvasTopNav = ({
             }
           }}
         >
-          <Drilldown rootPageId={'default'}>
-            {renderDrilldownPages(mobileMenu)}
-          </Drilldown>
+          {mobileMenu}
         </InstUISettingsProvider>
       </MobileTopNav.Menu>
     </MobileTopNav>
@@ -213,70 +176,7 @@ const CanvasTopNav = ({
                     inverseColor: true
                   }}
                 >
-                  <TopNavBarMenuItems
-                    renderHiddenItemsMenuTriggerLabel={() => ''}
-                    currentPageId={currentPageId}
-                  >
-                    {ltiMenuItems?.map((item: any) => {
-                      // Check if this item has a submenu
-                      if (item.options?.length) {
-                        return (
-                          <TopNavBarItem
-                            key={item.id}
-                            id={item.id}
-                            renderSubmenu={
-                              <Drilldown rootPageId={item.id}>
-                                {/* Root Page */}
-                                <Drilldown.Page id={item.id}>
-                                  {item.options.map((option: any) => (
-                                    <Drilldown.Option
-                                      key={option.id}
-                                      id={option.id}
-                                      subPageId={option.subPageId}
-                                      href={option.href}
-                                    >
-                                      {option.renderBeforeTitle}
-                                      {option.label}
-                                    </Drilldown.Option>
-                                  ))}
-                                </Drilldown.Page>
-
-                                {/* Optional nested pages if subPageId is used */}
-                                {item.options
-                                  .filter((opt: any) => opt.subOptions?.length)
-                                  .map((opt: any) => (
-                                    <Drilldown.Page
-                                      key={opt.subPageId}
-                                      id={opt.subPageId}
-                                    >
-                                      {opt.subOptions.map((subOpt: any) => (
-                                        <Drilldown.Option
-                                          key={subOpt.id}
-                                          id={subOpt.id}
-                                          href={subOpt.href}
-                                        >
-                                          {subOpt.renderBeforeTitle}
-                                          {subOpt.label}
-                                        </Drilldown.Option>
-                                      ))}
-                                    </Drilldown.Page>
-                                  ))}
-                              </Drilldown>
-                            }
-                          >
-                            {item.title}
-                          </TopNavBarItem>
-                        )
-                      }
-
-                      // Top-level item with no submenu
-                      return (
-                        <TopNavBarItem key={item.id} id={item.id}>
-                          {item.title}
-                        </TopNavBarItem>
-                      )
-                    })}
-                  </TopNavBarMenuItems>
+                  {ltiMenuItems}
                 </TopNavBarContext.Provider>
               </InstUISettingsProvider>
             </div>

From b236c78fdcea97c177100268c462dc84293f9caf Mon Sep 17 00:00:00 2001
From: Nandor_Czegledi <nandor.czegledi@instructure.com>
Date: Wed, 25 Jun 2025 12:03:02 +0200
Subject: [PATCH 47/53] test(ui-top-nav-bar): add tests

---
 cypress.config.ts                             |  34 +-
 cypress/component/SubNav.cy.tsx               |  67 +++
 cypress/e2e/CanvasTopNav.cy.ts                | 424 ++++++++++++++++++
 cypress/support/e2e.ts                        |  20 +
 .../src/SubNav/__new-tests__/SubNav.test.tsx  | 124 +++++
 5 files changed, 656 insertions(+), 13 deletions(-)
 create mode 100644 cypress/component/SubNav.cy.tsx
 create mode 100644 cypress/e2e/CanvasTopNav.cy.ts
 create mode 100644 cypress/support/e2e.ts
 create mode 100644 packages/ui-top-nav-bar/src/SubNav/__new-tests__/SubNav.test.tsx

diff --git a/cypress.config.ts b/cypress.config.ts
index cc357cc740..acd0399f03 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -21,12 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { defineConfig } from 'cypress'
+import { defineConfig } from "cypress";
 
 // TODO figure out why this isn't working:
 // import webpackConfig from '@instructure/ui-webpack-config'
 // eslint-disable-next-line @instructure/no-relative-imports
-import webpackConfig from './packages/ui-karma-config/lib/legacyBaseWebpackConfig'
+import webpackConfig from "./packages/ui-karma-config/lib/legacyBaseWebpackConfig";
 
 export default defineConfig({
   numTestsKeptInMemory: 1,
@@ -37,21 +37,29 @@ export default defineConfig({
   execTimeout: 120000,
   taskTimeout: 60000,
   retries: {
-    experimentalStrategy: 'detect-flake-and-pass-on-threshold',
+    experimentalStrategy: "detect-flake-and-pass-on-threshold",
     experimentalOptions: {
-      maxRetries: 10,
-      passesRequired: 1
+      maxRetries: 2,
+      passesRequired: 1,
     },
     openMode: true,
-    runMode: true
+    runMode: true,
   },
+
   screenshotOnRunFailure: false,
+
   component: {
-    excludeSpecPattern: 'regression-test/**',
+    excludeSpecPattern: "regression-test/**",
     devServer: {
-      framework: 'react',
-      bundler: 'webpack',
-      webpackConfig
-    }
-  }
-})
+      framework: "react",
+      bundler: "webpack",
+      webpackConfig,
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
diff --git a/cypress/component/SubNav.cy.tsx b/cypress/component/SubNav.cy.tsx
new file mode 100644
index 0000000000..7fc116bf9a
--- /dev/null
+++ b/cypress/component/SubNav.cy.tsx
@@ -0,0 +1,67 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import { SubNav } from '../../packages/ui-top-nav-bar'
+import '../support/component'
+import 'cypress-real-events'
+
+
+describe('<SubNav/>', () => {
+  it('should call onClick and redirect when item is clicked', async () => {
+    const onClickSpy = cy.spy().as('onClickSpy')
+
+    cy.mount(
+      <SubNav
+        menuItems={[
+          { title: 'Home', href: '#', selected: true },
+          { title: 'Announcements', href: '#', selected: false },
+          { title: 'Assignments', href: '#-test', selected: false, onClick: onClickSpy }
+        ]}
+      />
+    )
+    cy.contains('Assignments').realClick()
+
+    cy.get('@onClickSpy').should('have.been.called')
+    cy.url().should('contain', '#-test')
+  })
+
+  it('should be able to select with keyboard', async () => {
+    const onClickSpy = cy.spy().as('onClickSpy')
+    cy.mount(
+      <SubNav
+        menuItems={[
+          { title: 'Home', href: '#'},
+          { title: 'Announcements', href: '#-test2', selected: false, onClick: onClickSpy },
+          { title: 'Assignments', href: '#-test', selected: true }
+        ]}
+      />
+    )
+    cy.contains('Home').focus()
+    cy.realPress(['Tab']).wait(100)
+    cy.realPress(['Enter']).wait(100)
+
+    cy.get('@onClickSpy').should('have.been.called')
+    cy.url().should('contain', '#-test2')
+  })
+})
diff --git a/cypress/e2e/CanvasTopNav.cy.ts b/cypress/e2e/CanvasTopNav.cy.ts
new file mode 100644
index 0000000000..9d44058504
--- /dev/null
+++ b/cypress/e2e/CanvasTopNav.cy.ts
@@ -0,0 +1,424 @@
+describe('New TopNavBar', () => {
+  describe('SideNavBar', () => {
+    it('should change URL on SideNavBar item selection', () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.url().should('not.contain', 'studio')
+      cy.contains('Studio').should('be.visible')
+
+      cy.contains('Studio')
+        .click().wait(100)
+
+      cy.url().should('contain', '/studio')
+
+      cy.contains('Account')
+        .click().wait(100)
+
+      cy.url().should('contain', '/account')
+
+      cy.contains('Courses')
+        .click().wait(100)
+      cy.contains('Course 1')
+        .click().wait(100)
+
+      cy.url().should('contain', '/course1')
+    })
+
+    it('should trigger onclick callback on SideNavBar item selection', () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.on('window:alert', cy.stub().as('alertStub'))
+      const expectedAlertText = 'Help clicked'
+
+      cy.contains('Help')
+        .click().wait(100)
+
+      cy.get('@alertStub')
+        .should('have.been.calledOnceWith', expectedAlertText)
+    })
+
+    it('should show main navigation as SideNavBar with labelled items', async () => {
+      cy.visit('http://localhost:9090/')
+  
+      cy.contains('This is home').should('exist')
+      cy.get('nav[data-cid="SideNavBar"]').as('SideNavBar').should('exist')
+  
+      cy.get('@SideNavBar').find('li').should('have.length', 6)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('button', 'Minimize SideNavBar').should('be.visible')
+    })
+
+    it('should minimize SideNavBar and show only icons as items', async () => {
+      cy.visit('http://localhost:9090/')
+  
+      cy.contains('This is home').should('exist')
+      cy.get('li[class$="-navigation__list"]').should('have.length', 6)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('button', 'Minimize SideNavBar')
+        .click().wait(100)
+  
+      cy.get('li[class$="-navigation__list"]').should('have.length', 6)
+  
+      cy.contains('Account').should('not.be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('not.be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('not.be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+    })
+
+    it('should show main navigation as topNavBar and burger menu in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:9090')
+  
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-mobileTopNavTopBar"]').as('TopNav').should('exist')
+      cy.get('@TopNav').find('svg[name="IconAnalytics"]').should('be.visible')
+      cy.get('@TopNav').find('svg[name="IconAlerts"]').should('be.visible')
+      cy.contains('button', 'burger').should('be.visible')
+  
+      cy.contains('Account').should('not.be.visible')
+      cy.get('svg[name="IconUser"]').should('not.be.visible')
+      cy.contains('Courses').should('not.be.visible')
+      cy.get('svg[name="IconCourses"]').should('not.be.visible')
+      cy.contains('Help').should('not.be.visible')
+      cy.get('svg[name="IconQuestion"]').should('not.be.visible')
+      
+      cy.contains('button', 'burger')
+        .click().wait(100)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('Courses')
+        .click().wait(100)
+  
+      cy.contains('Courses1').should('be.visible')
+  
+      cy.contains('Back')
+        .click().wait(100)
+  
+      cy.get('Courses1').should('not.exist')
+  
+      cy.get('svg[name="IconX"]').closest('button')
+        .click().wait(100)
+  
+      cy.contains('Courses').should('not.be.visible')
+    })
+
+    it('should close burger menu after item selection in mobile view', async () => {
+      cy.viewport(300, 400) 
+      cy.visit('http://localhost:9090/')
+  
+      cy.contains('This is the dashboard').should('not.exist')
+      cy.get('ul[class$="-options__list"]').should('not.be.visible')
+  
+      cy.contains('button', 'burger')
+        .click().wait(100)
+  
+      cy.contains('Dashboard').should('be.visible')
+      cy.get('ul[class$="-options__list"]').should('be.visible')
+  
+      cy.contains('Dashboard')
+        .click().wait(100)
+  
+      cy.contains('This is the dashboard').should('be.visible')
+      cy.contains('Dashboard').should('not.be.visible')
+      cy.get('ul[class$="-options__list"]').should('not.be.visible')
+    })
+  })
+
+  describe('Tray', () => {
+    it('should open and close SideNav Tray properly', async () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.contains('button', 'Courses')
+        .click().wait(100)
+
+      cy.contains('Course 1').should('be.visible')
+      cy.contains('Course 2').should('be.visible')
+
+      cy.get('svg[name="IconX"]').closest('button')
+        .click().wait(100)
+
+      cy.contains('Course 1').should('not.be.visible')
+      cy.contains('Course 2').should('not.be.visible')
+    })
+
+    it('should close SideNav Tray menu after item selection', async () => {
+      cy.visit('http://localhost:9090/')
+  
+      cy.contains('This is the first course home page').should('not.exist')
+      cy.get('span[data-cid="Tray"]').should('not.exist')
+      cy.contains('Course 2').should('not.exist')
+  
+      cy.contains('Courses')
+        .click().wait(100)
+  
+      cy.get('span[data-cid="Tray"]').should('be.visible')
+      cy.contains('Course 2').should('be.visible')
+  
+      cy.contains('Course 1')
+        .click().wait(100)
+  
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('span[data-cid="Tray"]').should('not.be.visible')
+      cy.contains('Course 2').should('not.be.visible')
+    })
+  })
+
+  describe('LTI', () => {
+    it('should display the LTI topNavBar only on specific pages', () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.get('div[class$="-desktopTopNavContainer"]')
+        .should('not.exist')
+
+      cy.contains('Studio')
+        .click().wait(100)
+
+      cy.get('div[class$="-desktopTopNavContainer"]')
+        .should('exist')
+    })
+
+    it('should show LTI topNavBar menu items', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.get('div[class$="-desktopTopNavStart"]').as('menu')
+        .should('exist')
+
+      cy.get('@menu')
+        .find('li').should('have.length', 4)
+    })
+
+    it('should highlight selected LTI topNavBar menu item', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .find('li').eq(0).as('firstMenuItem')
+
+      cy.get('@firstMenuItem').find('button')
+        .should('have.attr', 'aria-current', 'page')
+
+      cy.get('@firstMenuItem').find('div[class$="-topNavBarItem__container"]')
+        .then(($container) => {
+          cy.window().then((win) => {
+            const afterStyles = win.getComputedStyle($container[0], '::after')
+
+            expect(parseFloat(afterStyles.getPropertyValue('height'))).to.be.greaterThan(0)
+          })
+        })
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .find('li').eq(1).as('secondMenuItem')
+
+      cy.get('@secondMenuItem')
+        .find('button').should('not.have.attr', 'aria-current')
+    })
+
+    it('should highlight focused LTI topNavBar menu item', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.contains('Settings').closest('button').as('button')
+
+      cy.get('@button').focus()
+        .then(($button) => {
+          cy.window().then((win) => {
+            const beforeStyles = win.getComputedStyle($button[0], '::before')
+            const border = beforeStyles.getPropertyValue('border')
+      
+            expect(border).to.contains('2px solid')
+          })
+        })
+    })
+
+    it('should show LTI topNavBar SubMenu as menuitem', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .find('li').eq(3).as('subMenu')
+
+      cy.get('@subMenu').click().wait(100)
+
+      cy.contains('Link One').should('be.visible')
+
+      cy.contains('Link One').click().wait(100)
+
+      cy.contains('Level 2 Option One').should('be.visible')
+      cy.get('Link One').should('not.exist')
+
+      cy.contains('Back').click().wait(100)
+
+      cy.contains('Link One').should('be.visible')
+
+      cy.contains('Link Two').click().wait(100)
+
+      cy.url().should('contain', '/#TopNavBar')
+      cy.get('Link Two').should('not.exist')
+    })
+
+    it('should show LTI topNavBar buttons', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.get('div[class$="-desktopTopNavEnd"]')
+        .find('button').should('have.length', 2)
+
+      cy.get('div[class$="-desktopTopNavEnd"]')
+        .find('button').eq(0).as('AddLineButton')
+
+      cy.get('@AddLineButton')
+        .should('have.text', 'AddLine')
+
+      cy.get('@AddLineButton').find('svg[name="IconAdd"]')
+        .should('exist')
+    })
+
+    it('should trigger onclick callback on LTI topNavBar button click', () => {
+      cy.visit('http://localhost:9090/studio')
+
+      cy.on('window:alert', cy.stub().as('alertStub'))
+
+      cy.contains('AddLine')
+        .click().wait(100)
+
+      cy.get('@alertStub')
+        .should('have.been.calledWith', 'Button 1')
+
+        cy.contains('AdminLine')
+        .click().wait(100)
+
+      cy.get('@alertStub')
+        .should('have.been.calledWith', 'Button 2')
+    })
+
+    it('should not show LTI topNavBar menu items and buttons in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:9090/studio')
+
+      cy.wait(100)
+      cy.contains('LTI VIEW TEST').should('exist')
+
+      cy.get('AddLine').should('not.exist')
+      cy.get('svg[name="IconAdd"]').should('not.exist')
+
+      cy.get('div[class$="-topNavBarMenuItems"]').should('not.exist')
+      cy.get('Settings').should('not.exist')
+      cy.get('Submenu').should('not.exist')
+    })
+
+    it('should close LTI TopNav SubMenu after item selection', async () => {
+      cy.visit('http://localhost:9090/studio')
+  
+      cy.contains('LTI VIEW TEST').should('be.visible')
+      cy.get('ul[class$="-options__list"]').should('not.exist')
+  
+      cy.contains('Submenu')
+        .click().wait(100)
+  
+      cy.get('ul[class$="-options__list"]').should('be.visible')
+      cy.contains('Link One').should('be.visible')
+  
+      cy.contains('Link Two')
+        .click().wait(100)
+  
+      cy.get('ul[class$="-options__list"]').should('not.exist')
+      cy.contains('Link One').should('not.exist')
+    })
+  })
+
+  describe('SubNav', () => {
+    it('should show subNav on specific page', () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-subNavContainer"]').should('not.exist')
+      cy.contains('Announcements').should('not.exist')
+
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Course 1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('div[class$="-subNavContainer"]').should('exist')
+      cy.contains('Announcements').should('be.visible')
+    })
+
+    it('should show subNav in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:9090/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-subNavContainer"]').should('not.exist')
+      cy.contains('Announcements').should('not.exist')
+
+      cy.contains('button', 'burger').click().wait(100)
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Courses1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('div[class$="-subNavContainer"]').should('exist')
+      cy.contains('Announcements').should('be.visible')
+    })
+  })
+
+  describe('Breadcrumbs', () => {
+    it('should show Breadcrumbs', () => {
+      cy.visit('http://localhost:9090/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('ol[class$="-breadcrumb"]').should('not.be.visible')
+      cy.contains('Crumb 1').should('not.be.visible')
+      cy.url().should('not.contain', '#crumb1')
+
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Course 1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('ol[class$="-breadcrumb"]').should('be.visible')
+      cy.contains('Crumb 1').should('be.visible')
+
+      cy.contains('Crumb 1').click().wait(100)
+      cy.url().should('contain', '#crumb1')
+    })
+
+    it('should not show Breadcrumbs in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:9090/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('ol[class$="-breadcrumb"]').should('not.exist')
+      cy.contains('Crumb 1').should('not.exist')
+
+      cy.contains('button', 'burger').click().wait(100)
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Courses1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('ol[class$="-breadcrumb"]').should('not.exist')
+      cy.contains('Crumb 1').should('not.exist')
+    })
+  })
+})
\ No newline at end of file
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
new file mode 100644
index 0000000000..f80f74f8e1
--- /dev/null
+++ b/cypress/support/e2e.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file
diff --git a/packages/ui-top-nav-bar/src/SubNav/__new-tests__/SubNav.test.tsx b/packages/ui-top-nav-bar/src/SubNav/__new-tests__/SubNav.test.tsx
new file mode 100644
index 0000000000..b07e58dfd3
--- /dev/null
+++ b/packages/ui-top-nav-bar/src/SubNav/__new-tests__/SubNav.test.tsx
@@ -0,0 +1,124 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+import { SubNav } from '../index'
+
+const menuItems = [
+  { title: 'Home', href: 'www.google.com', selected: true },
+  { title: 'Announcements', href: 'http://www.google.com', selected: false },
+  { title: 'Assignments', href: 'https://instructure.design/', selected: false }
+]
+
+describe('<SubNav />', () => {
+  it('should render SubNav', async () => {
+    const {container} = render(
+      <SubNav
+        menuItems={menuItems}
+      />
+    )
+    const subNav = container.querySelector('[class$="-subNavContainer"]')
+
+    expect(subNav).toBeInTheDocument()
+  })
+
+  it('should render items', async () => {
+    const {container} = render(
+      <SubNav
+        menuItems={menuItems}
+      />
+    )
+    const items = container.querySelectorAll('[class$="-subNavLinkContainer"]')
+
+    expect(items.length).toBe(3)
+    expect(items[0]).toHaveTextContent('Home')
+    expect(items[1]).toHaveTextContent('Announcements')
+    expect(items[2]).toHaveTextContent('Assignments')
+  })
+
+  it('should render items as links with correct href attributes', async () => {
+    const {container} = render(
+      <SubNav
+        menuItems={menuItems}
+      />
+    )
+    const links = container.querySelectorAll('[class$="-link"]')
+
+    expect(links.length).toBe(3)
+
+    expect(links[0].tagName).toBe('A')
+    expect(links[0]).toHaveAttribute('href', 'www.google.com')
+
+    expect(links[1].tagName).toBe('A')
+    expect(links[1]).toHaveAttribute('href', 'http://www.google.com')
+
+    expect(links[2].tagName).toBe('A')
+    expect(links[2]).toHaveAttribute('href', 'https://instructure.design/')
+  })
+
+  it('should apply a border to the selected menu item', async () => {
+    const {container} = render(
+      <SubNav
+        menuItems={menuItems}
+      />
+    )
+    screen.debug()
+    const links = container.querySelectorAll('[class$="-link"]')
+
+    for (const link of links) {
+      if (link.textContent === 'Home') {
+        expect(link.parentElement).toHaveStyle({ 'border-left': '3px solid' })
+        // TODO expect(link).toHaveAttribute('aria-selected', 'true') kap külön jelölést?
+      } else {
+        expect(link.parentElement).not.toHaveStyle({ 'border-left': '3px solid' })
+      }
+    }
+  })
+
+  it('should call onClick when item is clicked', async () => {
+    const onClickMock = vi.fn()
+
+    render(
+      <SubNav
+        menuItems={[
+          { title: 'Home', href: 'www.google.com', selected: true, onClick: onClickMock },
+          { title: 'Announcements', href: 'http://www.google.com', selected: false },
+          { title: 'Assignments', href: 'https://instructure.design/', selected: false }
+        ]}
+      />
+    )
+    const item = screen.getByText('Home')
+
+    await userEvent.click(item)
+
+    await waitFor(() => {
+      expect(onClickMock).toHaveBeenCalled()
+    })
+  })
+})

From a9760d94b286a89b3ff1c06c96a738a3b0ec7fa8 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 27 Jun 2025 16:01:45 +0200
Subject: [PATCH 48/53] test: playground for testing

---
 package-lock.json                             |   53 +
 regression-test/package-lock.json             | 5907 +++++++++++------
 regression-test/package.json                  |    9 +-
 regression-test/src/app/canvastopnav/page.tsx |  450 ++
 4 files changed, 4288 insertions(+), 2131 deletions(-)
 create mode 100644 regression-test/src/app/canvastopnav/page.tsx

diff --git a/package-lock.json b/package-lock.json
index f0ab1f0f01..c3edd1bb1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24311,6 +24311,53 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-router": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
+      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
+      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/read": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/read/-/read-3.0.1.tgz",
@@ -25348,6 +25395,12 @@
       "version": "2.0.0",
       "license": "ISC"
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
diff --git a/regression-test/package-lock.json b/regression-test/package-lock.json
index 1f9d49ad6f..192fb130f1 100644
--- a/regression-test/package-lock.json
+++ b/regression-test/package-lock.json
@@ -9,9 +9,9 @@
       "version": "0.0.1",
       "dependencies": {
         "instructure-ui": "file:../packages",
-        "next": "^15",
-        "react": "^18.3.1",
-        "react-dom": "^18"
+        "next": "14.2.30",
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
       },
       "devDependencies": {
         "@chromatic-com/cypress": "^0.11.0",
@@ -33,103 +33,12 @@
       }
     },
     "../packages": {},
-    "../packages/ui": {
-      "name": "@instructure/ui",
-      "version": "10.14.0",
-      "extraneous": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.26.0",
-        "@instructure/emotion": "10.14.0",
-        "@instructure/ui-a11y-content": "10.14.0",
-        "@instructure/ui-alerts": "10.14.0",
-        "@instructure/ui-avatar": "10.14.0",
-        "@instructure/ui-badge": "10.14.0",
-        "@instructure/ui-billboard": "10.14.0",
-        "@instructure/ui-breadcrumb": "10.14.0",
-        "@instructure/ui-buttons": "10.14.0",
-        "@instructure/ui-byline": "10.14.0",
-        "@instructure/ui-calendar": "10.14.0",
-        "@instructure/ui-checkbox": "10.14.0",
-        "@instructure/ui-code-editor": "10.14.0",
-        "@instructure/ui-color-picker": "10.14.0",
-        "@instructure/ui-date-input": "10.14.0",
-        "@instructure/ui-date-time-input": "10.14.0",
-        "@instructure/ui-dialog": "10.14.0",
-        "@instructure/ui-drawer-layout": "10.14.0",
-        "@instructure/ui-drilldown": "10.14.0",
-        "@instructure/ui-editable": "10.14.0",
-        "@instructure/ui-expandable": "10.14.0",
-        "@instructure/ui-file-drop": "10.14.0",
-        "@instructure/ui-flex": "10.14.0",
-        "@instructure/ui-focusable": "10.14.0",
-        "@instructure/ui-form-field": "10.14.0",
-        "@instructure/ui-grid": "10.14.0",
-        "@instructure/ui-heading": "10.14.0",
-        "@instructure/ui-i18n": "10.14.0",
-        "@instructure/ui-icons": "10.14.0",
-        "@instructure/ui-img": "10.14.0",
-        "@instructure/ui-link": "10.14.0",
-        "@instructure/ui-list": "10.14.0",
-        "@instructure/ui-menu": "10.14.0",
-        "@instructure/ui-metric": "10.14.0",
-        "@instructure/ui-modal": "10.14.0",
-        "@instructure/ui-motion": "10.14.0",
-        "@instructure/ui-navigation": "10.14.0",
-        "@instructure/ui-number-input": "10.14.0",
-        "@instructure/ui-options": "10.14.0",
-        "@instructure/ui-overlays": "10.14.0",
-        "@instructure/ui-pages": "10.14.0",
-        "@instructure/ui-pagination": "10.14.0",
-        "@instructure/ui-pill": "10.14.0",
-        "@instructure/ui-popover": "10.14.0",
-        "@instructure/ui-portal": "10.14.0",
-        "@instructure/ui-position": "10.14.0",
-        "@instructure/ui-progress": "10.14.0",
-        "@instructure/ui-radio-input": "10.14.0",
-        "@instructure/ui-range-input": "10.14.0",
-        "@instructure/ui-rating": "10.14.0",
-        "@instructure/ui-responsive": "10.14.0",
-        "@instructure/ui-select": "10.14.0",
-        "@instructure/ui-selectable": "10.14.0",
-        "@instructure/ui-side-nav-bar": "10.14.0",
-        "@instructure/ui-simple-select": "10.14.0",
-        "@instructure/ui-source-code-editor": "10.14.0",
-        "@instructure/ui-spinner": "10.14.0",
-        "@instructure/ui-svg-images": "10.14.0",
-        "@instructure/ui-table": "10.14.0",
-        "@instructure/ui-tabs": "10.14.0",
-        "@instructure/ui-tag": "10.14.0",
-        "@instructure/ui-text": "10.14.0",
-        "@instructure/ui-text-area": "10.14.0",
-        "@instructure/ui-text-input": "10.14.0",
-        "@instructure/ui-themes": "10.14.0",
-        "@instructure/ui-time-select": "10.14.0",
-        "@instructure/ui-toggle-details": "10.14.0",
-        "@instructure/ui-tooltip": "10.14.0",
-        "@instructure/ui-top-nav-bar": "10.14.0",
-        "@instructure/ui-tray": "10.14.0",
-        "@instructure/ui-tree-browser": "10.14.0",
-        "@instructure/ui-truncate-list": "10.14.0",
-        "@instructure/ui-truncate-text": "10.14.0",
-        "@instructure/ui-view": "10.14.0"
-      },
-      "devDependencies": {
-        "@instructure/ui-babel-preset": "10.14.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.14 <= 18",
-        "react-dom": ">= 16.14 <= 18"
-      }
-    },
-    "../packages/ui/es": {
-      "extraneous": true
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -137,55 +46,165 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
-      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
       "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.27.1",
         "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
+      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.27.5",
+        "@babel/types": "^7.27.3",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/parser": {
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
+      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/runtime": {
-      "version": "7.26.10",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz",
-      "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==",
-      "dev": true,
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
+      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
+      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.27.3",
+        "@babel/parser": "^7.27.4",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.27.3",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.27.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
+      "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-runtime": "^0.14.0"
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@chromatic-com/cypress": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@chromatic-com/cypress/-/cypress-0.11.0.tgz",
-      "integrity": "sha512-n2g4pLqWJrBh4thvMTYVIIZDfaNtlDfkVgHTTMuORHYtMOjGqOBcZzhKFujtDC6sKI8znA+eHcw4d+RwFETiGA==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/@chromatic-com/cypress/-/cypress-0.11.5.tgz",
+      "integrity": "sha512-kj7HL+2iYQ1QQPUm9zv8ueyE/4GKV0200e4SQlYc9CLTIUVxnwCB8gPRX7uIlRBxWmEyzfbJlW3OPypIGrhqVA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@chromaui/rrweb-snapshot": "2.0.0-alpha.17-noAbsolute",
+        "@chromaui/rrweb-snapshot": "2.0.0-alpha.18-noAbsolute",
         "@segment/analytics-node": "^1.1.0",
-        "@storybook/addon-essentials": "^8.6.0",
+        "@storybook/addon-essentials": "~8.5.8",
         "@storybook/csf": "^0.1.0",
-        "@storybook/manager-api": "^8.6.0",
-        "@storybook/server-webpack5": "^8.6.0",
+        "@storybook/manager-api": "~8.5.8",
+        "@storybook/server-webpack5": "~8.5.8",
         "chrome-remote-interface": "^0.33.0",
-        "storybook": "^8.6.0"
+        "storybook": "~8.5.8"
       },
       "bin": {
         "archive-storybook": "dist/bin/archive-storybook.js",
@@ -193,10 +212,11 @@
       }
     },
     "node_modules/@chromaui/rrweb-snapshot": {
-      "version": "2.0.0-alpha.17-noAbsolute",
-      "resolved": "https://registry.npmjs.org/@chromaui/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.17-noAbsolute.tgz",
-      "integrity": "sha512-8jV8EyLA6s8mLGy+eLLGlve7BEjzdnyrJDBu34D405eYUtazzyP+cG4nOvylYyfR+/RkUhJ/GXeB+hbg8au62A==",
+      "version": "2.0.0-alpha.18-noAbsolute",
+      "resolved": "https://registry.npmjs.org/@chromaui/rrweb-snapshot/-/rrweb-snapshot-2.0.0-alpha.18-noAbsolute.tgz",
+      "integrity": "sha512-glB+dgHTLLiDS8ljwYDBb2EPNe/sPxz2uOWjm11PoDYmVw204VKzyq07jredeHs9nUocb47RyDcZWCa5Cbw3yw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "postcss": "^8.4.38"
       }
@@ -206,6 +226,7 @@
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.8.tgz",
       "integrity": "sha512-h0NFgh1mJmm1nr4jCwkGHwKneVYKghUyWe6TMNrk0B9zsjAJxpg8C4/+BAcmLgCPa1vj1V8rNUaILl+zYRUWBQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -230,11 +251,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@cypress/xvfb": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
       "integrity": "sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^3.1.0",
         "lodash.once": "^4.1.1"
@@ -245,27 +277,177 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
+      "integrity": "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
       "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.2.tgz",
+      "integrity": "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==",
+      "dev": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
-      "integrity": "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
+      "integrity": "sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "aix"
@@ -275,13 +457,14 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.1.tgz",
-      "integrity": "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.5.tgz",
+      "integrity": "sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -291,13 +474,14 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.1.tgz",
-      "integrity": "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.5.tgz",
+      "integrity": "sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -307,13 +491,14 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.1.tgz",
-      "integrity": "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.5.tgz",
+      "integrity": "sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -323,13 +508,14 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.1.tgz",
-      "integrity": "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.5.tgz",
+      "integrity": "sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -339,13 +525,14 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.1.tgz",
-      "integrity": "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.5.tgz",
+      "integrity": "sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -355,13 +542,14 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.1.tgz",
-      "integrity": "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -371,13 +559,14 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.1.tgz",
-      "integrity": "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.5.tgz",
+      "integrity": "sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -387,13 +576,14 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.1.tgz",
-      "integrity": "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.5.tgz",
+      "integrity": "sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -403,13 +593,14 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.1.tgz",
-      "integrity": "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.5.tgz",
+      "integrity": "sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -419,13 +610,14 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.1.tgz",
-      "integrity": "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.5.tgz",
+      "integrity": "sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -435,13 +627,14 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.1.tgz",
-      "integrity": "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.5.tgz",
+      "integrity": "sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==",
       "cpu": [
         "loong64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -451,13 +644,14 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.1.tgz",
-      "integrity": "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.5.tgz",
+      "integrity": "sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==",
       "cpu": [
         "mips64el"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -467,13 +661,14 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.1.tgz",
-      "integrity": "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.5.tgz",
+      "integrity": "sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==",
       "cpu": [
         "ppc64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -483,13 +678,14 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.1.tgz",
-      "integrity": "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.5.tgz",
+      "integrity": "sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==",
       "cpu": [
         "riscv64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -499,13 +695,14 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.1.tgz",
-      "integrity": "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.5.tgz",
+      "integrity": "sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==",
       "cpu": [
         "s390x"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -515,13 +712,14 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.1.tgz",
-      "integrity": "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.5.tgz",
+      "integrity": "sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -531,13 +729,14 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.1.tgz",
-      "integrity": "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -547,13 +746,14 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.1.tgz",
-      "integrity": "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "netbsd"
@@ -563,13 +763,14 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.1.tgz",
-      "integrity": "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.5.tgz",
+      "integrity": "sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -579,13 +780,14 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.1.tgz",
-      "integrity": "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.5.tgz",
+      "integrity": "sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "openbsd"
@@ -595,13 +797,14 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.1.tgz",
-      "integrity": "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.5.tgz",
+      "integrity": "sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "sunos"
@@ -611,13 +814,14 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.1.tgz",
-      "integrity": "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.5.tgz",
+      "integrity": "sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -627,13 +831,14 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.1.tgz",
-      "integrity": "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.5.tgz",
+      "integrity": "sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==",
       "cpu": [
         "ia32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -643,13 +848,14 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.1.tgz",
-      "integrity": "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.5.tgz",
+      "integrity": "sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -659,25 +865,30 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
-      "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -687,6 +898,7 @@
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -710,6 +922,7 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
       "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -725,6 +938,7 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
       },
@@ -733,22 +947,24 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+      "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
       "deprecated": "Use @eslint/config-array instead",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
+        "@humanwhocodes/object-schema": "^2.0.3",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -761,6 +977,7 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
       },
@@ -774,376 +991,555 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "deprecated": "Use @eslint/object-schema instead",
-      "dev": true
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
-    "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",
-      "integrity": "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.1.0"
+    "node_modules/@instructure/browserslist-config-instui": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@instructure/browserslist-config-instui/-/browserslist-config-instui-10.14.0.tgz",
+      "integrity": "sha512-EIKrXGWJeLkZxJyRaMgLDhafneG9x8Ev2F7655UIxVsPCbuQ4yxs20BPZcm3F/GOfthGJav5zjIobZyHGw9JLw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@instructure/console": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/console/-/console-10.20.1.tgz",
+      "integrity": "sha512-WvpzHotRX6lP3LFhQU1qq2qG/UVGPvNfavqlPQD3ZYmhhyk9OA2X5LeAyikJ4dhC2A4q/QpMu0dpBefljGeZtg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz",
-      "integrity": "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/debounce": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/debounce/-/debounce-10.20.1.tgz",
+      "integrity": "sha512-v2TrtiEjjWRANbXPeacyhmW6lyICUoxIlojMb/LhillsfFjZuxmrapneXrSsWxaGrPdDAmH/LLbTouVCUShyDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      }
+    },
+    "node_modules/@instructure/emotion": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/emotion/-/emotion-10.20.1.tgz",
+      "integrity": "sha512-lf8JyzmFo6/GJmKezWhIzB1NuzkKcXz6j/+BRQTRif+x5DnXp0G1LUlOtJJudzbHVJigw5hawib+sqvfqk8Edg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@emotion/react": "^11",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/theme-registry": "10.20.1",
+        "@instructure/ui-decorator": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-themes": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/shared-types": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/shared-types/-/shared-types-10.20.1.tgz",
+      "integrity": "sha512-ec+o0robMofO2Y/OPFN6IX6IqSUJuoTBWUS3SO9qYR5l+PuKniKyco7Dr4sLtdzpmWiN3e2YHs8Js7SOGZpXOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz",
-      "integrity": "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/theme-registry": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/theme-registry/-/theme-registry-10.20.1.tgz",
+      "integrity": "sha512-pJBO+TLQp4SUTLFM82Vu2VSlIK2SHmh6KDtzCDDHPa9B3YmMr1VwCG3lSykSZ2Spm29FcqnqkC549LUxK4EtYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-utils": "10.20.1"
       }
     },
-    "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz",
-      "integrity": "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-a11y-content": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-a11y-content/-/ui-a11y-content-10.20.1.tgz",
+      "integrity": "sha512-WKm7um3ly7JaFXNmAllJiC+Hq1Z5CTcrf6INT+hcr/uhVwQwaJh2iQxuo5JmbBylWRY1wNo0l+aXsyRk3YRbVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz",
-      "integrity": "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-a11y-utils": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-a11y-utils/-/ui-a11y-utils-10.20.1.tgz",
+      "integrity": "sha512-4UIJCCjHgfdwPlhTaRzDLVC9lX2AOVhV6crmtTjibJCwaBmWtmQWOWpfap9biJn/bSXakosNmTqK8sPOnqwWuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-a11y-content": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/uid": "10.20.1",
+        "keycode": "^2"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz",
-      "integrity": "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-buttons": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-buttons/-/ui-buttons-10.20.1.tgz",
+      "integrity": "sha512-p5Z91ZN2/+wpTP7cao4hG4p+rggHl4Y0gC6lc2LEkNHTYxY26hoHY1B9huoyLkd2C6NXIgKAZPZEm/xg/H62GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-a11y-content": "10.20.1",
+        "@instructure/ui-a11y-utils": "10.20.1",
+        "@instructure/ui-color-utils": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-icons": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-tooltip": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/ui-view": "10.20.1",
+        "keycode": "^2",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-ppc64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz",
-      "integrity": "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-color-utils": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-color-utils/-/ui-color-utils-10.20.1.tgz",
+      "integrity": "sha512-zpwsQvPgVkk6bOqeBEhmDa4KR+AOCMXDBGgkQNHRTld4Gzte6uFDcVnuTfjWgdPtXHmpayQicL2DfJn6g+SPBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "tinycolor2": "^1.6.0"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz",
-      "integrity": "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-decorator": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-decorator/-/ui-decorator-10.20.1.tgz",
+      "integrity": "sha512-kiQidxR28MkNZrvxr8ShUfAG9nljA5kdDcGYy1Sw0Zhw3/fBsAMb82EsenCFfElDnAP4NE7CXxoQDUKAsMkHoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
       }
     },
-    "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz",
-      "integrity": "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-dialog": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-dialog/-/ui-dialog-10.20.1.tgz",
+      "integrity": "sha512-MzCJ0DRs9i1s6Baa7QZiIAMY/Fl9+mfUiZ5kArRYocPYG458Y2hHryOvMwCQYNXCLaYH7xMqQLZfEWpGmTk5Ew==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-a11y-utils": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz",
-      "integrity": "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-dom-utils": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-dom-utils/-/ui-dom-utils-10.20.1.tgz",
+      "integrity": "sha512-95NflaNUT3wVrpBR9A/0Q6ciBzvkFDr5GEm5ZIJ9J2tPpmJ/oeHFDcrULAV1vm9r5TCGe9Y40OaKNqEQyvNVgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18",
+        "react-dom": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz",
-      "integrity": "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-focusable": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-focusable/-/ui-focusable-10.20.1.tgz",
+      "integrity": "sha512-9GTJEcQpWBJre2coFGsrMJMUbIj35lokdJ58iKbxUDNKd1iPRFi+ZtOzrkYHKqunivrY8ZdXL1IPuDVZFJotNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/ui-view": "10.20.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linux-arm": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz",
-      "integrity": "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+    "node_modules/@instructure/ui-i18n": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-i18n/-/ui-i18n-10.20.1.tgz",
+      "integrity": "sha512-FUfzDa+RlYWcloE9sM/RiMlSvbpgt7FMt3gFNyu9hcJnRlXQXo4q8lAqiWZjphgrWYN1jlu6MzesyV7N+nxmcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-decorator": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "moment-timezone": "^0.6.0",
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz",
-      "integrity": "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-icons": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-icons/-/ui-icons-10.20.1.tgz",
+      "integrity": "sha512-a5DaTBi+kP5Up9PwNrtmUi2J3K+2cmlspfL8mxWBnqxcdO8s5ok3Q+tGIpMkYAh2XeJ2YdzjpwovSlZ1m8BA8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/ui-svg-images": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-motion": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-motion/-/ui-motion-10.20.1.tgz",
+      "integrity": "sha512-OZZoG0AB6Q8HQJz5C20YgF7OaiHaadL/Md7drxAagvz6xMR/NsCGVlYxAPTnU8WfQCmFAHwG2LxGMP79mimV9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz",
-      "integrity": "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==",
-      "cpu": [
-        "s390x"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-overlays": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-overlays/-/ui-overlays-10.20.1.tgz",
+      "integrity": "sha512-TnBHRUWcvQe2AL/HatH2CVAqR5eJT2IWlvmyNNu2BqbVzYg+usR4T4hD9BsTzyVUrbMwt3eesmjPrObq4w/MoA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-buttons": "10.20.1",
+        "@instructure/ui-dialog": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-focusable": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-motion": "10.20.1",
+        "@instructure/ui-popover": "10.20.1",
+        "@instructure/ui-portal": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-tooltip": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/ui-view": "10.20.1",
+        "@instructure/uid": "10.20.1",
+        "no-scroll": "^2.1.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-popover": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-popover/-/ui-popover-10.20.1.tgz",
+      "integrity": "sha512-5c/P1CT6Aa5KKyM9DUMk618QdCspylk606eu6WG4IrWJE7AVgMvRedZj9wyntDgJsli1Fz1FuImjx20MWCda3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-a11y-utils": "10.20.1",
+        "@instructure/ui-dialog": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/ui-view": "10.20.1",
+        "@instructure/uid": "10.20.1",
+        "keycode": "^2.2.1",
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linux-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz",
-      "integrity": "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-portal": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-portal/-/ui-portal-10.20.1.tgz",
+      "integrity": "sha512-B7prIMi3AuP6VGSMjSBemuLpJLxmCkqE0c2Z6ftc1rsEzpN57qP0xQTY2XEj2owSbtdayEJ6omFKDesZRo8yiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18",
+        "react-dom": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-position": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-position/-/ui-position-10.20.1.tgz",
+      "integrity": "sha512-L1WeJJXgueGVT9U7mwUFYWlPtBaTuxCWNUDE5cjw8HsiW+X5/t4pe3lXJxHDfwpnqnr6rW2AKS9ADfgld/j7CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/debounce": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-portal": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/uid": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz",
-      "integrity": "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-prop-types": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-prop-types/-/ui-prop-types-10.20.1.tgz",
+      "integrity": "sha512-cOQoS1vqS73Pus8bGhh0uNDuuXc0xEQZr0ExsN/UbRfnofx2QfJ9A2Nha8icKeHYy14BFml30GEX4MSMYYyDpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-react-utils": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-react-utils/-/ui-react-utils-10.20.1.tgz",
+      "integrity": "sha512-24SLMsQV2wKU/PCrdBMpdoK67jVJalYLUgyJcRNPpQBKUi/HV644lXsz2Q9qi59vobFObVRz6Om+xBxVTZj53g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@emotion/is-prop-valid": "^1.3.1",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-decorator": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.8.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18",
+        "react-dom": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz",
-      "integrity": "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-svg-images": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-svg-images/-/ui-svg-images-10.20.1.tgz",
+      "integrity": "sha512-Ha5OQkxyM/d1s80FYfLzucjoO2KMjM+GMqLJHqbQMwHjVpORbAbao/st0Q5YDmV0rLPnoFEu0Yn1RdeG3zLngg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "@instructure/uid": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-testable": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-testable/-/ui-testable-10.20.1.tgz",
+      "integrity": "sha512-YQSQsBKQJw24okqEsCf12tCjhl2fqa+9O9iOY7VldVd8ap/THiDOEmUvvywBisFiIiJL6TasLNiF/H4xRjjQhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/ui-decorator": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1"
       },
-      "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.1.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18",
+        "react-dom": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-wasm32": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz",
-      "integrity": "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==",
-      "cpu": [
-        "wasm32"
-      ],
-      "optional": true,
+    "node_modules/@instructure/ui-themes": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-themes/-/ui-themes-10.20.1.tgz",
+      "integrity": "sha512-hBgFs9/8QVUYhYgH0FIw83StYDH/9Oan8Y0XHApskz3lLx9iPBZJ3kWD+KE+8Zx2bOLoEqnkxHPjeTgo4pbn3A==",
+      "license": "MIT",
       "dependencies": {
-        "@emnapi/runtime": "^1.4.0"
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/theme-registry": "10.20.1"
+      }
+    },
+    "node_modules/@instructure/ui-tooltip": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-tooltip/-/ui-tooltip-10.20.1.tgz",
+      "integrity": "sha512-YMwsgTZUmLF5GYjAoDjYkdMTHL5R20dyB4H9/K6Pvr3m9aA4NPHlySyHZ3QsTut5VkLGAzTl0ijVveVl+5OfeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-popover": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
+      }
+    },
+    "node_modules/@instructure/ui-tray": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-tray/-/ui-tray-10.20.1.tgz",
+      "integrity": "sha512-f9lybmCROit/gSLbcqdXVjaq5ZDcOKcmLD5vYdkzGBIl52em+2+Jc8zxZM0v2bnmlrnoPDdv6VHhXDSA1fnbSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dialog": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-motion": "10.20.1",
+        "@instructure/ui-overlays": "10.20.1",
+        "@instructure/ui-portal": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "@instructure/ui-testable": "10.20.1",
+        "@instructure/ui-utils": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz",
-      "integrity": "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-utils": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-utils/-/ui-utils-10.20.1.tgz",
+      "integrity": "sha512-Qg7GNGzZSnfuECxApNh4H/w1Y0FHB/6d2RJzCg64EJTSvcNZ9uASUrv2pkUIXo8W0aKNIoczx9I4becSr8kdLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@types/ua-parser-js": "^0.7.39",
+        "fast-deep-equal": "^3.1.3",
+        "json-stable-stringify": "^1.3.0",
+        "ua-parser-js": "^1.0.39"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18",
+        "react-dom": ">=16.14 <=18"
       }
     },
-    "node_modules/@img/sharp-win32-x64": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz",
-      "integrity": "sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+    "node_modules/@instructure/ui-view": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/ui-view/-/ui-view-10.20.1.tgz",
+      "integrity": "sha512-OA+95Nd78dKh5QM2i8giTD2COxmJ0oA76QDKyoRDED3xntf80dVf8jlgMhUPaU6B8iXY8xet3kLe/GDdo+43Mw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "@instructure/console": "10.20.1",
+        "@instructure/emotion": "10.20.1",
+        "@instructure/shared-types": "10.20.1",
+        "@instructure/ui-color-utils": "10.20.1",
+        "@instructure/ui-dom-utils": "10.20.1",
+        "@instructure/ui-i18n": "10.20.1",
+        "@instructure/ui-position": "10.20.1",
+        "@instructure/ui-prop-types": "10.20.1",
+        "@instructure/ui-react-utils": "10.20.1",
+        "prop-types": "^15.8.1"
       },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
+      "peerDependencies": {
+        "react": ">=16.14 <=18"
       }
     },
-    "node_modules/@instructure/browserslist-config-instui": {
-      "version": "10.14.0",
-      "resolved": "https://registry.npmjs.org/@instructure/browserslist-config-instui/-/browserslist-config-instui-10.14.0.tgz",
-      "integrity": "sha512-EIKrXGWJeLkZxJyRaMgLDhafneG9x8Ev2F7655UIxVsPCbuQ4yxs20BPZcm3F/GOfthGJav5zjIobZyHGw9JLw==",
-      "dev": true
+    "node_modules/@instructure/uid": {
+      "version": "10.20.1",
+      "resolved": "https://registry.npmjs.org/@instructure/uid/-/uid-10.20.1.tgz",
+      "integrity": "sha512-gRwQ8geDqnZqoC3e0G8VHTuiLWW5c8yeKHTgh5sjxPjrDina/cRY8Bfvplb8G7fhTlnNL6fX7UXDSn7MR3+dmg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      }
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -1157,10 +1553,11 @@
       }
     },
     "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -1173,6 +1570,7 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -1190,6 +1588,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1200,11 +1599,24 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1218,7 +1630,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1227,7 +1639,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1237,6 +1649,7 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25"
@@ -1246,13 +1659,13 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1263,6 +1676,7 @@
       "resolved": "https://registry.npmjs.org/@lukeed/csprng/-/csprng-1.1.0.tgz",
       "integrity": "sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -1272,6 +1686,7 @@
       "resolved": "https://registry.npmjs.org/@lukeed/uuid/-/uuid-2.0.1.tgz",
       "integrity": "sha512-qC72D4+CDdjGqJvkFMMEAtancHUQ7/d/tAiHf64z8MopFDmcrtbcJuerDtFceuAfQJ2pDSfCKCtbqoGBNnwg0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@lukeed/csprng": "^1.1.0"
       },
@@ -1284,6 +1699,7 @@
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
       "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/mdx": "^2.0.0"
       },
@@ -1296,27 +1712,43 @@
         "react": ">=16"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.11.tgz",
+      "integrity": "sha512-9DPkXtvHydrcOsopiYpUgPHpmj0HWZKMUnL2dZqpvC42lsratuBG06V5ipyno0fUek5VlFsNQ+AcFATSrJXgMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.9.0"
+      }
+    },
     "node_modules/@next/env": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.1.tgz",
-      "integrity": "sha512-cwK27QdzrMblHSn9DZRV+DQscHXRuJv6MydlJRpFSqJWZrTYMLzKDeyueJNN9MGd8NNiUKzDQADAf+dMLXX7YQ=="
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.30.tgz",
+      "integrity": "sha512-KBiBKrDY6kxTQWGzKjQB7QirL3PiiOkV7KW98leHFjtVRKtft76Ra5qSA/SL75xT44dp6hOcqiiJ6iievLOYug==",
+      "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.2.tgz",
       "integrity": "sha512-k9h9NfR1joJI48uwdQd/DuOV1mBgcjlmWaX45eAXCFGT96oc+/6SMjO3s7naVtTXqSKjFAgk2GDlW6Hv41ROXQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "glob": "10.3.10"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.3.1.tgz",
-      "integrity": "sha512-hjDw4f4/nla+6wysBL07z52Gs55Gttp5Bsk5/8AncQLJoisvTBP0pRIBK/B16/KqQyH+uN4Ww8KkcAqJODYH3w==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.30.tgz",
+      "integrity": "sha512-EAqfOTb3bTGh9+ewpO/jC59uACadRHM6TSA9DdxJB/6gxOpyV+zrbqeXiFTDy9uV6bmipFDkfpAskeaDcO+7/g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1326,12 +1758,13 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.3.1.tgz",
-      "integrity": "sha512-q+aw+cJ2ooVYdCEqZVk+T4Ni10jF6Fo5DfpEV51OupMaV5XL6pf3GCzrk6kSSZBsMKZtVC1Zm/xaNBFpA6bJ2g==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.30.tgz",
+      "integrity": "sha512-TyO7Wz1IKE2kGv8dwQ0bmPL3s44EKVencOqwIY69myoS3rdpO1NPg5xPM5ymKu7nfX4oYJrpMxv8G9iqLsnL4A==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1341,12 +1774,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.3.1.tgz",
-      "integrity": "sha512-wBQ+jGUI3N0QZyWmmvRHjXjTWFy8o+zPFLSOyAyGFI94oJi+kK/LIZFJXeykvgXUk1NLDAEFDZw/NVINhdk9FQ==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.30.tgz",
+      "integrity": "sha512-I5lg1fgPJ7I5dk6mr3qCH1hJYKJu1FsfKSiTKoYwcuUf53HWTrEkwmMI0t5ojFKeA6Vu+SfT2zVy5NS0QLXV4Q==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1356,12 +1790,13 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.3.1.tgz",
-      "integrity": "sha512-IIxXEXRti/AulO9lWRHiCpUUR8AR/ZYLPALgiIg/9ENzMzLn3l0NSxVdva7R/VDcuSEBo0eGVCe3evSIHNz0Hg==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.30.tgz",
+      "integrity": "sha512-8GkNA+sLclQyxgzCDs2/2GSwBc92QLMrmYAmoP2xehe5MUKBLB2cgo34Yu242L1siSkwQkiV4YLdCnjwc/Micw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1371,12 +1806,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.3.1.tgz",
-      "integrity": "sha512-bfI4AMhySJbyXQIKH5rmLJ5/BP7bPwuxauTvVEiJ/ADoddaA9fgyNNCcsbu9SlqfHDoZmfI6g2EjzLwbsVTr5A==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.30.tgz",
+      "integrity": "sha512-8Ly7okjssLuBoe8qaRCcjGtcMsv79hwzn/63wNeIkzJVFVX06h5S737XNr7DZwlsbTBDOyI6qbL2BJB5n6TV/w==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1386,12 +1822,13 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.3.1.tgz",
-      "integrity": "sha512-FeAbR7FYMWR+Z+M5iSGytVryKHiAsc0x3Nc3J+FD5NVbD5Mqz7fTSy8CYliXinn7T26nDMbpExRUI/4ekTvoiA==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.30.tgz",
+      "integrity": "sha512-dBmV1lLNeX4mR7uI7KNVHsGQU+OgTG5RGFPi3tBJpsKPvOPtg9poyav/BYWrB3GPQL4dW5YGGgalwZ79WukbKQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1401,12 +1838,29 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.3.1.tgz",
-      "integrity": "sha512-yP7FueWjphQEPpJQ2oKmshk/ppOt+0/bB8JC8svPUZNy0Pi3KbPx2Llkzv1p8CoQa+D2wknINlJpHf3vtChVBw==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.30.tgz",
+      "integrity": "sha512-6MMHi2Qc1Gkq+4YLXAgbYslE1f9zMGBikKMdmQRHXjkGPot1JY3n5/Qrbg40Uvbi8//wYnydPnyvNhI1DMUW1g==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.30.tgz",
+      "integrity": "sha512-pVZMnFok5qEX4RT59mK2hEVtJX+XFfak+/rjHpyFh7juiT52r177bfFKhnlafm0UOSldhXjj32b+LZIOdswGTg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1416,12 +1870,13 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.3.1.tgz",
-      "integrity": "sha512-3PMvF2zRJAifcRNni9uMk/gulWfWS+qVI/pagd+4yLF5bcXPZPPH2xlYRYOsUjmCJOXSTAC2PjRzbhsRzR2fDQ==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.30.tgz",
+      "integrity": "sha512-4KCo8hMZXMjpTzs3HOqOGYYwAXymXIy7PEPAXNEcEOyKqkjiDlECumrWziy+JEF0Oi4ILHGxzgQ3YiMGG2t/Lg==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1435,6 +1890,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -1448,6 +1904,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -1457,6 +1914,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1465,27 +1923,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=14"
       }
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz",
-      "integrity": "sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==",
-      "dev": true
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.11.0.tgz",
+      "integrity": "sha512-zxnHvoMQVqewTJr/W4pKjF0bMGiKJv1WX7bSrkl46Hg0QjESbzBROWK0Wg4RphzSOS5Jiy7eFimmM3UgMrMZbQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@segment/analytics-core": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@segment/analytics-core/-/analytics-core-1.4.1.tgz",
       "integrity": "sha512-kV0Pf33HnthuBOVdYNani21kYyj118Fn+9757bxqoksiXoZlYvBsFq6giNdCsKcTIE1eAMqNDq3xE1VQ0cfsHA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@lukeed/uuid": "^2.0.0",
         "@segment/analytics-generic-utils": "1.1.1",
@@ -1498,6 +1976,7 @@
       "resolved": "https://registry.npmjs.org/@segment/analytics-generic-utils/-/analytics-generic-utils-1.1.1.tgz",
       "integrity": "sha512-THTIzBPHnvu1HYJU3fARdJ3qIkukO3zDXsmDm+kAeUks5R9CBXOQ6rPChiASVzSmwAIIo5uFIXXnCraojlq/Gw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.1"
       }
@@ -1507,6 +1986,7 @@
       "resolved": "https://registry.npmjs.org/@segment/analytics-node/-/analytics-node-1.3.0.tgz",
       "integrity": "sha512-lRLz1WZaDokMoUe299yP5JkInc3OgJuqNNlxb6j0q22umCiq6b5iDo2gRmFn93reirIvJxWIicQsGrHd93q8GQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@lukeed/uuid": "^2.0.0",
         "@segment/analytics-core": "1.4.1",
@@ -1519,35 +1999,12 @@
         "node": ">=14"
       }
     },
-    "node_modules/@segment/analytics-node/node_modules/buffer": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
-      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.2.1"
-      }
-    },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.6.7.tgz",
-      "integrity": "sha512-XgZCwIcZGThEyD7e2q7rN/jzg7ZHUxn/ln403eex04jWAGBBbtC2IVuowwCWV8HwDihnhpCZEP6HlgjakOYZbQ==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.5.8.tgz",
+      "integrity": "sha512-7J0NAz+WDw1NmvmKIh0Qr5cxgVRDPFC5fmngbDNxedk147TkwrgmqOypgEi/SAksHbTWxJclbimoqdcsNtWffA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@types/uuid": "^9.0.1",
@@ -1560,27 +2017,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
-      }
-    },
-    "node_modules/@storybook/addon-actions/node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "bin": {
-        "uuid": "dist/bin/uuid"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.6.7.tgz",
-      "integrity": "sha512-aDFzi83gDhYn0+FGjRYbY5TfBtoG/UgVr9Abi7s5ceabZRhPrYikMyFX0o8V3Z8COl6wUmWmF1luYE4MfXgN2g==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.5.8.tgz",
+      "integrity": "sha512-TsQFagQ95+d7H3/+qUZKI2B0SEK8iu6CV13cyry9Dm59nn2bBylFrwx4I3xDQUOWMiSF6QIRjCYzxKQ/jJ5OEg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3",
@@ -1591,14 +2036,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.6.7.tgz",
-      "integrity": "sha512-6ReB1Sc1qlqvAM7NUmtw2K1cKCgGBs8zYRgL44Q2ti+r55a2ownhm6WUm/kZs2ixSkV9ehm1osiqbGBfAn0Isw==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.5.8.tgz",
+      "integrity": "sha512-3iifI8mBGPsiPmV9eAYk+tK9i+xuWhVsa+sXz01xTZ/0yoOREpp972hka86mtCqdDTOJIpzh1LmxvB218OssvQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "dequal": "^2.0.2",
@@ -1609,19 +2055,20 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.6.7.tgz",
-      "integrity": "sha512-kgNPEVuLGNJE8EdVQi5Tg2DYgR66/gut07jvhqnJfNqUkj6UpBHad0JR1uwrd7xS3kJs29Fs7UyU87RJnSlwcg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.5.8.tgz",
+      "integrity": "sha512-zKVUqE0UGiq1gZtY2TX57SYB4RIsdlbTDxKW2JZ9HhZGLvZ5Qb7AvdiKTZxfOepGhuw3UcNXH/zCFkFCTJifMw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.6.7",
-        "@storybook/csf-plugin": "8.6.7",
-        "@storybook/react-dom-shim": "8.6.7",
+        "@storybook/blocks": "8.5.8",
+        "@storybook/csf-plugin": "8.5.8",
+        "@storybook/react-dom-shim": "8.5.8",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "ts-dedent": "^2.0.0"
@@ -1631,24 +2078,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.6.7.tgz",
-      "integrity": "sha512-PFT62xuknk4wD1hTZEnYbGP1mJFPlhk7zVVlMjoldMUhmbHsFRhdWCpo93Vu9E3BWVxFxL3Jj+UwSwH4uVmekQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "8.6.7",
-        "@storybook/addon-backgrounds": "8.6.7",
-        "@storybook/addon-controls": "8.6.7",
-        "@storybook/addon-docs": "8.6.7",
-        "@storybook/addon-highlight": "8.6.7",
-        "@storybook/addon-measure": "8.6.7",
-        "@storybook/addon-outline": "8.6.7",
-        "@storybook/addon-toolbars": "8.6.7",
-        "@storybook/addon-viewport": "8.6.7",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.5.8.tgz",
+      "integrity": "sha512-sCNvMZqL6dywnyHuZBrWl4f6QXsvpJHOioL3wJJKaaRMZmctbFmS0u6J8TQjmgZhQfyRzuJuhr1gJg9oeqp6AA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/addon-actions": "8.5.8",
+        "@storybook/addon-backgrounds": "8.5.8",
+        "@storybook/addon-controls": "8.5.8",
+        "@storybook/addon-docs": "8.5.8",
+        "@storybook/addon-highlight": "8.5.8",
+        "@storybook/addon-measure": "8.5.8",
+        "@storybook/addon-outline": "8.5.8",
+        "@storybook/addon-toolbars": "8.5.8",
+        "@storybook/addon-viewport": "8.5.8",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -1656,14 +2104,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.6.7.tgz",
-      "integrity": "sha512-4KE1RF4XfqII7XrJPgf/1W0t0EWRKmik5Rrpb6WofXfgZ2QYzLFnyESjf67/g2TMgDnle2drfa/pt5tGV4+I2Q==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.5.8.tgz",
+      "integrity": "sha512-kkldtFrY0oQJY/vfNLkV66hVgtp66OO8T68KoZFsmUz4a3iYgzDS8WF+Av2/9jthktFvMchjFr8NKOno9YBGIg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0"
       },
@@ -1672,14 +2121,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.6.7.tgz",
-      "integrity": "sha512-4dkkCltjKRcJH+ZMv5nbNT0LBQfcXIydVfN9mAvhDsiPFD5eZcHbN4XVfUslECWgrkaa/a6FE1W9PNEUBjCJaA==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.5.8.tgz",
+      "integrity": "sha512-xf84ByTRkFPoNSck6Z5OJ0kXTYAYgmg/0Ke0eCY/CNgwh7lfjYQBrcjuKiYZ6jyRUMLdysXzIfF9/2MeFqLfIg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "tiny-invariant": "^1.3.1"
@@ -1689,14 +2139,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.6.7.tgz",
-      "integrity": "sha512-atCpCi2CqAWQwL1nu1l5VpIA4fRMnbD4RZMsEiib1suUfNyJv0RdsSgZhp/f+e9sUS0TtMdwhzWT36eEA7VxhQ==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.5.8.tgz",
+      "integrity": "sha512-NAC9VWZFg2gwvduzJRVAtxPeQfJjB8xfDDgcGjgLOCSQkZDDOmGVdLXf78pykMQKyuu/0YZ989KufAac6kRG5g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "ts-dedent": "^2.0.0"
@@ -1706,27 +2157,29 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.6.7.tgz",
-      "integrity": "sha512-gR+mRs+Cc5GINZdKgE7afJLFCSMHkz40+zzdrPu6yY2P4B3UOvuQpt+zC/Er5YQ31EEjIvM6/XMQTM0i2db8AA==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.5.8.tgz",
+      "integrity": "sha512-AfGdMNBp+vOjyiFKlOyUFLIU0kN1QF4PhVBqd0vYkWAk2w9n6a/ZlG0TcJGe7K5+bcvmZDAerYMKbDMSeg9bAw==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.6.7.tgz",
-      "integrity": "sha512-kTrt6ByCbBIbqoRqQO9watDl5nSIKCC+R0/EmpEl6ZtzBV3l8trZHdvCHhIqOyv7nfaa7pIeTTG1GD6Gdrxk3w==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.5.8.tgz",
+      "integrity": "sha512-SdoRb4bH99Knj2R+rTcMQQxHrtcIO1GLzTFitAefxBE1OUkq8FNLHMHd0Ip/sCQGLW/5F03U70R2uh7SkhBBYA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "memoizerific": "^1.11.3"
       },
@@ -1735,15 +2188,17 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.6.7.tgz",
-      "integrity": "sha512-IFhIKO7R1UPpnoG/5tZH0FgC79oYgXNf+7aGUwq29M/CQWy6p/Pvp0y4P962btY1UZRol+SsU//33nH8o6yNRw==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.5.8.tgz",
+      "integrity": "sha512-O6tJDJM83fDm3ZP1+lTf24l7HOTzSRXkkMDD7zB/JHixzlj9p6wI4UQc2lplLadDCa5ya1IwyE7zUDN/0UfC5Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "@storybook/csf": "0.1.12",
         "@storybook/icons": "^1.2.12",
         "ts-dedent": "^2.0.0"
       },
@@ -1754,7 +2209,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -1765,13 +2220,24 @@
         }
       }
     },
+    "node_modules/@storybook/blocks/node_modules/@storybook/csf": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz",
+      "integrity": "sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
     "node_modules/@storybook/builder-webpack5": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.6.7.tgz",
-      "integrity": "sha512-MRzfJto3wK6F4jKyyNJ71dMWqs1CQpj27bRjGanhvBsU+nUkZylcoaqGC52FJwzaEkuSzpGgKg/aLLd33VBM9g==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.5.8.tgz",
+      "integrity": "sha512-QaBIMyqWX/eQs4laQBXvAW9M/ylk73WljJySPlTl+8PNVuDtHli24oBJXwx5aV1NT53BLsaKAn/vb2QNL4+G1Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/core-webpack": "8.6.7",
+        "@storybook/core-webpack": "8.5.8",
         "@types/semver": "^7.3.4",
         "browser-assert": "^1.2.1",
         "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -1801,7 +2267,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1810,10 +2276,11 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.6.7.tgz",
-      "integrity": "sha512-8pnjH1w7PZ/Iiuve1/BJY7EO/kmu0qdE34X1ZM8DyHzuy33EL/PfUuhxNkrL4ayMXrEDp/EJMHx2bqO1RdRV6A==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.5.8.tgz",
+      "integrity": "sha512-PPEMqWPXn7rX+qISaOOv9CDSuuvG538f0+4M5Ppq2LwpjXecgOG5ktqJF0ZqxmTytT+RpEaJmgjGW0dMAKZswA==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -1823,12 +2290,13 @@
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.7.tgz",
-      "integrity": "sha512-FcvLFA+Qn3+D6LgQkk0MOXA5FBz8DGc0UZmZuVbIwIUV4MV4ywCMwtKdG0cyhtzQg0YNyfiIYWJr7lZ4jLLhYg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.5.8.tgz",
+      "integrity": "sha512-OT02DQhkGpBgn5P+nZOZmbzxqubC4liVqbhpjp/HOGi5cOA3+fCJzDJeSDTu+pPh7dZnopC4XnR+5dWjtOJHdA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/theming": "8.6.7",
+        "@storybook/csf": "0.1.12",
         "better-opn": "^3.0.2",
         "browser-assert": "^1.2.1",
         "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@@ -1854,10 +2322,11 @@
       }
     },
     "node_modules/@storybook/core-webpack": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.6.7.tgz",
-      "integrity": "sha512-2mPRdRb27/UVO6ke64nCleNOTzUwjp0APFXs7bNhchb2evj6k4VeizCQjScGNy33ORKVwBImmHKyzHzzmAR/9A==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.5.8.tgz",
+      "integrity": "sha512-M2LNQdYp0br8fgKMVtBh7YIo8mQsgALLc4i9PEXRS7wrp+bhvVnA9qhd5xDPzb0Rl4CHYbs4Yvkzo7ZQMibeIQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ts-dedent": "^2.0.0"
       },
@@ -1866,14 +2335,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
+      }
+    },
+    "node_modules/@storybook/core/node_modules/@storybook/csf": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz",
+      "integrity": "sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^2.19.0"
       }
     },
     "node_modules/@storybook/core/node_modules/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==",
+      "version": "8.18.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
+      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -1895,15 +2375,17 @@
       "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
       "integrity": "sha512-7xOOwCLGB3ebM87eemep89MYRFTko+D8qE7EdAAq74lgdqRR5cOUtYWJLjO2dLtP94nqoOdHJo6MdLLKzg412Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^2.19.0"
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.6.7.tgz",
-      "integrity": "sha512-HK7yQD4kFu04JOKnUwoFeR58r5WY6ucF0D8zfW4Gx+r8hBJ5K4t3z6k2dlIlRQF1X5+2vNkQOwD8liHjckuZ8Q==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.5.8.tgz",
+      "integrity": "sha512-9p+TFutbvtPYEmg14UsvqBDWKP/p/+OkIdi+gkwCMw0yiJF/+7ErMHDB0vr5SpJpU7SFQmfpY2c/LaglEtaniw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "unplugin": "^1.3.1"
       },
@@ -1912,32 +2394,22 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
-      }
-    },
-    "node_modules/@storybook/csf/node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/global": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
       "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@storybook/icons": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.4.0.tgz",
       "integrity": "sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       },
@@ -1947,10 +2419,11 @@
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.6.7.tgz",
-      "integrity": "sha512-BA8RxaLP07WGF660LWo7qB3Jomr/+MPuCZmuKPqXxPhfIovqYjr0hnugxJBjEah0ic31aNX4NucNfDRuV7F5sA==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.5.8.tgz",
+      "integrity": "sha512-ik3yikvYxAJMDFg0s3Pm7hZWucAlkFaaO7e2RlfOctaJFdaEi3evR4RS7GdmS38uKBEk31RC7x+nnIJkqEC59A==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -1960,14 +2433,15 @@
       }
     },
     "node_modules/@storybook/preset-server-webpack": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preset-server-webpack/-/preset-server-webpack-8.6.7.tgz",
-      "integrity": "sha512-RbkIZ2gPoksemMuaWC2M9SAC7EB1jB9NJO9yg1zHt5FXjX5HaFSiVwwuquI6xwfBxSgprrPM8djcQkepM2Nvaw==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preset-server-webpack/-/preset-server-webpack-8.5.8.tgz",
+      "integrity": "sha512-0QA23bmhchmec6zI0JzoXWIA723n8XhEtJndUQDS96cTyDGyb3AuedNgwu5xQw9Zv+EJZjO84uGcNYinPEnmKA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/core-webpack": "8.6.7",
+        "@storybook/core-webpack": "8.5.8",
         "@storybook/global": "^5.0.0",
-        "@storybook/server": "8.6.7",
+        "@storybook/server": "8.5.8",
         "safe-identifier": "^0.4.1",
         "ts-dedent": "^2.0.0",
         "yaml-loader": "^0.8.0"
@@ -1980,14 +2454,15 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.6.7.tgz",
-      "integrity": "sha512-Rz83Nx43v3Dn9/SjhIsorkcx1gPmlclueuzf6YywJTqE1E/L4dgoe2mOA9MfF0jr0bh3TwEA2J3ii0Jstg1Orw==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.5.8.tgz",
+      "integrity": "sha512-HJoz2o28VVprnU5OG6JO6CHrD3ah6qVPWixbnmyUKd0hOYF5dayK5ptmeLyUpYX56Eb2KoYcuVaeQqAby4RkNw==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -1997,10 +2472,11 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.6.7.tgz",
-      "integrity": "sha512-+JH7gbRI6NRbt9o0l1rY4wFdeVt8wGRddm0b55OBlwBGlFo2nvGVOH73J4AGphXVhfY7z33I3TXIjXQ561UdEQ==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.5.8.tgz",
+      "integrity": "sha512-UT/kGJHPW+HLNCTmI1rV1to+dUZuXKUTaRv2wZ2BUq2/gjIuePyqQZYVQeb0LkZbuH2uviLrPfXpS5d3/RSUJw==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -2008,20 +2484,22 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/server": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/server/-/server-8.6.7.tgz",
-      "integrity": "sha512-bjiB+khphPyFxkQXV92z8G0ykIs+pebQALUkjunzJ0mNf9ArsjUPwz8H7g3daGBgsb8MljnBlagkRHQq8ziRSg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/server/-/server-8.5.8.tgz",
+      "integrity": "sha512-DB3IR7CCUklTXtytbOOX7Vig1h9ohQ3BPauvf7WlYXLv4JlkO54oTu37rL0wbqgmmh4FOF41ZSX8z4h4w41How==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/components": "8.6.7",
+        "@storybook/components": "8.5.8",
+        "@storybook/csf": "0.1.12",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "8.6.7",
-        "@storybook/preview-api": "8.6.7",
-        "@storybook/theming": "8.6.7",
+        "@storybook/manager-api": "8.5.8",
+        "@storybook/preview-api": "8.5.8",
+        "@storybook/theming": "8.5.8",
         "ts-dedent": "^2.0.0",
         "yaml": "^2.3.1"
       },
@@ -2033,18 +2511,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
     "node_modules/@storybook/server-webpack5": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/server-webpack5/-/server-webpack5-8.6.7.tgz",
-      "integrity": "sha512-d9fWSYUFEM0Jp8hVlgDwXQ7KvlnX5t93F5YG6Hlo1crTtqvkHnMaKNQXD1q6QBpsdq1bItrR70+ztv4boj4LBw==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/server-webpack5/-/server-webpack5-8.5.8.tgz",
+      "integrity": "sha512-bdRxp0kUGBstDdCEIfJEbsmM7vvyBES4Hjmj0jXcOefQYic5QTWTiDMrHgWPp8XWGjIoO+wOfWm2IXPP5Uceog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/builder-webpack5": "8.6.7",
-        "@storybook/preset-server-webpack": "8.6.7",
-        "@storybook/server": "8.6.7"
+        "@storybook/builder-webpack5": "8.5.8",
+        "@storybook/preset-server-webpack": "8.5.8",
+        "@storybook/server": "8.5.8"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2054,26 +2533,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.6.7"
+        "storybook": "^8.5.8"
       }
     },
-    "node_modules/@storybook/server/node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+    "node_modules/@storybook/server/node_modules/@storybook/csf": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz",
+      "integrity": "sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==",
       "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^2.19.0"
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.7.tgz",
-      "integrity": "sha512-F/i4XS5bew9dvtNiHvDJF0mko1IUbPM9PUjTYPaw6cK8ytS0kdec703MsJ/GUA7seeEWBeGdZjV3ua0pys650A==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.5.8.tgz",
+      "integrity": "sha512-/Rm6BV778sCT+3Ok861VYmw9BlEV5zcCq2zg5TOVuk8HqZw7H7VHtubVsjukEuhveYCs+oF+i2tv/II6jh6jdg==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
@@ -2085,59 +2563,73 @@
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.8.0"
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.4.tgz",
-      "integrity": "sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
         "enhanced-resolve": "^5.18.1",
         "jiti": "^2.4.2",
-        "lightningcss": "1.29.2",
-        "tailwindcss": "4.1.4"
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.11"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.4.tgz",
-      "integrity": "sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
       "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.4",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.4",
-        "@tailwindcss/oxide-darwin-x64": "4.1.4",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.4",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.4",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.4",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.4",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.4",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.4",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.4",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.4",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.4"
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.4.tgz",
-      "integrity": "sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -2147,13 +2639,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.4.tgz",
-      "integrity": "sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -2163,13 +2656,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.4.tgz",
-      "integrity": "sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -2179,13 +2673,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.4.tgz",
-      "integrity": "sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -2195,13 +2690,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.4.tgz",
-      "integrity": "sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2211,13 +2707,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.4.tgz",
-      "integrity": "sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2227,13 +2724,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.4.tgz",
-      "integrity": "sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2243,13 +2741,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.4.tgz",
-      "integrity": "sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2259,13 +2758,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.4.tgz",
-      "integrity": "sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -2275,9 +2775,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.4.tgz",
-      "integrity": "sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -2290,12 +2790,13 @@
         "wasm32"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.0",
-        "@emnapi/runtime": "^1.4.0",
-        "@emnapi/wasi-threads": "^1.0.1",
-        "@napi-rs/wasm-runtime": "^0.2.8",
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.11",
         "@tybys/wasm-util": "^0.9.0",
         "tslib": "^2.8.0"
       },
@@ -2304,13 +2805,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.4.tgz",
-      "integrity": "sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -2320,13 +2822,14 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.4.tgz",
-      "integrity": "sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -2336,16 +2839,28 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.4.tgz",
-      "integrity": "sha512-bjV6sqycCEa+AQSt2Kr7wpGF1bOZJ5wsqnLEkqSbM/JEHxx/yhMH8wHmdkPyApF9xhHeMSwnnkDUUMMM/hYnXw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
+      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.4",
-        "@tailwindcss/oxide": "4.1.4",
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.4"
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
+      "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@types/eslint": {
@@ -2353,6 +2868,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -2363,110 +2879,131 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
       "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
       "integrity": "sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.14.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz",
-      "integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==",
+      "version": "20.19.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.1.tgz",
+      "integrity": "sha512-jJD50LtlD2dodAEO653i3YF04NWak6jN3ky+Ri3Em3mGR39/glWiboM/IePaRbgwSfqM1TpGXfAg8ohn/4dTgA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "undici-types": "~5.26.4"
+        "undici-types": "~6.21.0"
       }
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.14",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
-      "dev": true
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
-      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
-      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
     },
     "node_modules/@types/semver": {
-      "version": "7.5.8",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
-      "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
-      "dev": true
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.0.tgz",
+      "integrity": "sha512-k107IF4+Xr7UHjwDc7Cfd6PRQfbdkiRabXGRjo07b4WyPahFBZCZ1sE+BNxYIJPPg73UkfOsVOLwqVc/6ETrIA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
       "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/sizzle": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
-      "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
-      "dev": true
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.9.tgz",
+      "integrity": "sha512-xzLEyKB50yqCUPUJkIsrVvoWNfFUbIZI+RspLWt8u+tIW/BetMBZtgV2LY/2o+tYH8dRvQ+eoPf3NdhQCcLE2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.39",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
+      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
+      "license": "MIT"
     },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
       "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
       "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "@types/node": "*"
@@ -2477,6 +3014,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
       "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.21.0",
         "@typescript-eslint/types": "6.21.0",
@@ -2505,6 +3043,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
       "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@typescript-eslint/types": "6.21.0",
         "@typescript-eslint/visitor-keys": "6.21.0"
@@ -2522,6 +3061,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
       "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
       },
@@ -2535,82 +3075,356 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
       "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "@typescript-eslint/visitor-keys": "6.21.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "9.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.9.2.tgz",
+      "integrity": "sha512-tS+lqTU3N0kkthU+rYp0spAYq15DU8ld9kXkaKg9sbQqJNF+WPMuNHZQGCgdxrUOEO0j22RKMwRVhF1HTl+X8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.9.2.tgz",
+      "integrity": "sha512-MffGiZULa/KmkNjHeuuflLVqfhqLv1vZLm8lWIyeADvlElJ/GLSOkoUX+5jf4/EGtfwrNFcEaB8BRas03KT0/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.9.2.tgz",
+      "integrity": "sha512-dzJYK5rohS1sYl1DHdJ3mwfwClJj5BClQnQSyAgEfggbUwA9RlROQSSbKBLqrGfsiC/VyrDPtbO8hh56fnkbsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.9.2.tgz",
+      "integrity": "sha512-gaIMWK+CWtXcg9gUyznkdV54LzQ90S3X3dn8zlh+QR5Xy7Y+Efqw4Rs4im61K1juy4YNb67vmJsCDAGOnIeffQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.9.2.tgz",
+      "integrity": "sha512-S7QpkMbVoVJb0xwHFwujnwCAEDe/596xqY603rpi/ioTn9VDgBHnCCxh+UFrr5yxuMH+dliHfjwCZJXOPJGPnw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.9.2.tgz",
+      "integrity": "sha512-+XPUMCuCCI80I46nCDFbGum0ZODP5NWGiwS3Pj8fOgsG5/ctz+/zzuBlq/WmGa+EjWZdue6CF0aWWNv84sE1uw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.9.2.tgz",
+      "integrity": "sha512-sqvUyAd1JUpwbz33Ce2tuTLJKM+ucSsYpPGl2vuFwZnEIg0CmdxiZ01MHQ3j6ExuRqEDUCy8yvkDKvjYFPb8Zg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.9.2.tgz",
+      "integrity": "sha512-UYA0MA8ajkEDCFRQdng/FVx3F6szBvk3EPnkTTQuuO9lV1kPGuTB+V9TmbDxy5ikaEgyWKxa4CI3ySjklZ9lFA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.9.2.tgz",
+      "integrity": "sha512-P/CO3ODU9YJIHFqAkHbquKtFst0COxdphc8TKGL5yCX75GOiVpGqd1d15ahpqu8xXVsqP4MGFP2C3LRZnnL5MA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.9.2.tgz",
+      "integrity": "sha512-uKStFlOELBxBum2s1hODPtgJhY4NxYJE9pAeyBgNEzHgTqTiVBPjfTlPFJkfxyTjQEuxZbbJlJnMCrRgD7ubzw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.9.2.tgz",
+      "integrity": "sha512-LkbNnZlhINfY9gK30AHs26IIVEZ9PEl9qOScYdmY2o81imJYI4IMnJiW0vJVtXaDHvBvxeAgEy5CflwJFIl3tQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.9.2.tgz",
+      "integrity": "sha512-vI+e6FzLyZHSLFNomPi+nT+qUWN4YSj8pFtQZSFTtmgFoxqB6NyjxSjAxEC1m93qn6hUXhIsh8WMp+fGgxCoRg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.9.2.tgz",
+      "integrity": "sha512-sSO4AlAYhSM2RAzBsRpahcJB1msc6uYLAtP6pesPbZtptF8OU/CbCPhSRW6cnYOGuVmEmWVW5xVboAqCnWTeHQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.9.2.tgz",
+      "integrity": "sha512-jkSkwch0uPFva20Mdu8orbQjv2A3G88NExTN2oPTI1AJ+7mZfYW3cDCTyoH6OnctBKbBVeJCEqh0U02lTkqD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.9.2.tgz",
+      "integrity": "sha512-Uk64NoiTpQbkpl+bXsbeyOPRpUoMdcUqa+hDC1KhMW7aN1lfW8PBlBH4mJ3n3Y47dYE8qi0XTxy1mBACruYBaw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
+      "optional": true,
+      "os": [
+        "linux"
+      ]
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.9.2.tgz",
+      "integrity": "sha512-EpBGwkcjDicjR/ybC0g8wO5adPNdVuMrNalVgYcWi+gYtC1XYNuxe3rufcO7dA76OHGeVabcO6cSkPJKVcbCXQ==",
+      "cpu": [
+        "wasm32"
+      ],
       "dev": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "@napi-rs/wasm-runtime": "^0.2.11"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
-      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.9.2.tgz",
+      "integrity": "sha512-EdFbGn7o1SxGmN6aZw9wAkehZJetFPao0VGZ9OMBwKx6TkvDuj6cNeLimF/Psi6ts9lMOe+Dt6z19fZQ9Ye2fw==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "6.21.0",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.9.2.tgz",
+      "integrity": "sha512-JY9hi1p7AG+5c/dMU8o2kWemM8I6VZxfGwn1GCtf3c5i+IKcMo2NQ8OjZ4Z3/itvY/Si3K10jOBQn7qsD/whUA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.9.2.tgz",
+      "integrity": "sha512-ryoo+EB19lMxAd80ln9BVf8pdOAxLb97amrQ3SFN9OCRn/5M5wvwDgAe4i8ZjhpbiHoDeP8yavcTEnpKBo7lZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -2620,25 +3434,29 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -2649,13 +3467,15 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -2668,6 +3488,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -2677,6 +3498,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -2685,13 +3507,15 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -2708,6 +3532,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -2721,6 +3546,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -2733,6 +3559,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -2747,6 +3574,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -2756,19 +3584,22 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+      "dev": true,
+      "license": "BSD-3-Clause"
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2781,6 +3612,7 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -2790,6 +3622,7 @@
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
       "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "clean-stack": "^2.0.0",
         "indent-string": "^4.0.0"
@@ -2803,6 +3636,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2819,6 +3653,7 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -2836,6 +3671,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -2851,13 +3687,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -2867,6 +3705,7 @@
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
       "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -2876,6 +3715,7 @@
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
       "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.21.3"
       },
@@ -2886,6 +3726,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -2894,6 +3747,7 @@
       "engines": [
         "node >= 0.8.0"
       ],
+      "license": "Apache-2.0",
       "bin": {
         "ansi-html": "bin/ansi-html"
       }
@@ -2903,8 +3757,25 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/anymatch": {
@@ -2912,6 +3783,7 @@
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2938,31 +3810,35 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "dev": true,
+      "license": "Python-2.0"
     },
     "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
       "dev": true,
-      "dependencies": {
-        "dequal": "^2.0.3"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2972,17 +3848,20 @@
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "is-string": "^1.0.7"
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2996,6 +3875,7 @@
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -3005,6 +3885,7 @@
       "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
       "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -3021,17 +3902,19 @@
       }
     },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
-      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.9",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3041,15 +3924,16 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
-      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3059,15 +3943,16 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
-      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3076,23 +3961,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.toreversed": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
-      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
-      }
-    },
     "node_modules/array.prototype.tosorted": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
       "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -3105,19 +3979,19 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.2.1",
-        "get-intrinsic": "^1.2.3",
-        "is-array-buffer": "^3.0.4",
-        "is-shared-array-buffer": "^1.0.2"
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3131,6 +4005,7 @@
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
       "integrity": "sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "safer-buffer": "~2.1.0"
       }
@@ -3140,6 +4015,7 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8"
       }
@@ -3149,6 +4025,7 @@
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
       "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.1"
       },
@@ -3160,42 +4037,57 @@
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/async": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
-      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==",
-      "dev": true
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">= 4.0.0"
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
         {
@@ -3211,12 +4103,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -3234,6 +4127,7 @@
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
       },
@@ -3249,6 +4143,7 @@
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
       "integrity": "sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
@@ -3257,7 +4152,8 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.13.2.tgz",
       "integrity": "sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/axe-core": {
       "version": "4.10.3",
@@ -3270,19 +4166,36 @@
       }
     },
     "node_modules/axobject-query": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
-      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
       "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
       "dependencies": {
-        "dequal": "^2.0.3"
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
       }
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -3302,13 +4215,15 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "tweetnacl": "^0.14.3"
       }
@@ -3318,6 +4233,7 @@
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
       "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "open": "^8.0.4"
       },
@@ -3330,6 +4246,7 @@
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "*"
       }
@@ -3339,6 +4256,7 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
       "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -3350,19 +4268,22 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
       "integrity": "sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
     },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
       "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
@@ -3380,6 +4301,7 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -3394,9 +4316,9 @@
       "dev": true
     },
     "node_modules/browserslist": {
-      "version": "4.24.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
-      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
       "dev": true,
       "funding": [
         {
@@ -3412,11 +4334,12 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001688",
-        "electron-to-chromium": "^1.5.73",
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
         "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.1"
+        "update-browserslist-db": "^1.1.3"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -3426,9 +4349,9 @@
       }
     },
     "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
       "dev": true,
       "funding": [
         {
@@ -3444,9 +4367,10 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
+        "ieee754": "^1.2.1"
       }
     },
     "node_modules/buffer-crc32": {
@@ -3454,6 +4378,7 @@
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "*"
       }
@@ -3462,7 +4387,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/busboy": {
       "version": "1.6.0",
@@ -3480,6 +4406,7 @@
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
       "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3488,7 +4415,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
@@ -3506,7 +4433,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2"
@@ -3519,7 +4446,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "get-intrinsic": "^1.3.0"
@@ -3535,7 +4462,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3545,15 +4472,16 @@
       "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
       "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "pascal-case": "^3.1.2",
         "tslib": "^2.0.3"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001706",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001706.tgz",
-      "integrity": "sha512-3ZczoTApMAZwPKYWmwVbQMFpXBDds3/0VciVoUwPUbldlYyVLmRVuRs/PcUZtHpbLRpzzDvrvnFuREsGt6lUug==",
+      "version": "1.0.30001726",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz",
+      "integrity": "sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==",
       "funding": [
         {
           "type": "opencollective",
@@ -3567,13 +4495,15 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
       "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -3582,13 +4512,45 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==",
-      "dev": true
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/check-more-types": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz",
       "integrity": "sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -3598,6 +4560,7 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -3622,6 +4585,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -3629,11 +4593,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chromatic": {
-      "version": "11.27.0",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.27.0.tgz",
-      "integrity": "sha512-jQ2ufjS+ePpg+NtcPI9B2eOi+pAzlRd2nhd1LgNMsVCC9Bzf5t8mJtyd8v2AUuJS0LdX0QVBgkOnlNv9xviHzA==",
+      "version": "11.29.0",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.29.0.tgz",
+      "integrity": "sha512-yisBlntp9hHVj19lIQdpTlcYIXuU9H/DbFuu6tyWHmj6hWT2EtukCCcxYXL78XdQt1vm2GfIrtgtKpj/Rzmo4A==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "chroma": "dist/bin.js",
         "chromatic": "dist/bin.js",
@@ -3657,6 +4632,7 @@
       "resolved": "https://registry.npmjs.org/chrome-remote-interface/-/chrome-remote-interface-0.33.3.tgz",
       "integrity": "sha512-zNnn0prUL86Teru6UCAZ1yU1XeXljHl3gj7OrfPcarEfU62OUU4IujDPdTDW3dAWwRqN3ZMG/Chhkh2gPL/wiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "commander": "2.11.x",
         "ws": "^7.2.0"
@@ -3665,17 +4641,12 @@
         "chrome-remote-interface": "bin/client.js"
       }
     },
-    "node_modules/chrome-remote-interface/node_modules/commander": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
-      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
-      "dev": true
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.0"
       }
@@ -3691,6 +4662,7 @@
           "url": "https://github.com/sponsors/sibiraj-s"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -3699,13 +4671,15 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
       "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
       "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "source-map": "~0.6.0"
       },
@@ -3718,6 +4692,7 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3727,6 +4702,7 @@
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -3736,6 +4712,7 @@
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -3764,6 +4741,7 @@
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
       "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "slice-ansi": "^3.0.0",
         "string-width": "^4.2.0"
@@ -3778,26 +4756,15 @@
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
-    },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
     },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -3809,23 +4776,15 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true
-    },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/colors": {
       "version": "1.4.0",
@@ -3843,6 +4802,7 @@
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3851,19 +4811,18 @@
       }
     },
     "node_modules/commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==",
       "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
+      "license": "MIT"
     },
     "node_modules/common-tags": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.2.tgz",
       "integrity": "sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4.0.0"
       }
@@ -3872,25 +4831,34 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
       "integrity": "sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.2.1",
@@ -3902,6 +4870,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3922,6 +4899,7 @@
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
       "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.33",
@@ -3957,6 +4935,7 @@
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
       "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0",
         "css-what": "^6.0.1",
@@ -3973,6 +4952,7 @@
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">= 6"
       },
@@ -3985,6 +4965,7 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -3996,12 +4977,12 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/cypress": {
-      "version": "14.4.1",
-      "resolved": "https://registry.npmjs.org/cypress/-/cypress-14.4.1.tgz",
-      "integrity": "sha512-YSGvVXtTqSGRTyHbaxHI5dHU/9xc5ymaTIM4BU85GKhj980y6XgA3fShSpj5DatS8knXMsAvYItQxVQFHGpUtw==",
+      "version": "14.5.0",
+      "resolved": "https://registry.npmjs.org/cypress/-/cypress-14.5.0.tgz",
+      "integrity": "sha512-1HOnKvWep0LkWuFwPeWkZ0TDl7ivi2/Mz+WNU4dfkeLJaFndS3Ow6TXT7YjuTqLFI2peJKzPKljVUFdymI2K5g==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -4032,6 +5013,7 @@
         "figures": "^3.2.0",
         "fs-extra": "^9.1.0",
         "getos": "^3.2.1",
+        "hasha": "5.2.2",
         "is-installed-globally": "~0.4.0",
         "lazy-ass": "^1.6.0",
         "listr2": "^3.8.3",
@@ -4071,75 +5053,54 @@
         "cypress": "^10 || ^11 || ^12 || ^13 || ^14"
       }
     },
-    "node_modules/cypress/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/cypress/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/cypress/node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+    "node_modules/cypress/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
       }
     },
-    "node_modules/cypress/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+    "node_modules/cypress/node_modules/commander": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
       "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
+        "node": ">= 6"
       }
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
-      "dev": true
+      "dev": true,
+      "license": "BSD-2-Clause"
     },
     "node_modules/dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
       "integrity": "sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
       },
@@ -4148,14 +5109,15 @@
       }
     },
     "node_modules/data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4165,29 +5127,31 @@
       }
     },
     "node_modules/data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/inspect-js"
       }
     },
     "node_modules/data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
         "is-data-view": "^1.0.1"
       },
@@ -4199,18 +5163,19 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
-      "dev": true
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
-      "dev": true,
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -4225,13 +5190,15 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4240,7 +5207,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -4258,6 +5225,7 @@
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
       "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -4267,6 +5235,7 @@
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.0.1",
         "has-property-descriptors": "^1.0.0",
@@ -4284,6 +5253,7 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4293,15 +5263,17 @@
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
-      "devOptional": true,
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
       }
@@ -4311,6 +5283,7 @@
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
       "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-type": "^4.0.0"
       },
@@ -4323,6 +5296,7 @@
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -4335,6 +5309,7 @@
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
       "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "utila": "~0.4"
       }
@@ -4344,6 +5319,7 @@
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
       "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.2.0",
@@ -4363,13 +5339,15 @@
           "type": "github",
           "url": "https://github.com/sponsors/fb55"
         }
-      ]
+      ],
+      "license": "BSD-2-Clause"
     },
     "node_modules/domhandler": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
       "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.2.0"
       },
@@ -4385,6 +5363,7 @@
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
       "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^1.0.1",
         "domelementtype": "^2.2.0",
@@ -4399,6 +5378,7 @@
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
       "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -4409,6 +5389,7 @@
       "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz",
       "integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -4417,7 +5398,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
         "es-errors": "^1.3.0",
@@ -4431,53 +5412,60 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.120",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.120.tgz",
-      "integrity": "sha512-oTUp3gfX1gZI+xfD2djr2rzQdHCwHzPQrrK0CD7WpTdF0nPdQ/INcRVjWgLdCT4a9W3jFObR9DAfsuyFQnI8CQ==",
-      "dev": true
+      "version": "1.5.176",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.176.tgz",
+      "integrity": "sha512-2nDK9orkm7M9ZZkjO3PjbEd3VUulQLyg5T9O3enJdFvUg46Hzd4DUvTvAuEgbdHYXyFsiG4A5sO9IzToMH1cDg==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
     },
     "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "once": "^1.4.0"
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
-      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -4491,6 +5479,7 @@
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -4504,6 +5493,7 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -4512,63 +5502,72 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
-      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "arraybuffer.prototype.slice": "^1.0.3",
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
-        "es-define-property": "^1.0.0",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.0.3",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.4",
-        "get-symbol-description": "^1.0.2",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "internal-slot": "^1.0.7",
-        "is-array-buffer": "^3.0.4",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
         "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.1",
+        "is-data-view": "^1.0.2",
         "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.3",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.13",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.13.1",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
-        "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.2",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.9",
-        "string.prototype.trimend": "^1.0.8",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
         "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.6",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.15"
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4581,7 +5580,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -4590,47 +5589,51 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
-      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.3",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-set-tostringtag": "^2.0.3",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.1.2"
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
-      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
-      "dev": true
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -4643,6 +5646,7 @@
       "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
       "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.6",
@@ -4654,23 +5658,28 @@
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4680,11 +5689,12 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.25.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
-      "integrity": "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==",
+      "version": "0.25.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
+      "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -4692,31 +5702,31 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.1",
-        "@esbuild/android-arm": "0.25.1",
-        "@esbuild/android-arm64": "0.25.1",
-        "@esbuild/android-x64": "0.25.1",
-        "@esbuild/darwin-arm64": "0.25.1",
-        "@esbuild/darwin-x64": "0.25.1",
-        "@esbuild/freebsd-arm64": "0.25.1",
-        "@esbuild/freebsd-x64": "0.25.1",
-        "@esbuild/linux-arm": "0.25.1",
-        "@esbuild/linux-arm64": "0.25.1",
-        "@esbuild/linux-ia32": "0.25.1",
-        "@esbuild/linux-loong64": "0.25.1",
-        "@esbuild/linux-mips64el": "0.25.1",
-        "@esbuild/linux-ppc64": "0.25.1",
-        "@esbuild/linux-riscv64": "0.25.1",
-        "@esbuild/linux-s390x": "0.25.1",
-        "@esbuild/linux-x64": "0.25.1",
-        "@esbuild/netbsd-arm64": "0.25.1",
-        "@esbuild/netbsd-x64": "0.25.1",
-        "@esbuild/openbsd-arm64": "0.25.1",
-        "@esbuild/openbsd-x64": "0.25.1",
-        "@esbuild/sunos-x64": "0.25.1",
-        "@esbuild/win32-arm64": "0.25.1",
-        "@esbuild/win32-ia32": "0.25.1",
-        "@esbuild/win32-x64": "0.25.1"
+        "@esbuild/aix-ppc64": "0.25.5",
+        "@esbuild/android-arm": "0.25.5",
+        "@esbuild/android-arm64": "0.25.5",
+        "@esbuild/android-x64": "0.25.5",
+        "@esbuild/darwin-arm64": "0.25.5",
+        "@esbuild/darwin-x64": "0.25.5",
+        "@esbuild/freebsd-arm64": "0.25.5",
+        "@esbuild/freebsd-x64": "0.25.5",
+        "@esbuild/linux-arm": "0.25.5",
+        "@esbuild/linux-arm64": "0.25.5",
+        "@esbuild/linux-ia32": "0.25.5",
+        "@esbuild/linux-loong64": "0.25.5",
+        "@esbuild/linux-mips64el": "0.25.5",
+        "@esbuild/linux-ppc64": "0.25.5",
+        "@esbuild/linux-riscv64": "0.25.5",
+        "@esbuild/linux-s390x": "0.25.5",
+        "@esbuild/linux-x64": "0.25.5",
+        "@esbuild/netbsd-arm64": "0.25.5",
+        "@esbuild/netbsd-x64": "0.25.5",
+        "@esbuild/openbsd-arm64": "0.25.5",
+        "@esbuild/openbsd-x64": "0.25.5",
+        "@esbuild/sunos-x64": "0.25.5",
+        "@esbuild/win32-arm64": "0.25.5",
+        "@esbuild/win32-ia32": "0.25.5",
+        "@esbuild/win32-x64": "0.25.5"
       }
     },
     "node_modules/esbuild-register": {
@@ -4724,6 +5734,7 @@
       "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
       "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4"
       },
@@ -4736,6 +5747,7 @@
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -4744,7 +5756,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -4753,16 +5765,18 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "version": "8.57.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+      "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint/js": "8.57.1",
+        "@humanwhocodes/config-array": "^0.13.0",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -4812,6 +5826,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.1.2.tgz",
       "integrity": "sha512-g46mlgWmHoWhHuDbaQS8PLNQtBkVkiQMnVLhFcqnPSXN2I+R4Obom3ihCIQuNLbjVUgiFFHqmEwwtDuWv1wYKA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@next/eslint-plugin-next": "14.1.2",
         "@rushstack/eslint-patch": "^1.3.3",
@@ -4838,6 +5853,7 @@
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
       "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7",
         "is-core-module": "^2.13.0",
@@ -4849,40 +5865,52 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
-      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "debug": "^4.3.4",
-        "enhanced-resolve": "^5.12.0",
-        "eslint-module-utils": "^2.7.4",
-        "fast-glob": "^3.3.1",
-        "get-tsconfig": "^4.5.0",
-        "is-core-module": "^2.11.0",
-        "is-glob": "^4.0.3"
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
       },
       "peerDependencies": {
         "eslint": "*",
-        "eslint-plugin-import": "*"
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
-      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7"
       },
@@ -4900,39 +5928,43 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
-      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlastindex": "^1.2.3",
-        "array.prototype.flat": "^1.3.2",
-        "array.prototype.flatmap": "^1.3.2",
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.8.0",
-        "hasown": "^2.0.0",
-        "is-core-module": "^2.13.1",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.7",
-        "object.groupby": "^1.0.1",
-        "object.values": "^1.1.7",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
         "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
         "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
       }
     },
     "node_modules/eslint-plugin-import/node_modules/debug": {
@@ -4940,6 +5972,7 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
@@ -4949,6 +5982,7 @@
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
       "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -4961,86 +5995,80 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz",
-      "integrity": "sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==",
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
-        "aria-query": "^5.3.0",
-        "array-includes": "^3.1.7",
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
         "array.prototype.flatmap": "^1.3.2",
         "ast-types-flow": "^0.0.8",
-        "axe-core": "=4.7.0",
-        "axobject-query": "^3.2.1",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
         "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
-        "es-iterator-helpers": "^1.0.15",
-        "hasown": "^2.0.0",
+        "hasown": "^2.0.2",
         "jsx-ast-utils": "^3.3.5",
         "language-tags": "^1.0.9",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.7",
-        "object.fromentries": "^2.0.7"
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
       },
       "engines": {
         "node": ">=4.0"
       },
       "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
-      }
-    },
-    "node_modules/eslint-plugin-jsx-a11y/node_modules/axe-core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz",
-      "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.34.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.2.tgz",
-      "integrity": "sha512-2HCmrU+/JNigDN6tg55cRDKCQWicYAPB38JGSFDQt95jDm8rrvSUo7YPkOIm5l6ts1j1zCvysNcasvfTMQzUOw==",
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
-        "array.prototype.flatmap": "^1.3.2",
-        "array.prototype.toreversed": "^1.1.2",
-        "array.prototype.tosorted": "^1.1.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.19",
+        "es-iterator-helpers": "^1.2.1",
         "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.8",
+        "object.entries": "^1.1.9",
         "object.fromentries": "^2.0.8",
-        "object.hasown": "^1.1.4",
-        "object.values": "^1.2.0",
+        "object.values": "^1.2.1",
         "prop-types": "^15.8.1",
         "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.11"
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
       },
       "engines": {
         "node": ">=4"
       },
       "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
-      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "version": "5.0.0-canary-7118f5dd7-20230705",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -5053,6 +6081,7 @@
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
       "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -5065,6 +6094,7 @@
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
       "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -5082,6 +6112,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -5091,6 +6122,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
       "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -5107,6 +6139,7 @@
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -5114,42 +6147,12 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/eslint/node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
       "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -5165,6 +6168,7 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
       },
@@ -5177,6 +6181,7 @@
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
@@ -5194,6 +6199,7 @@
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
         "esvalidate": "bin/esvalidate.js"
@@ -5203,10 +6209,11 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -5219,6 +6226,7 @@
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -5231,6 +6239,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
@@ -5240,6 +6249,7 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5248,13 +6258,15 @@
       "version": "6.4.7",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.7.tgz",
       "integrity": "sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
       }
@@ -5264,6 +6276,7 @@
       "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
       "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "get-stream": "^5.0.0",
@@ -5287,6 +6300,7 @@
       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
       "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "pify": "^2.2.0"
       },
@@ -5298,13 +6312,15 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
@@ -5327,25 +6343,27 @@
       "dev": true,
       "engines": [
         "node >=0.6.0"
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "micromatch": "^4.0.8"
       },
       "engines": {
         "node": ">=8.6.0"
@@ -5356,6 +6374,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -5367,13 +6386,15 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/fast-uri": {
       "version": "3.0.6",
@@ -5389,13 +6410,15 @@
           "type": "opencollective",
           "url": "https://opencollective.com/fastify"
         }
-      ]
+      ],
+      "license": "BSD-3-Clause"
     },
     "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -5405,6 +6428,7 @@
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "pend": "~1.2.0"
       }
@@ -5414,6 +6438,7 @@
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
       "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "escape-string-regexp": "^1.0.5"
       },
@@ -5429,6 +6454,7 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
       }
@@ -5438,6 +6464,7 @@
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -5450,6 +6477,7 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -5457,11 +6485,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -5478,6 +6513,7 @@
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
       "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.3",
@@ -5488,27 +6524,36 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.3"
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/foreground-child": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
-      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
+        "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
       },
       "engines": {
@@ -5523,6 +6568,7 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=14"
       },
@@ -5535,6 +6581,7 @@
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
       "integrity": "sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "*"
       }
@@ -5544,6 +6591,7 @@
       "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz",
       "integrity": "sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "chalk": "^4.1.2",
@@ -5567,42 +6615,12 @@
         "webpack": "^5.11.0"
       }
     },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -5613,14 +6631,16 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -5632,6 +6652,7 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "*"
       },
@@ -5645,6 +6666,7 @@
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
       "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "at-least-node": "^1.0.0",
         "graceful-fs": "^4.2.0",
@@ -5659,13 +6681,15 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz",
       "integrity": "sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==",
-      "dev": true
+      "dev": true,
+      "license": "Unlicense"
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -5673,6 +6697,7 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -5685,21 +6710,24 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/function.prototype.name": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "functions-have-names": "^1.2.3"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5713,6 +6741,7 @@
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5721,7 +6750,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
@@ -5745,7 +6774,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
         "es-object-atoms": "^1.0.0"
@@ -5759,6 +6788,7 @@
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -5770,14 +6800,15 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4"
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5787,10 +6818,11 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.7.5",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.5.tgz",
-      "integrity": "sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
       },
@@ -5803,6 +6835,7 @@
       "resolved": "https://registry.npmjs.org/getos/-/getos-3.2.1.tgz",
       "integrity": "sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "async": "^3.2.0"
       }
@@ -5812,6 +6845,7 @@
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
       "integrity": "sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0"
       }
@@ -5821,6 +6855,7 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -5843,6 +6878,7 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -5854,7 +6890,8 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+      "dev": true,
+      "license": "BSD-2-Clause"
     },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.2",
@@ -5867,10 +6904,11 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -5886,6 +6924,7 @@
       "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.1.tgz",
       "integrity": "sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ini": "2.0.0"
       },
@@ -5896,11 +6935,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/globalthis": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
       "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-properties": "^1.2.1",
         "gopd": "^1.0.1"
@@ -5917,6 +6966,7 @@
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
       "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
@@ -5936,7 +6986,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -5948,19 +6998,24 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "license": "ISC"
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5970,6 +7025,7 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -5978,7 +7034,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -5987,10 +7043,14 @@
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -6002,7 +7062,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6015,6 +7075,7 @@
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -6025,11 +7086,38 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasha": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz",
+      "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-stream": "^2.0.0",
+        "type-fest": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hasha/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6042,14 +7130,24 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/html-entities": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz",
-      "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
       "dev": true,
       "funding": [
         {
@@ -6060,13 +7158,15 @@
           "type": "patreon",
           "url": "https://patreon.com/mdevils"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
       "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "camel-case": "^4.1.2",
         "clean-css": "^5.2.2",
@@ -6088,6 +7188,7 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 12"
       }
@@ -6097,6 +7198,7 @@
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
       "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/html-minifier-terser": "^6.0.0",
         "html-minifier-terser": "^6.0.2",
@@ -6136,6 +7238,7 @@
           "url": "https://github.com/sponsors/fb55"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.0.0",
@@ -6148,6 +7251,7 @@
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.4.0.tgz",
       "integrity": "sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "jsprim": "^2.0.2",
@@ -6162,6 +7266,7 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=8.12.0"
       }
@@ -6171,6 +7276,7 @@
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -6196,22 +7302,24 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "BSD-3-Clause"
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
     },
     "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -6228,6 +7336,7 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
       }
@@ -6237,6 +7346,7 @@
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -6247,6 +7357,7 @@
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -6256,13 +7367,15 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/ini": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
       "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=10"
       }
@@ -6272,14 +7385,15 @@
       "link": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6290,6 +7404,7 @@
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
       "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
         "has-tostringtag": "^1.0.2"
@@ -6302,13 +7417,15 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6321,15 +7438,20 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/is-async-function": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
-      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6339,12 +7461,16 @@
       }
     },
     "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-bigints": "^1.0.1"
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6355,6 +7481,7 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6363,13 +7490,14 @@
       }
     },
     "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6378,11 +7506,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6391,23 +7530,29 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-data-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
         "is-typed-array": "^1.1.13"
       },
       "engines": {
@@ -6418,12 +7563,14 @@
       }
     },
     "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6437,6 +7584,7 @@
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
       "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "is-docker": "cli.js"
       },
@@ -6452,17 +7600,22 @@
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/is-finalizationregistry": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
-      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6473,17 +7626,22 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6497,6 +7655,7 @@
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -6509,6 +7668,7 @@
       "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
       "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "global-dirs": "^3.0.0",
         "is-path-inside": "^3.0.2"
@@ -6525,6 +7685,7 @@
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
       "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6537,6 +7698,7 @@
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
       "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6549,17 +7711,20 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
     },
     "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6573,18 +7738,22 @@
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6598,6 +7767,7 @@
       "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
       "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6606,12 +7776,13 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7"
+        "call-bound": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6625,6 +7796,7 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -6633,12 +7805,14 @@
       }
     },
     "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6648,12 +7822,15 @@
       }
     },
     "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6663,12 +7840,13 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6681,13 +7859,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
@@ -6700,6 +7880,7 @@
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
       "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6708,25 +7889,30 @@
       }
     },
     "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-weakset": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
-      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4"
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6740,6 +7926,7 @@
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
       "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-docker": "^2.0.0"
       },
@@ -6751,31 +7938,38 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/iterator.prototype": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
-      "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "define-properties": "^1.2.1",
-        "get-intrinsic": "^1.2.1",
-        "has-symbols": "^1.0.3",
-        "reflect.getprototypeof": "^1.0.4",
-        "set-function-name": "^2.0.1"
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/jackspeak": {
@@ -6783,6 +7977,7 @@
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -6800,13 +7995,15 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/jest-worker": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -6816,26 +8013,12 @@
         "node": ">= 10.13.0"
       }
     },
-    "node_modules/jest-worker/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
-      }
-    },
     "node_modules/jiti": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
       "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -6843,13 +8026,15 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -6861,58 +8046,97 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
       "integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/jsdoc-type-pratt-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz",
       "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
       }
     },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "dev": true
+      "dev": true,
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
       "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -6925,6 +8149,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -6932,6 +8157,15 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsprim": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
@@ -6940,6 +8174,7 @@
       "engines": [
         "node >=0.6.0"
       ],
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -6952,6 +8187,7 @@
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
       "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.6",
         "array.prototype.flat": "^1.3.1",
@@ -6962,11 +8198,18 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/keycode": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
+      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
+      "license": "MIT"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -6975,13 +8218,15 @@
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
       "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
-      "dev": true
+      "dev": true,
+      "license": "CC0-1.0"
     },
     "node_modules/language-tags": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
       "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "language-subtag-registry": "^0.3.20"
       },
@@ -6994,6 +8239,7 @@
       "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
       "integrity": "sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "> 0.8"
       }
@@ -7003,6 +8249,7 @@
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -7012,10 +8259,11 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
-      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "dev": true,
+      "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
       },
@@ -7027,26 +8275,27 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.29.2",
-        "lightningcss-darwin-x64": "1.29.2",
-        "lightningcss-freebsd-x64": "1.29.2",
-        "lightningcss-linux-arm-gnueabihf": "1.29.2",
-        "lightningcss-linux-arm64-gnu": "1.29.2",
-        "lightningcss-linux-arm64-musl": "1.29.2",
-        "lightningcss-linux-x64-gnu": "1.29.2",
-        "lightningcss-linux-x64-musl": "1.29.2",
-        "lightningcss-win32-arm64-msvc": "1.29.2",
-        "lightningcss-win32-x64-msvc": "1.29.2"
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
-      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -7060,13 +8309,14 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
-      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -7080,13 +8330,14 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
-      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "freebsd"
@@ -7100,13 +8351,14 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
-      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
       "cpu": [
         "arm"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -7120,13 +8372,14 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
-      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -7140,13 +8393,14 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
-      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -7160,13 +8414,14 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
-      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -7180,13 +8435,14 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
-      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -7200,13 +8456,14 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
-      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
       "cpu": [
         "arm64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -7220,13 +8477,14 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
-      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
       "cpu": [
         "x64"
       ],
       "dev": true,
+      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -7243,13 +8501,14 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/listr2": {
       "version": "3.14.0",
       "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",
       "integrity": "sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cli-truncate": "^2.1.0",
         "colorette": "^2.0.16",
@@ -7272,26 +8531,12 @@
         }
       }
     },
-    "node_modules/listr2/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/listr2/node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -7309,6 +8554,7 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.11.5"
       }
@@ -7318,6 +8564,7 @@
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
       "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -7332,6 +8579,7 @@
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -7344,6 +8592,7 @@
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -7358,25 +8607,29 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/log-symbols": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -7388,42 +8641,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-symbols/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/log-symbols/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/log-update": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
       "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-escapes": "^4.3.0",
         "cli-cursor": "^3.1.0",
@@ -7437,26 +8660,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-update/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/log-update/node_modules/slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -7474,6 +8683,7 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
       "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -7487,6 +8697,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -7499,24 +8710,24 @@
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
       "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.3"
       }
     },
     "node_modules/lru-cache": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz",
-      "integrity": "sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==",
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true,
-      "engines": {
-        "node": "14 || >=16.14"
-      }
+      "license": "ISC"
     },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
       "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
@@ -7525,13 +8736,14 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
       "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -7541,6 +8753,7 @@
       "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz",
       "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==",
       "dev": true,
+      "license": "Unlicense",
       "dependencies": {
         "fs-monkey": "^1.0.4"
       },
@@ -7553,6 +8766,7 @@
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
       "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "map-or-similar": "^1.5.0"
       }
@@ -7561,13 +8775,15 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -7577,6 +8793,7 @@
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -7590,6 +8807,7 @@
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -7599,6 +8817,7 @@
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -7611,6 +8830,7 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -7620,6 +8840,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -7632,6 +8853,7 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7641,15 +8863,66 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.6.0.tgz",
+      "integrity": "sha512-ldA5lRNm3iJCWZcBCab4pnNL3HSZYXVb/3TYr75/1WCTWYuTqYUb5f/S384pncYjJ88lbO8Z4uPDvmoluHJc8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
@@ -7661,6 +8934,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -7668,54 +8942,72 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-postinstall": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.2.4.tgz",
+      "integrity": "sha512-ZEzHJwBhZ8qQSbknHqYcdtQVr8zUgGyM/q6h6qAyhtyVMNrSgDhrC4disf03dYW0e+czXyLnZINnCTEkWy0eJg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.3.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.3.1.tgz",
-      "integrity": "sha512-8+dDV0xNLOgHlyBxP1GwHGVaNXsmp+2NhZEYrXr24GWLHtt27YrBPbPuHvzlhi7kZNYjeJNR93IF5zfFu5UL0g==",
+      "version": "14.2.30",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.30.tgz",
+      "integrity": "sha512-+COdu6HQrHHFQ1S/8BBsCag61jZacmvbuL2avHvQFbWa2Ox7bE+d8FyNgxRLjXQ5wtPyQwEmk85js/AuaG2Sbg==",
+      "license": "MIT",
       "dependencies": {
-        "@next/env": "15.3.1",
-        "@swc/counter": "0.1.3",
-        "@swc/helpers": "0.5.15",
+        "@next/env": "14.2.30",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.6"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+        "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.3.1",
-        "@next/swc-darwin-x64": "15.3.1",
-        "@next/swc-linux-arm64-gnu": "15.3.1",
-        "@next/swc-linux-arm64-musl": "15.3.1",
-        "@next/swc-linux-x64-gnu": "15.3.1",
-        "@next/swc-linux-x64-musl": "15.3.1",
-        "@next/swc-win32-arm64-msvc": "15.3.1",
-        "@next/swc-win32-x64-msvc": "15.3.1",
-        "sharp": "^0.34.1"
+        "@next/swc-darwin-arm64": "14.2.30",
+        "@next/swc-darwin-x64": "14.2.30",
+        "@next/swc-linux-arm64-gnu": "14.2.30",
+        "@next/swc-linux-arm64-musl": "14.2.30",
+        "@next/swc-linux-x64-gnu": "14.2.30",
+        "@next/swc-linux-x64-musl": "14.2.30",
+        "@next/swc-win32-arm64-msvc": "14.2.30",
+        "@next/swc-win32-ia32-msvc": "14.2.30",
+        "@next/swc-win32-x64-msvc": "14.2.30"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
         "@playwright/test": "^1.41.2",
-        "babel-plugin-react-compiler": "*",
-        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
-        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "sass": "^1.3.0"
       },
       "peerDependenciesMeta": {
@@ -7725,9 +9017,6 @@
         "@playwright/test": {
           "optional": true
         },
-        "babel-plugin-react-compiler": {
-          "optional": true
-        },
         "sass": {
           "optional": true
         }
@@ -7751,6 +9040,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -7765,22 +9055,31 @@
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
       "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "lower-case": "^2.0.2",
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/no-scroll": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
+      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ==",
+      "license": "MIT"
+    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
       "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -7800,13 +9099,15 @@
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7816,6 +9117,7 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7825,6 +9127,7 @@
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
       "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.0.0"
       },
@@ -7837,6 +9140,7 @@
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "boolbase": "^1.0.0"
       },
@@ -7848,7 +9152,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7858,6 +9162,7 @@
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
       "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -7869,20 +9174,23 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -7893,14 +9201,16 @@
       }
     },
     "node_modules/object.entries": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
-      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-object-atoms": "^1.0.0"
+        "es-object-atoms": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7911,6 +9221,7 @@
       "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
       "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -7929,6 +9240,7 @@
       "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
       "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -7938,30 +9250,15 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/object.hasown": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
-      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
@@ -7977,6 +9274,7 @@
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "wrappy": "1"
       }
@@ -7986,6 +9284,7 @@
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -8001,6 +9300,7 @@
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
       "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-lazy-prop": "^2.0.0",
         "is-docker": "^2.1.1",
@@ -8018,6 +9318,7 @@
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -8034,13 +9335,33 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
       "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -8056,6 +9377,7 @@
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -8071,6 +9393,7 @@
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
       "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "aggregate-error": "^3.0.0"
       },
@@ -8086,6 +9409,7 @@
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
       "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "dot-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -8095,7 +9419,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -8107,7 +9431,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -8126,6 +9450,7 @@
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
       "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
         "tslib": "^2.0.3"
@@ -8135,13 +9460,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -8151,6 +9478,7 @@
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8160,6 +9488,7 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -8168,13 +9497,14 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/path-scurry": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -8190,7 +9520,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -8199,24 +9529,28 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },
@@ -8229,6 +9563,7 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8238,6 +9573,7 @@
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
       "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.17.8"
       },
@@ -8246,18 +9582,19 @@
       }
     },
     "node_modules/possible-typed-array-names": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -8273,8 +9610,9 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -8287,6 +9625,7 @@
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
       "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
       "dev": true,
+      "license": "ISC",
       "engines": {
         "node": "^10 || ^12 || >= 14"
       },
@@ -8299,6 +9638,7 @@
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
       "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.0.0",
         "postcss-selector-parser": "^7.0.0",
@@ -8311,26 +9651,30 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
-      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-modules-scope": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
       "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
       "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "postcss-selector-parser": "^7.0.0"
+        "icss-utils": "^5.0.0"
       },
       "engines": {
         "node": "^10 || ^12 || >= 14"
@@ -8339,11 +9683,12 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
+    "node_modules/postcss-selector-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8352,32 +9697,19 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -8387,6 +9719,7 @@
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       },
@@ -8399,6 +9732,7 @@
       "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
       "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "lodash": "^4.17.20",
         "renderkid": "^3.0.0"
@@ -8409,6 +9743,7 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -8417,7 +9752,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -8428,13 +9763,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
       "integrity": "sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -8445,6 +9782,7 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -8454,6 +9792,7 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
       "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
       },
@@ -8482,13 +9821,15 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -8498,6 +9839,7 @@
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
       "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -8506,6 +9848,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8517,6 +9860,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8529,13 +9873,14 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "license": "MIT"
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -8548,6 +9893,7 @@
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
       "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ast-types": "^0.16.1",
         "esprima": "~4.0.0",
@@ -8564,23 +9910,26 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
-      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.1",
+        "es-abstract": "^1.23.9",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "globalthis": "^1.0.3",
-        "which-builtin-type": "^1.1.3"
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8589,22 +9938,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
-    },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
         "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8618,6 +9964,7 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.10"
       }
@@ -8627,6 +9974,7 @@
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
       "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "css-select": "^4.1.3",
         "dom-converter": "^0.2.0",
@@ -8640,6 +9988,7 @@
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
       "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "throttleit": "^1.0.0"
       }
@@ -8649,23 +9998,27 @@
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.13.0",
+        "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
       "bin": {
         "resolve": "bin/resolve"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -8674,7 +10027,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -8684,6 +10037,7 @@
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
@@ -8693,6 +10047,7 @@
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -8702,10 +10057,11 @@
       }
     },
     "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -8715,7 +10071,8 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
@@ -8723,6 +10080,7 @@
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -8739,6 +10097,7 @@
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -8773,28 +10132,32 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
     },
     "node_modules/rxjs": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
-      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.1.0"
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4",
-        "has-symbols": "^1.0.3",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
         "isarray": "^2.0.5"
       },
       "engines": {
@@ -8822,23 +10185,43 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/safe-identifier": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
       "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
-        "is-regex": "^1.1.4"
+        "is-regex": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8851,12 +10234,14 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
       "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
@@ -8866,6 +10251,7 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
       "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -8880,10 +10266,11 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "devOptional": true,
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -8896,6 +10283,7 @@
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -8904,7 +10292,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -8922,6 +10310,7 @@
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
       "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -8932,44 +10321,19 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/sharp": {
-      "version": "0.34.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.1.tgz",
-      "integrity": "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==",
-      "hasInstallScript": true,
-      "optional": true,
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.3",
-        "semver": "^7.7.1"
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/libvips"
-      },
-      "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.34.1",
-        "@img/sharp-darwin-x64": "0.34.1",
-        "@img/sharp-libvips-darwin-arm64": "1.1.0",
-        "@img/sharp-libvips-darwin-x64": "1.1.0",
-        "@img/sharp-libvips-linux-arm": "1.1.0",
-        "@img/sharp-libvips-linux-arm64": "1.1.0",
-        "@img/sharp-libvips-linux-ppc64": "1.1.0",
-        "@img/sharp-libvips-linux-s390x": "1.1.0",
-        "@img/sharp-libvips-linux-x64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
-        "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
-        "@img/sharp-linux-arm": "0.34.1",
-        "@img/sharp-linux-arm64": "0.34.1",
-        "@img/sharp-linux-s390x": "0.34.1",
-        "@img/sharp-linux-x64": "0.34.1",
-        "@img/sharp-linuxmusl-arm64": "0.34.1",
-        "@img/sharp-linuxmusl-x64": "0.34.1",
-        "@img/sharp-wasm32": "0.34.1",
-        "@img/sharp-win32-ia32": "0.34.1",
-        "@img/sharp-win32-x64": "0.34.1"
+        "node": ">= 0.4"
       }
     },
     "node_modules/shebang-command": {
@@ -8977,6 +10341,7 @@
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -8989,6 +10354,7 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -8998,6 +10364,7 @@
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
       "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3",
@@ -9017,6 +10384,7 @@
       "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
       "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
         "object-inspect": "^1.13.3"
@@ -9033,6 +10401,7 @@
       "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
       "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -9051,6 +10420,7 @@
       "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
       "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
@@ -9069,28 +10439,15 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
-    },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "optional": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -9100,6 +10457,7 @@
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
       "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -9109,25 +10467,20 @@
         "node": ">=8"
       }
     },
-    "node_modules/slice-ansi/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9137,6 +10490,7 @@
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -9147,6 +10501,7 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9156,6 +10511,7 @@
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
       "integrity": "sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -9176,13 +10532,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/storybook": {
-      "version": "8.6.7",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.7.tgz",
-      "integrity": "sha512-9gktoFMQDSCINNGQH869d/sar9rVtAhr0HchcvDA6bssAqgQJvTphY4qC9lH54SxfTJm/7Sy+BKEngMK+dziJg==",
+      "version": "8.5.8",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.5.8.tgz",
+      "integrity": "sha512-k3QDa7z4a656oO3Mx929KNm+xIdEI2nIDCKatVl1mA6vt+ge+uwoiG+ro182J9LOEppR5XXD2mQQi4u1xNsy6A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@storybook/core": "8.6.7"
+        "@storybook/core": "8.5.8"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -9215,6 +10593,7 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -9230,6 +10609,7 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -9243,32 +10623,51 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/string-width/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/string.prototype.matchall": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
-      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "gopd": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.7",
-        "regexp.prototype.flags": "^1.5.2",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
         "set-function-name": "^2.0.2",
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9277,16 +10676,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
-        "es-object-atoms": "^1.0.0"
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9296,15 +10710,20 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9314,6 +10733,7 @@
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
       "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
@@ -9331,6 +10751,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -9344,6 +10765,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -9356,6 +10778,7 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
       "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
@@ -9365,6 +10788,7 @@
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -9374,6 +10798,7 @@
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -9386,6 +10811,7 @@
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
       "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 12.13.0"
       },
@@ -9398,9 +10824,10 @@
       }
     },
     "node_modules/styled-jsx": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
-      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
       "dependencies": {
         "client-only": "0.0.1"
       },
@@ -9408,7 +10835,7 @@
         "node": ">= 12.0.0"
       },
       "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
       },
       "peerDependenciesMeta": {
         "@babel/core": {
@@ -9419,23 +10846,33 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -9444,28 +10881,49 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
-      "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==",
-      "dev": true
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/terser": {
-      "version": "5.39.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
-      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
+      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
+        "acorn": "^8.14.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -9481,6 +10939,7 @@
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
       "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -9515,6 +10974,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9531,6 +10991,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -9542,13 +11003,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
-      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
+      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -9567,19 +11030,22 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/throttleit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
       "integrity": "sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
@@ -9588,37 +11054,93 @@
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinycolor2": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
     },
     "node_modules/tldts": {
-      "version": "6.1.84",
-      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.84.tgz",
-      "integrity": "sha512-aRGIbCIF3teodtUFAYSdQONVmDRy21REM3o6JnqWn5ZkQBJJ4gHxhw6OfwQ+WkSAi3ASamrS4N4nyazWx6uTYg==",
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "tldts-core": "^6.1.84"
+        "tldts-core": "^6.1.86"
       },
       "bin": {
         "tldts": "bin/cli.js"
       }
     },
     "node_modules/tldts-core": {
-      "version": "6.1.84",
-      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.84.tgz",
-      "integrity": "sha512-NaQa1W76W2aCGjXybvnMYzGSM4x8fvG2AN/pla7qxcg0ZHbooOPhA8kctmOZUDfZyhDL27OGNbwAeig8P4p1vg==",
-      "dev": true
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tmp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.3.tgz",
       "integrity": "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14.14"
       }
@@ -9628,6 +11150,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -9640,6 +11163,7 @@
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
       "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "tldts": "^6.1.32"
       },
@@ -9651,22 +11175,25 @@
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "tree-kill": "cli.js"
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
-      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+      "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=16"
       },
@@ -9679,6 +11206,7 @@
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
       "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6.10"
       }
@@ -9688,6 +11216,7 @@
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
       "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json5": "^0.0.29",
         "json5": "^1.0.2",
@@ -9698,13 +11227,15 @@
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
       "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
         "safe-buffer": "^5.0.1"
       },
@@ -9716,13 +11247,15 @@
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
-      "dev": true
+      "dev": true,
+      "license": "Unlicense"
     },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -9731,42 +11264,45 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=10"
+        "node": ">=12.20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9776,17 +11312,19 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9796,17 +11334,18 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
         "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9816,10 +11355,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9828,32 +11368,64 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.40",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz",
+      "integrity": "sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bound": "^1.0.3",
         "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/undici-types": {
-      "version": "5.26.5",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
       "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -9863,6 +11435,7 @@
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz",
       "integrity": "sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "acorn": "^8.14.0",
         "webpack-virtual-modules": "^0.6.2"
@@ -9871,11 +11444,47 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/unrs-resolver": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.9.2.tgz",
+      "integrity": "sha512-VUyWiTNQD7itdiMuJy+EuLEErLj3uwX/EpHQF8EOf33Dq3Ju6VW1GXm+swk6+1h7a49uv9fKZ+dft9jU7esdLA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.2.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.9.2",
+        "@unrs/resolver-binding-android-arm64": "1.9.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.9.2",
+        "@unrs/resolver-binding-darwin-x64": "1.9.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.9.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.9.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.9.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.9.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.9.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.9.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.9.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.9.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.9.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.9.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.9.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.9.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.9.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.9.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.9.2"
+      }
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
       "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -9899,6 +11508,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "escalade": "^3.2.0",
         "picocolors": "^1.1.1"
@@ -9915,6 +11525,7 @@
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -9924,6 +11535,7 @@
       "resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
       "integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "punycode": "^1.4.1",
         "qs": "^6.12.3"
@@ -9936,13 +11548,15 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
       "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.3",
         "is-arguments": "^1.0.4",
@@ -9955,19 +11569,26 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/utila": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
       "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
       "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -9980,6 +11601,7 @@
       "engines": [
         "node >=0.6.0"
       ],
+      "license": "MIT",
       "dependencies": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -9987,10 +11609,11 @@
       }
     },
     "node_modules/watchpack": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
-      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
+      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -10003,16 +11626,19 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "dev": true,
+      "license": "BSD-2-Clause"
     },
     "node_modules/webpack": {
-      "version": "5.98.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.98.0.tgz",
-      "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
+      "version": "5.99.9",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.9.tgz",
+      "integrity": "sha512-brOPwM3JnmOa+7kd3NsmOUOwbDAj8FT9xDsG3IW0MgbN9yZV7Oi/s/+MNQ/EcSMqw7qfoRyXPoeEWT8zLVdVGg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "@webassemblyjs/ast": "^1.14.1",
         "@webassemblyjs/wasm-edit": "^1.14.1",
         "@webassemblyjs/wasm-parser": "^1.14.1",
@@ -10029,7 +11655,7 @@
         "loader-runner": "^4.2.0",
         "mime-types": "^2.1.27",
         "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.0",
+        "schema-utils": "^4.3.2",
         "tapable": "^2.1.1",
         "terser-webpack-plugin": "^5.3.11",
         "watchpack": "^2.4.1",
@@ -10056,6 +11682,7 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz",
       "integrity": "sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "colorette": "^2.0.10",
         "memfs": "^3.4.12",
@@ -10084,6 +11711,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -10100,6 +11728,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -10111,13 +11740,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
-      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
+      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -10137,6 +11768,7 @@
       "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz",
       "integrity": "sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-html-community": "0.0.8",
         "html-entities": "^2.1.0",
@@ -10144,10 +11776,11 @@
       }
     },
     "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.3.tgz",
+      "integrity": "sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10.13.0"
       }
@@ -10156,13 +11789,15 @@
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -10179,6 +11814,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -10191,6 +11827,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -10204,6 +11841,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
@@ -10212,13 +11850,15 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/webpack/node_modules/schema-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
-      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.2.tgz",
+      "integrity": "sha512-Gn/JaSk/Mt9gYubxTtSn/QCV4em9mpAPiR1rqy/Ocu19u/G9J5WWdNoUT4SiV6mFC3y6cxyFcFwdzPM3FgxGAQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -10238,6 +11878,7 @@
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -10248,6 +11889,7 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -10259,39 +11901,45 @@
       }
     },
     "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-builtin-type": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz",
-      "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "function.prototype.name": "^1.1.5",
-        "has-tostringtag": "^1.0.0",
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
         "is-async-function": "^2.0.0",
-        "is-date-object": "^1.0.5",
-        "is-finalizationregistry": "^1.0.2",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
         "is-generator-function": "^1.0.10",
-        "is-regex": "^1.1.4",
+        "is-regex": "^1.2.1",
         "is-weakref": "^1.0.2",
         "isarray": "^2.0.5",
-        "which-boxed-primitive": "^1.0.2",
-        "which-collection": "^1.0.1",
-        "which-typed-array": "^1.1.9"
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10305,6 +11953,7 @@
       "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
       "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-map": "^2.0.3",
         "is-set": "^2.0.3",
@@ -10319,15 +11968,18 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       },
       "engines": {
@@ -10342,6 +11994,7 @@
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10351,6 +12004,7 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -10369,6 +12023,7 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -10381,26 +12036,12 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -10413,6 +12054,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -10425,6 +12067,7 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -10442,6 +12085,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -10456,13 +12100,15 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
       "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.3.0"
       },
@@ -10479,13 +12125,27 @@
         }
       }
     },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
       "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14.6"
       }
     },
     "node_modules/yaml-loader": {
@@ -10493,6 +12153,7 @@
       "resolved": "https://registry.npmjs.org/yaml-loader/-/yaml-loader-0.8.1.tgz",
       "integrity": "sha512-BCEndnUoi3BaZmePkwGGe93txRxLgMhBa/gE725v1/GHnura8QvNs7c4+4C1yyhhKoj3Dg63M7IqhA++15j6ww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "javascript-stringify": "^2.0.1",
         "loader-utils": "^2.0.0",
@@ -10502,23 +12163,12 @@
         "node": ">= 14"
       }
     },
-    "node_modules/yaml-loader/node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
-      "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
@@ -10529,6 +12179,7 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       },
diff --git a/regression-test/package.json b/regression-test/package.json
index e32acb4e47..e611c1c2ea 100644
--- a/regression-test/package.json
+++ b/regression-test/package.json
@@ -31,8 +31,11 @@
   },
   "dependencies": {
     "instructure-ui": "file:../packages",
-    "next": "^15",
-    "react": "^18.3.1",
-    "react-dom": "^18"
+    "next": "14.2.30",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "dependency-comments": {
+    "next": "Next.js 15 needs React 19, but this app is using React 18 for compatibility with InstUI, so we are using Next.js 14."
   }
 }
diff --git a/regression-test/src/app/canvastopnav/page.tsx b/regression-test/src/app/canvastopnav/page.tsx
new file mode 100644
index 0000000000..4145aaca87
--- /dev/null
+++ b/regression-test/src/app/canvastopnav/page.tsx
@@ -0,0 +1,450 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+'use client'
+import React, { useEffect, useState } from 'react'
+import {
+  SubNav,
+  CanvasTopNav,
+  TopNavBar
+} from 'instructure/ui-top-nav-bar/es/index'
+import { IconAddLine } from 'instructure-ui/ui-icons/es/index'
+import {
+  IconAdminLine,
+  IconAlertsLine,
+  IconAnalyticsLine,
+  IconArcLine,
+  IconCoursesLine,
+  IconDashboardLine,
+  IconQuestionLine,
+  IconUserLine
+} from '@instructure/ui-icons'
+import { View } from '@instructure/ui-view'
+import { Flex } from '@instructure/ui-flex'
+import { Drilldown } from '@instructure/ui-drilldown'
+import { Img } from '@instructure/ui-img'
+import { Heading } from '@instructure/ui-heading'
+import { CloseButton } from '@instructure/ui-buttons'
+import { InstUISettingsProvider } from '@instructure/emotion'
+import { SideNavBar } from '@instructure/ui-side-nav-bar'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { Tray } from '@instructure/ui-tray'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Link } from '@instructure/ui-link'
+
+export default function CanvasTopNavPage() {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [open, setOpen] = useState(false)
+  const [openMobile, setOpenMobile] = useState(false)
+  const [hash, setHash] = useState(
+    typeof window !== 'undefined' ? window.location.hash : ''
+  )
+
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const page = searchParams.get('page') || 'home'
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  const isCoursePage = () => page === 'course1' || page === 'course2'
+  const isAccountPage = () => page === 'account'
+  const isDashboardPage = () => page === 'dashboard'
+  const isStudioPage = () => page === 'studio'
+
+  function renderCloseButton() {
+    return (
+      <Flex>
+        <Flex.Item shouldGrow shouldShrink>
+          <Heading>Hello</Heading>
+        </Flex.Item>
+        <Flex.Item>
+          <CloseButton
+            placement="end"
+            offset="small"
+            screenReaderLabel="Close"
+            onClick={() => {
+              setOpen(false)
+            }}
+          />
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  const drillDown = (
+    <Drilldown rootPageId={'default'}>
+      <Drilldown.Page id={'default'}>
+        <Drilldown.Group key={'default'} id={'default'}>
+          <Drilldown.Option
+            id={'account'}
+            subPageId={'account'}
+            afterLabelContentVAlign={'center'}
+          >
+            <div>
+              <IconUserLine /> Account
+            </div>
+          </Drilldown.Option>
+          <Drilldown.Option
+            id={'courses'}
+            subPageId={'courses'}
+            afterLabelContentVAlign={'center'}
+          >
+            <div>
+              <IconCoursesLine /> Courses
+            </div>
+          </Drilldown.Option>
+          <Drilldown.Option
+            id={'dashboard'}
+            afterLabelContentVAlign={'center'}
+            onOptionClick={() => {
+              router.push('/canvastopnav?page=dashboard')
+              setOpenMobile(false)
+            }}
+          >
+            <div>
+              <IconDashboardLine /> Dashboard
+            </div>
+          </Drilldown.Option>
+          <Drilldown.Option
+            id={'help'}
+            afterLabelContentVAlign={'center'}
+            onOptionClick={() => alert('Help clicked')}
+          >
+            <div>
+              <IconQuestionLine /> Help
+            </div>
+          </Drilldown.Option>
+        </Drilldown.Group>
+      </Drilldown.Page>
+      <Drilldown.Page
+        id={'account'}
+        renderBackButtonLabel={'Account'}
+        renderAfterChildren={
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+            aliquet erat in orci semper fringilla. Nullam suscipit mollis mi, at
+            vehicula magna vulputate eu. Cras mattis felis id quam vehicula
+            euismod. Nulla dolor enim, ornare in odio a, molestie dictum ligula.
+            Nullam maximus et dolor eget porttitor. Vestibulum faucibus viverra
+            pellentesque. Duis lorem lectus, porta vitae aliquam vitae, vehicula
+            sagittis nulla. Aenean sagittis congue rhoncus. Cras laoreet eu
+            nulla eu dignissim. Maecenas sed massa nisi. Suspendisse
+            pellentesque, metus sed ultricies porta, justo tellus pulvinar diam,
+            ac ornare massa nibh quis purus. Duis erat ipsum, pellentesque in
+            diam non, luctus accumsan metus. In ipsum tellus, ullamcorper a
+            faucibus a, venenatis ut urna. Sed at rutrum turpis.
+          </p>
+        }
+        renderBeforeChildren={
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <Img src="https://sbcf.fr/wp-content/uploads/2018/03/sbcf-default-avatar.png" />
+          </div>
+        }
+      >
+        <Drilldown.Group key={'account'} id={'account'}>
+          <Drilldown.Option
+            id={'accountinfo1'}
+            afterLabelContentVAlign={'center'}
+          >
+            <div>Account info 1</div>
+          </Drilldown.Option>
+          <Drilldown.Option
+            id={'accountinfo2'}
+            afterLabelContentVAlign={'center'}
+          >
+            <div>Account info 2</div>
+          </Drilldown.Option>
+        </Drilldown.Group>
+      </Drilldown.Page>
+      <Drilldown.Page id={'courses'} renderBackButtonLabel={'Courses'}>
+        <Drilldown.Group key={'courses'} id={'courses'}>
+          <Drilldown.Option
+            id={'courses1'}
+            afterLabelContentVAlign={'center'}
+            onOptionClick={() => {
+              router.push('/canvastopnav?page=course1')
+              setOpenMobile(false)
+            }}
+          >
+            <div>Courses1</div>
+          </Drilldown.Option>
+          <Drilldown.Option
+            id={'courses2'}
+            afterLabelContentVAlign={'center'}
+            onOptionClick={() => {
+              router.push('/canvastopnav?page=course2')
+              setOpenMobile(false)
+            }}
+          >
+            <div>Courses2</div>
+          </Drilldown.Option>
+        </Drilldown.Group>
+      </Drilldown.Page>
+    </Drilldown>
+  )
+
+  const brandSvg = (
+    <View
+      href="/"
+      tabIndex={0}
+      role="button"
+      position="relative"
+      display="inline-block"
+      borderRadius="small"
+      focusColor="inverse" // LTI eseten nincs itt inverse, kek marad a focusring
+    >
+      <Flex
+        width="100%"
+        height="100%"
+        alignItems="center"
+        justifyItems="center"
+      >
+        <svg
+          viewBox="0 0 1920 1920"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="#fff"
+          width="36px"
+          height="36px"
+        >
+          <path d="M958.568 277.97C1100.42 277.97 1216.48 171.94 1233.67 34.3881 1146.27 12.8955 1054.57 0 958.568 0 864.001 0 770.867 12.8955 683.464 34.3881 700.658 171.94 816.718 277.97 958.568 277.97ZM35.8207 682.031C173.373 699.225 279.403 815.285 279.403 957.136 279.403 1098.99 173.373 1215.05 35.8207 1232.24 12.8953 1144.84 1.43262 1051.7 1.43262 957.136 1.43262 862.569 12.8953 769.434 35.8207 682.031ZM528.713 957.142C528.713 1005.41 489.581 1044.55 441.31 1044.55 393.038 1044.55 353.907 1005.41 353.907 957.142 353.907 908.871 393.038 869.74 441.31 869.74 489.581 869.74 528.713 908.871 528.713 957.142ZM1642.03 957.136C1642.03 1098.99 1748.06 1215.05 1885.61 1232.24 1908.54 1144.84 1920 1051.7 1920 957.136 1920 862.569 1908.54 769.434 1885.61 682.031 1748.06 699.225 1642.03 815.285 1642.03 957.136ZM1567.51 957.142C1567.51 1005.41 1528.38 1044.55 1480.11 1044.55 1431.84 1044.55 1392.71 1005.41 1392.71 957.142 1392.71 908.871 1431.84 869.74 1480.11 869.74 1528.38 869.74 1567.51 908.871 1567.51 957.142ZM958.568 1640.6C816.718 1640.6 700.658 1746.63 683.464 1884.18 770.867 1907.11 864.001 1918.57 958.568 1918.57 1053.14 1918.57 1146.27 1907.11 1233.67 1884.18 1216.48 1746.63 1100.42 1640.6 958.568 1640.6ZM1045.98 1480.11C1045.98 1528.38 1006.85 1567.51 958.575 1567.51 910.304 1567.51 871.172 1528.38 871.172 1480.11 871.172 1431.84 910.304 1392.71 958.575 1392.71 1006.85 1392.71 1045.98 1431.84 1045.98 1480.11ZM1045.98 439.877C1045.98 488.148 1006.85 527.28 958.575 527.28 910.304 527.28 871.172 488.148 871.172 439.877 871.172 391.606 910.304 352.474 958.575 352.474 1006.85 352.474 1045.98 391.606 1045.98 439.877ZM1441.44 1439.99C1341.15 1540.29 1333.98 1697.91 1418.52 1806.8 1579 1712.23 1713.68 1577.55 1806.82 1418.5 1699.35 1332.53 1541.74 1339.7 1441.44 1439.99ZM1414.21 1325.37C1414.21 1373.64 1375.08 1412.77 1326.8 1412.77 1278.53 1412.77 1239.4 1373.64 1239.4 1325.37 1239.4 1277.1 1278.53 1237.97 1326.8 1237.97 1375.08 1237.97 1414.21 1277.1 1414.21 1325.37ZM478.577 477.145C578.875 376.846 586.039 219.234 501.502 110.339 341.024 204.906 206.338 339.592 113.203 498.637 220.666 584.607 378.278 576.01 478.577 477.145ZM679.155 590.32C679.155 638.591 640.024 677.723 591.752 677.723 543.481 677.723 504.349 638.591 504.349 590.32 504.349 542.048 543.481 502.917 591.752 502.917 640.024 502.917 679.155 542.048 679.155 590.32ZM1440 475.712C1540.3 576.01 1697.91 583.174 1806.8 498.637 1712.24 338.159 1577.55 203.473 1418.51 110.339 1332.54 217.801 1341.13 375.413 1440 475.712ZM1414.21 590.32C1414.21 638.591 1375.08 677.723 1326.8 677.723 1278.53 677.723 1239.4 638.591 1239.4 590.32 1239.4 542.048 1278.53 502.917 1326.8 502.917 1375.08 502.917 1414.21 542.048 1414.21 590.32ZM477.145 1438.58C376.846 1338.28 219.234 1331.12 110.339 1415.65 204.906 1576.13 339.593 1710.82 498.637 1805.39 584.607 1696.49 577.443 1538.88 477.145 1438.58ZM679.155 1325.37C679.155 1373.64 640.024 1412.77 591.752 1412.77 543.481 1412.77 504.349 1373.64 504.349 1325.37 504.349 1277.1 543.481 1237.97 591.752 1237.97 640.024 1237.97 679.155 1277.1 679.155 1325.37Z" />
+        </svg>
+      </Flex>
+    </View>
+  )
+
+  const isMobile = windowWidth < 768
+
+  // Helper to match routes for SPA-like behavior
+  function getPageContent() {
+    if (page === 'home') {
+      return <h1>This is home</h1>
+    }
+    if (page === 'dashboard') {
+      return <h1>This is the dashboard</h1>
+    }
+    if (page === 'course1') {
+      return <h1>This is the first course home page</h1>
+    }
+    if (page === 'course2') {
+      return <h1>This is the second course home page</h1>
+    }
+    if (page === 'studio') {
+      return <h1>LTI VIEW TEST</h1>
+    }
+    if (page === 'account') {
+      return <h1>This is the account page</h1>
+    }
+    return <h1>Not Found</h1>
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <InstUISettingsProvider>
+        <div style={{ height: '100vh', zIndex: 100 }}>
+          {!isMobile && (
+            <SideNavBar
+              label="Main navigation"
+              toggleLabel={{
+                expandedLabel: 'Minimize SideNavBar',
+                minimizedLabel: 'Expand SideNavBar'
+              }}
+            >
+              <SideNavBar.Item
+                icon={brandSvg}
+                label={<ScreenReaderContent>Home</ScreenReaderContent>}
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav')
+                }}
+              />
+              <SideNavBar.Item
+                icon={<IconUserLine />}
+                label="Account"
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav?page=account')
+                }}
+                selected={isAccountPage()}
+              />
+              <SideNavBar.Item
+                icon={<IconCoursesLine />}
+                label="Courses"
+                onClick={() => setOpen(true)}
+                selected={isCoursePage()}
+              />
+              <SideNavBar.Item
+                icon={<IconDashboardLine />}
+                label="Dashboard"
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav?page=dashboard')
+                }}
+                selected={isDashboardPage()}
+              />
+              <SideNavBar.Item
+                icon={<IconArcLine />}
+                label="Studio"
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav?page=studio')
+                }}
+                selected={isStudioPage()}
+              />
+              <SideNavBar.Item
+                icon={<IconQuestionLine />}
+                label="Help"
+                onClick={() => alert('Help clicked')}
+              />
+            </SideNavBar>
+          )}
+        </div>
+        <div
+          style={{ display: 'flex', flexDirection: 'column', width: '100%' }}
+        >
+          <CanvasTopNav
+            brand={brandSvg}
+            lti={isStudioPage()}
+            showDesktopView={isCoursePage() || isStudioPage()}
+            buttons={[
+              {
+                label: 'AddLine',
+                onClick: () => alert('Button 1'),
+                icon: <IconAddLine />
+              },
+              {
+                label: 'AdminLine',
+                onClick: () => alert('Button 2'),
+                icon: <IconAdminLine />
+              }
+            ]}
+            breadcrumb={{
+              label: 'You are here:',
+              links: [
+                {
+                  href: '#',
+                  label: 'Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1'
+                },
+                { href: '#', label: 'Crumb 2' },
+                { label: 'Home' }
+              ]
+            }}
+            hamburgerLabel="Open the main menu"
+            hamburgerOnClick={() => alert('Hamburger clicked')}
+            mobileButtons={[
+              {
+                screenReaderLabel: 'Analytics',
+                icon: <IconAnalyticsLine />,
+                onClick: () => alert('Analytics clicked')
+              },
+              {
+                screenReaderLabel: 'Alerts',
+                icon: <IconAlertsLine />,
+                onClick: () => alert('Alerts clicked')
+              }
+            ]}
+            mobileMenu={drillDown}
+            open={openMobile}
+            onOpenChange={(open: boolean) => setOpenMobile(open)}
+            ltiIcon={<IconArcLine />}
+            ltiMenuItems={
+              <TopNavBar.MenuItems
+                listLabel="Page navigation"
+                currentPageId="OverviewPage"
+                renderHiddenItemsMenuTriggerLabel={(hiddenChildrenCount) =>
+                  `${hiddenChildrenCount} More`
+                }
+              >
+                <TopNavBar.Item id="OverviewPage" href="/#TopNavBar">
+                  Overview
+                </TopNavBar.Item>
+                <TopNavBar.Item id="AdminPage" href="/#TopNavBar">
+                  Admin
+                </TopNavBar.Item>
+                <TopNavBar.Item id="SettingsPage" href="/#TopNavBar">
+                  Settings
+                </TopNavBar.Item>
+                <TopNavBar.Item id="MapsPage" href="/#TopNavBar">
+                  Maps
+                </TopNavBar.Item>
+                <TopNavBar.Item id="AssessmentsPage" href="/#TopNavBar">
+                  Assessments
+                </TopNavBar.Item>
+                <TopNavBar.Item id="CommunityPage" href="/#TopNavBar">
+                  Community
+                </TopNavBar.Item>
+              </TopNavBar.MenuItems>
+            }
+          />
+          <Tray
+            label="Courses"
+            open={open}
+            onDismiss={() => setOpen(false)}
+            size="small"
+            placement="start"
+            themeOverride={{ zIndex: 1 }}
+          >
+            {renderCloseButton()}
+            <div style={{ marginLeft: '100px' }}>
+              <h1>Courses</h1>
+              <Link
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav?page=course1')
+                }}
+                display="block"
+              >
+                Course 1
+              </Link>
+              <Link
+                onClick={() => {
+                  setOpen(false)
+                  router.push('/canvastopnav?page=course2')
+                }}
+                display="block"
+              >
+                Course 2
+              </Link>
+            </div>
+          </Tray>
+          <div style={{ display: 'flex' }}>
+            {isCoursePage() && (
+              <SubNav
+                menuItems={[
+                  { title: 'Home', href: '/', selected: true },
+                  { title: 'Announcements', href: '/' },
+                  { title: 'Assignments', href: '/' }
+                ]}
+              />
+            )}
+            <div style={{ padding: '30px' }}>{getPageContent()}</div>
+          </div>
+        </div>
+      </InstUISettingsProvider>
+    </div>
+  )
+}

From 32d22e3860f2e06aa2f6cc132427467182837c06 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Fri, 27 Jun 2025 16:06:44 +0200
Subject: [PATCH 49/53] refactor: :wq

---
 regression-test/package-lock.json             | 977 +-----------------
 regression-test/src/app/canvastopnav/page.tsx |   6 +-
 2 files changed, 53 insertions(+), 930 deletions(-)

diff --git a/regression-test/package-lock.json b/regression-test/package-lock.json
index 192fb130f1..ae641b4ea7 100644
--- a/regression-test/package-lock.json
+++ b/regression-test/package-lock.json
@@ -64,6 +64,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
       "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.27.1",
@@ -74,122 +75,26 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.5.tgz",
-      "integrity": "sha512-ZGhA37l0e/g2s1Cnzdix0O3aLYm66eF8aufiVteOgnwxgnRP8GoyMj7VWsgWnQbVKXyge7hqrFh2K2TQM6t1Hw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.27.5",
-        "@babel/types": "^7.27.3",
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
-      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.27.1",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-string-parser": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
-      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
       "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.27.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
-      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.27.3"
-      },
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@babel/runtime": {
       "version": "7.27.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
       "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.27.2",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
-      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/parser": "^7.27.2",
-        "@babel/types": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.27.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.4.tgz",
-      "integrity": "sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.27.3",
-        "@babel/parser": "^7.27.4",
-        "@babel/template": "^7.27.2",
-        "@babel/types": "^7.27.3",
-        "debug": "^4.3.1",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
-      "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@chromatic-com/cypress": {
       "version": "0.11.5",
       "resolved": "https://registry.npmjs.org/@chromatic-com/cypress/-/cypress-0.11.5.tgz",
@@ -316,129 +221,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
-      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
-      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
-      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
-      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
-      "license": "MIT"
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -1001,539 +783,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@instructure/console": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/console/-/console-10.20.1.tgz",
-      "integrity": "sha512-WvpzHotRX6lP3LFhQU1qq2qG/UVGPvNfavqlPQD3ZYmhhyk9OA2X5LeAyikJ4dhC2A4q/QpMu0dpBefljGeZtg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/debounce": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/debounce/-/debounce-10.20.1.tgz",
-      "integrity": "sha512-v2TrtiEjjWRANbXPeacyhmW6lyICUoxIlojMb/LhillsfFjZuxmrapneXrSsWxaGrPdDAmH/LLbTouVCUShyDQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6"
-      }
-    },
-    "node_modules/@instructure/emotion": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/emotion/-/emotion-10.20.1.tgz",
-      "integrity": "sha512-lf8JyzmFo6/GJmKezWhIzB1NuzkKcXz6j/+BRQTRif+x5DnXp0G1LUlOtJJudzbHVJigw5hawib+sqvfqk8Edg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@emotion/react": "^11",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/theme-registry": "10.20.1",
-        "@instructure/ui-decorator": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-themes": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "hoist-non-react-statics": "^3.3.2",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/shared-types": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/shared-types/-/shared-types-10.20.1.tgz",
-      "integrity": "sha512-ec+o0robMofO2Y/OPFN6IX6IqSUJuoTBWUS3SO9qYR5l+PuKniKyco7Dr4sLtdzpmWiN3e2YHs8Js7SOGZpXOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/theme-registry": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/theme-registry/-/theme-registry-10.20.1.tgz",
-      "integrity": "sha512-pJBO+TLQp4SUTLFM82Vu2VSlIK2SHmh6KDtzCDDHPa9B3YmMr1VwCG3lSykSZ2Spm29FcqnqkC549LUxK4EtYw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-utils": "10.20.1"
-      }
-    },
-    "node_modules/@instructure/ui-a11y-content": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-a11y-content/-/ui-a11y-content-10.20.1.tgz",
-      "integrity": "sha512-WKm7um3ly7JaFXNmAllJiC+Hq1Z5CTcrf6INT+hcr/uhVwQwaJh2iQxuo5JmbBylWRY1wNo0l+aXsyRk3YRbVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-a11y-utils": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-a11y-utils/-/ui-a11y-utils-10.20.1.tgz",
-      "integrity": "sha512-4UIJCCjHgfdwPlhTaRzDLVC9lX2AOVhV6crmtTjibJCwaBmWtmQWOWpfap9biJn/bSXakosNmTqK8sPOnqwWuA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-a11y-content": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/uid": "10.20.1",
-        "keycode": "^2"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-buttons": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-buttons/-/ui-buttons-10.20.1.tgz",
-      "integrity": "sha512-p5Z91ZN2/+wpTP7cao4hG4p+rggHl4Y0gC6lc2LEkNHTYxY26hoHY1B9huoyLkd2C6NXIgKAZPZEm/xg/H62GA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-a11y-content": "10.20.1",
-        "@instructure/ui-a11y-utils": "10.20.1",
-        "@instructure/ui-color-utils": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-icons": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-tooltip": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/ui-view": "10.20.1",
-        "keycode": "^2",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-color-utils": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-color-utils/-/ui-color-utils-10.20.1.tgz",
-      "integrity": "sha512-zpwsQvPgVkk6bOqeBEhmDa4KR+AOCMXDBGgkQNHRTld4Gzte6uFDcVnuTfjWgdPtXHmpayQicL2DfJn6g+SPBw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "tinycolor2": "^1.6.0"
-      }
-    },
-    "node_modules/@instructure/ui-decorator": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-decorator/-/ui-decorator-10.20.1.tgz",
-      "integrity": "sha512-kiQidxR28MkNZrvxr8ShUfAG9nljA5kdDcGYy1Sw0Zhw3/fBsAMb82EsenCFfElDnAP4NE7CXxoQDUKAsMkHoA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6"
-      }
-    },
-    "node_modules/@instructure/ui-dialog": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-dialog/-/ui-dialog-10.20.1.tgz",
-      "integrity": "sha512-MzCJ0DRs9i1s6Baa7QZiIAMY/Fl9+mfUiZ5kArRYocPYG458Y2hHryOvMwCQYNXCLaYH7xMqQLZfEWpGmTk5Ew==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-a11y-utils": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-dom-utils": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-dom-utils/-/ui-dom-utils-10.20.1.tgz",
-      "integrity": "sha512-95NflaNUT3wVrpBR9A/0Q6ciBzvkFDr5GEm5ZIJ9J2tPpmJ/oeHFDcrULAV1vm9r5TCGe9Y40OaKNqEQyvNVgw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18",
-        "react-dom": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-focusable": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-focusable/-/ui-focusable-10.20.1.tgz",
-      "integrity": "sha512-9GTJEcQpWBJre2coFGsrMJMUbIj35lokdJ58iKbxUDNKd1iPRFi+ZtOzrkYHKqunivrY8ZdXL1IPuDVZFJotNA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/ui-view": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-i18n": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-i18n/-/ui-i18n-10.20.1.tgz",
-      "integrity": "sha512-FUfzDa+RlYWcloE9sM/RiMlSvbpgt7FMt3gFNyu9hcJnRlXQXo4q8lAqiWZjphgrWYN1jlu6MzesyV7N+nxmcw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-decorator": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "hoist-non-react-statics": "^3.3.2",
-        "moment-timezone": "^0.6.0",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-icons": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-icons/-/ui-icons-10.20.1.tgz",
-      "integrity": "sha512-a5DaTBi+kP5Up9PwNrtmUi2J3K+2cmlspfL8mxWBnqxcdO8s5ok3Q+tGIpMkYAh2XeJ2YdzjpwovSlZ1m8BA8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/ui-svg-images": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-motion": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-motion/-/ui-motion-10.20.1.tgz",
-      "integrity": "sha512-OZZoG0AB6Q8HQJz5C20YgF7OaiHaadL/Md7drxAagvz6xMR/NsCGVlYxAPTnU8WfQCmFAHwG2LxGMP79mimV9w==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-overlays": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-overlays/-/ui-overlays-10.20.1.tgz",
-      "integrity": "sha512-TnBHRUWcvQe2AL/HatH2CVAqR5eJT2IWlvmyNNu2BqbVzYg+usR4T4hD9BsTzyVUrbMwt3eesmjPrObq4w/MoA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-buttons": "10.20.1",
-        "@instructure/ui-dialog": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-focusable": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-motion": "10.20.1",
-        "@instructure/ui-popover": "10.20.1",
-        "@instructure/ui-portal": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-tooltip": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/ui-view": "10.20.1",
-        "@instructure/uid": "10.20.1",
-        "no-scroll": "^2.1.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-popover": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-popover/-/ui-popover-10.20.1.tgz",
-      "integrity": "sha512-5c/P1CT6Aa5KKyM9DUMk618QdCspylk606eu6WG4IrWJE7AVgMvRedZj9wyntDgJsli1Fz1FuImjx20MWCda3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-a11y-utils": "10.20.1",
-        "@instructure/ui-dialog": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/ui-view": "10.20.1",
-        "@instructure/uid": "10.20.1",
-        "keycode": "^2.2.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-portal": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-portal/-/ui-portal-10.20.1.tgz",
-      "integrity": "sha512-B7prIMi3AuP6VGSMjSBemuLpJLxmCkqE0c2Z6ftc1rsEzpN57qP0xQTY2XEj2owSbtdayEJ6omFKDesZRo8yiw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18",
-        "react-dom": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-position": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-position/-/ui-position-10.20.1.tgz",
-      "integrity": "sha512-L1WeJJXgueGVT9U7mwUFYWlPtBaTuxCWNUDE5cjw8HsiW+X5/t4pe3lXJxHDfwpnqnr6rW2AKS9ADfgld/j7CQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/debounce": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-portal": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/uid": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-prop-types": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-prop-types/-/ui-prop-types-10.20.1.tgz",
-      "integrity": "sha512-cOQoS1vqS73Pus8bGhh0uNDuuXc0xEQZr0ExsN/UbRfnofx2QfJ9A2Nha8icKeHYy14BFml30GEX4MSMYYyDpg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-react-utils": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-react-utils/-/ui-react-utils-10.20.1.tgz",
-      "integrity": "sha512-24SLMsQV2wKU/PCrdBMpdoK67jVJalYLUgyJcRNPpQBKUi/HV644lXsz2Q9qi59vobFObVRz6Om+xBxVTZj53g==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@emotion/is-prop-valid": "^1.3.1",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-decorator": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "hoist-non-react-statics": "^3.3.2",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18",
-        "react-dom": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-svg-images": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-svg-images/-/ui-svg-images-10.20.1.tgz",
-      "integrity": "sha512-Ha5OQkxyM/d1s80FYfLzucjoO2KMjM+GMqLJHqbQMwHjVpORbAbao/st0Q5YDmV0rLPnoFEu0Yn1RdeG3zLngg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "@instructure/uid": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-testable": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-testable/-/ui-testable-10.20.1.tgz",
-      "integrity": "sha512-YQSQsBKQJw24okqEsCf12tCjhl2fqa+9O9iOY7VldVd8ap/THiDOEmUvvywBisFiIiJL6TasLNiF/H4xRjjQhw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/ui-decorator": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18",
-        "react-dom": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-themes": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-themes/-/ui-themes-10.20.1.tgz",
-      "integrity": "sha512-hBgFs9/8QVUYhYgH0FIw83StYDH/9Oan8Y0XHApskz3lLx9iPBZJ3kWD+KE+8Zx2bOLoEqnkxHPjeTgo4pbn3A==",
-      "license": "MIT",
-      "dependencies": {
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/theme-registry": "10.20.1"
-      }
-    },
-    "node_modules/@instructure/ui-tooltip": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-tooltip/-/ui-tooltip-10.20.1.tgz",
-      "integrity": "sha512-YMwsgTZUmLF5GYjAoDjYkdMTHL5R20dyB4H9/K6Pvr3m9aA4NPHlySyHZ3QsTut5VkLGAzTl0ijVveVl+5OfeA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-popover": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-tray": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-tray/-/ui-tray-10.20.1.tgz",
-      "integrity": "sha512-f9lybmCROit/gSLbcqdXVjaq5ZDcOKcmLD5vYdkzGBIl52em+2+Jc8zxZM0v2bnmlrnoPDdv6VHhXDSA1fnbSg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dialog": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-motion": "10.20.1",
-        "@instructure/ui-overlays": "10.20.1",
-        "@instructure/ui-portal": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "@instructure/ui-testable": "10.20.1",
-        "@instructure/ui-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-utils": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-utils/-/ui-utils-10.20.1.tgz",
-      "integrity": "sha512-Qg7GNGzZSnfuECxApNh4H/w1Y0FHB/6d2RJzCg64EJTSvcNZ9uASUrv2pkUIXo8W0aKNIoczx9I4becSr8kdLw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@types/ua-parser-js": "^0.7.39",
-        "fast-deep-equal": "^3.1.3",
-        "json-stable-stringify": "^1.3.0",
-        "ua-parser-js": "^1.0.39"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18",
-        "react-dom": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/ui-view": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/ui-view/-/ui-view-10.20.1.tgz",
-      "integrity": "sha512-OA+95Nd78dKh5QM2i8giTD2COxmJ0oA76QDKyoRDED3xntf80dVf8jlgMhUPaU6B8iXY8xet3kLe/GDdo+43Mw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6",
-        "@instructure/console": "10.20.1",
-        "@instructure/emotion": "10.20.1",
-        "@instructure/shared-types": "10.20.1",
-        "@instructure/ui-color-utils": "10.20.1",
-        "@instructure/ui-dom-utils": "10.20.1",
-        "@instructure/ui-i18n": "10.20.1",
-        "@instructure/ui-position": "10.20.1",
-        "@instructure/ui-prop-types": "10.20.1",
-        "@instructure/ui-react-utils": "10.20.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.14 <=18"
-      }
-    },
-    "node_modules/@instructure/uid": {
-      "version": "10.20.1",
-      "resolved": "https://registry.npmjs.org/@instructure/uid/-/uid-10.20.1.tgz",
-      "integrity": "sha512-gRwQ8geDqnZqoC3e0G8VHTuiLWW5c8yeKHTgh5sjxPjrDina/cRY8Bfvplb8G7fhTlnNL6fX7UXDSn7MR3+dmg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.27.6"
-      }
-    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1616,6 +865,7 @@
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
@@ -1630,6 +880,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1639,6 +890,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1659,12 +911,14 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
       "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2934,6 +2188,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
@@ -2985,12 +2240,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/ua-parser-js": {
-      "version": "0.7.39",
-      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.39.tgz",
-      "integrity": "sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==",
-      "license": "MIT"
-    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -4175,21 +3424,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -4415,6 +3649,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
       "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.0",
@@ -4433,6 +3668,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
       "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -4446,6 +3682,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
       "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -4462,6 +3699,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -4841,12 +4079,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4858,6 +4090,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
       "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -4874,6 +4107,7 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">= 6"
@@ -4977,6 +4211,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cypress": {
@@ -5173,6 +4408,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -5207,6 +4443,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0",
@@ -5398,6 +4635,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -5502,6 +4740,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -5580,6 +4819,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5589,6 +4829,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -5633,6 +4874,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
       "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -5756,6 +4998,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -6350,6 +5593,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -6485,12 +5729,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "license": "MIT"
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -6710,6 +5948,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6750,6 +5989,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
       "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.2",
@@ -6774,6 +6014,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
       "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dunder-proto": "^1.0.1",
@@ -6935,15 +6176,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/globalthis": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
@@ -6986,6 +6218,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7034,6 +6267,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-define-property": "^1.0.0"
@@ -7062,6 +6296,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7117,6 +6352,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -7135,15 +6371,6 @@
         "he": "bin/he"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/html-entities": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
@@ -7319,6 +6546,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -7438,6 +6666,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/is-async-function": {
@@ -7533,6 +6762,7 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -7938,6 +7168,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/isexe": {
@@ -8059,18 +7290,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -8082,6 +7301,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-schema": {
@@ -8098,25 +7318,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/json-stable-stringify": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
-      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
-      "license": "MIT",
-      "dependencies": {
-        "call-bind": "^1.0.8",
-        "call-bound": "^1.0.4",
-        "isarray": "^2.0.5",
-        "jsonify": "^0.0.1",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -8157,15 +7358,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/jsonify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
-      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
-      "license": "Public Domain",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/jsprim": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz",
@@ -8198,12 +7390,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
-      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
-      "license": "MIT"
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -8501,6 +7687,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/listr2": {
@@ -8743,6 +7930,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -8897,31 +8085,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/moment": {
-      "version": "2.30.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/moment-timezone": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.6.0.tgz",
-      "integrity": "sha512-ldA5lRNm3iJCWZcBCab4pnNL3HSZYXVb/3TYr75/1WCTWYuTqYUb5f/S384pncYjJ88lbO8Z4uPDvmoluHJc8Q==",
-      "license": "MIT",
-      "dependencies": {
-        "moment": "^2.29.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -9061,12 +8229,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/no-scroll": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
-      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ==",
-      "license": "MIT"
-    },
     "node_modules/node-abort-controller": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",
@@ -9152,6 +8314,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9174,6 +8337,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -9419,6 +8583,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -9431,6 +8596,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -9497,6 +8663,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -9520,6 +8687,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -9752,6 +8920,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -9873,6 +9042,7 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/readdirp": {
@@ -10007,6 +9177,7 @@
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -10027,6 +9198,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -10292,6 +9464,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
@@ -10467,15 +9640,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -10846,12 +10010,6 @@
         }
       }
     },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
-      "license": "MIT"
-    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -10872,6 +10030,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -11064,12 +10223,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -11368,32 +10521,6 @@
         "node": ">=14.17"
       }
     },
-    "node_modules/ua-parser-js": {
-      "version": "1.0.40",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz",
-      "integrity": "sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "ua-parser-js": "script/cli.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
diff --git a/regression-test/src/app/canvastopnav/page.tsx b/regression-test/src/app/canvastopnav/page.tsx
index 4145aaca87..366de8c7d6 100644
--- a/regression-test/src/app/canvastopnav/page.tsx
+++ b/regression-test/src/app/canvastopnav/page.tsx
@@ -24,11 +24,7 @@
 
 'use client'
 import React, { useEffect, useState } from 'react'
-import {
-  SubNav,
-  CanvasTopNav,
-  TopNavBar
-} from 'instructure/ui-top-nav-bar/es/index'
+import { SubNav, CanvasTopNav, TopNavBar } from '@instructure/ui-top-nav-bar'
 import { IconAddLine } from 'instructure-ui/ui-icons/es/index'
 import {
   IconAdminLine,

From d2e14801862fb9cd49c6b43c12237f28f08633e6 Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Thu, 3 Jul 2025 14:03:35 +0200
Subject: [PATCH 50/53] refactor: window fix

---
 package-lock.json                             | 59 ++++++++-----------
 packages/__docs__/package.json                |  1 +
 regression-test/src/app/canvastopnav/page.tsx | 11 ++--
 3 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c3edd1bb1c..e4ca2c3fd7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6592,6 +6592,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.9",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.9.tgz",
@@ -24312,50 +24321,35 @@
       "license": "MIT"
     },
     "node_modules/react-router": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
-      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
       "license": "MIT",
       "dependencies": {
-        "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0"
+        "@remix-run/router": "1.23.0"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        }
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
-      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.6.2"
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-      }
-    },
-    "node_modules/react-router/node_modules/cookie": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
-      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/read": {
@@ -25395,12 +25389,6 @@
       "version": "2.0.0",
       "license": "ISC"
     },
-    "node_modules/set-cookie-parser": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
-      "license": "MIT"
-    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -30538,6 +30526,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.18.0",
         "semver": "^7.7.2",
         "uuid": "^11.1.0",
         "webpack-merge": "^6.0.1"
diff --git a/packages/__docs__/package.json b/packages/__docs__/package.json
index 29aa9dcadb..7de02be351 100644
--- a/packages/__docs__/package.json
+++ b/packages/__docs__/package.json
@@ -122,6 +122,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.18.0",
     "semver": "^7.7.2",
     "uuid": "^11.1.0",
     "webpack-merge": "^6.0.1"
diff --git a/regression-test/src/app/canvastopnav/page.tsx b/regression-test/src/app/canvastopnav/page.tsx
index 366de8c7d6..8d32bd02f8 100644
--- a/regression-test/src/app/canvastopnav/page.tsx
+++ b/regression-test/src/app/canvastopnav/page.tsx
@@ -50,19 +50,22 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { Link } from '@instructure/ui-link'
 
 export default function CanvasTopNavPage() {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  // Use 1024 as a default width for SSR
+  const getInitialWidth = () =>
+    typeof window !== 'undefined' ? window.innerWidth : 1024
+
+  const [windowWidth, setWindowWidth] = useState(getInitialWidth())
   const [open, setOpen] = useState(false)
   const [openMobile, setOpenMobile] = useState(false)
-  const [hash, setHash] = useState(
-    typeof window !== 'undefined' ? window.location.hash : ''
-  )
 
   const router = useRouter()
   const searchParams = useSearchParams()
   const page = searchParams.get('page') || 'home'
 
   useEffect(() => {
+    if (typeof window === 'undefined') return
     const handleResize = () => setWindowWidth(window.innerWidth)
+    setWindowWidth(window.innerWidth)
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
   }, [])

From c71f9108b5166cfd48be3e0aa0c10b499372bb10 Mon Sep 17 00:00:00 2001
From: Nandor_Czegledi <nandor.czegledi@instructure.com>
Date: Fri, 4 Jul 2025 17:21:17 +0200
Subject: [PATCH 51/53] Fix e2e CanvasTopNav tests

---
 regression-test/cypress/e2e/spec.cy.ts        | 545 ++++++++++++++++--
 regression-test/src/app/canvastopnav/page.tsx |   6 +-
 2 files changed, 508 insertions(+), 43 deletions(-)

diff --git a/regression-test/cypress/e2e/spec.cy.ts b/regression-test/cypress/e2e/spec.cy.ts
index 9ad1660b54..1780456c20 100644
--- a/regression-test/cypress/e2e/spec.cy.ts
+++ b/regression-test/cypress/e2e/spec.cy.ts
@@ -24,55 +24,520 @@
 
 import type { Result, RunOnly } from 'axe-core'
 
-type ConsoleErrorStub = Cypress.Agent<sinon.SinonStub<any[], any>>
-let windowErrorSpy: ConsoleErrorStub | undefined
 
-Cypress.on('window:before:load', (win) => {
-  // Stub console.error before your application code runs
-  // This allows you to capture errors even if they happen very early
-  windowErrorSpy = cy.stub(win.console, 'error')
-})
+describe('visual regression test', () => {
+  type ConsoleErrorStub = Cypress.Agent<sinon.SinonStub<any[], any>>
+  let windowErrorSpy: ConsoleErrorStub | undefined
 
-afterEach(() => {
-  // After each test, assert that console.error was not called
-  // Add a small wait if your application might log errors asynchronously
-  cy.wait(100).then(() => {
-    expect(windowErrorSpy).to.not.be.called
+  Cypress.on('window:before:load', (win) => {
+    // Stub console.error before your application code runs
+    // This allows you to capture errors even if they happen very early
+    windowErrorSpy = cy.stub(win.console, 'error')
+  })
+
+  afterEach(() => {
+    // After each test, assert that console.error was not called
+    // Add a small wait if your application might log errors asynchronously
+    cy.wait(100).then(() => {
+      expect(windowErrorSpy).to.not.be.called
+    })
   })
-})
 
-// log fn taken from https://www.npmjs.com/package/cypress-axe
-function terminalLog(violations: Result[]) {
-  cy.task(
-    'log',
-    `${violations.length} accessibility violation${
-      violations.length === 1 ? '' : 's'
-    } ${violations.length === 1 ? 'was' : 'were'} detected`
-  )
-  // pluck specific keys to keep the table readable
-  const violationData = violations.map(
-    ({ id, impact, description, nodes }) => ({
-      id,
-      impact,
-      description,
-      nodes: nodes.length
-    })
-  )
-
-  cy.task('table', violationData)
-}
-
-const axeOptions: { runOnly: RunOnly } = {
-  runOnly: {
-    type: 'tag',
-    values: ['wcag2a', 'wcag2aa', 'section508', 'best-practice']
+  // log fn taken from https://www.npmjs.com/package/cypress-axe
+  function terminalLog(violations: Result[]) {
+    cy.task(
+      'log',
+      `${violations.length} accessibility violation${
+        violations.length === 1 ? '' : 's'
+      } ${violations.length === 1 ? 'was' : 'were'} detected`
+    )
+    // pluck specific keys to keep the table readable
+    const violationData = violations.map(
+      ({ id, impact, description, nodes }) => ({
+        id,
+        impact,
+        description,
+        nodes: nodes.length
+      })
+    )
+
+    cy.task('table', violationData)
+  }
+
+  const axeOptions: { runOnly: RunOnly } = {
+    runOnly: {
+      type: 'tag',
+      values: ['wcag2a', 'wcag2aa', 'section508', 'best-practice']
+    }
   }
-}
 
-describe('visual regression test', () => {
   it('check button', () => {
     cy.visit('http://localhost:3000/button')
     cy.injectAxe()
     cy.checkA11y('.axe-test', axeOptions, terminalLog)
   })
 })
+
+describe('CanvasTopNavBar', () => {
+  // This handler suppresses known hydration mismatch errors between server and client
+  // We ignore "aria-describedby did not match" hydration warnings in this test suite
+  // because they are expected differences between server and client IDs
+  // beforeEach(() => {
+  //   Cypress.on('uncaught:exception', (err) => {
+  //     if (err.message.includes('aria-describedby did not match')) {
+  //       return false
+  //     }
+  //   })
+  // })
+  beforeEach(() => {
+    Cypress.on('uncaught:exception', (err) => {
+      if (err) {
+        return false
+      }
+    })
+  })
+
+  describe('SideNavBar', () => {
+    it('should change URL on SideNavBar item selection', () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.url().should('not.contain', 'studio')
+      cy.contains('Studio').should('be.visible')
+
+      cy.contains('Studio')
+        .click().wait(100)
+
+      cy.url().should('contain', 'page=studio')
+
+      cy.contains('Account')
+        .click().wait(100)
+
+      cy.url().should('contain', 'page=account')
+
+      cy.contains('Courses')
+        .click().wait(100)
+      cy.contains('Course 1')
+        .click().wait(100)
+
+      cy.url().should('contain', 'page=course1')
+    })
+
+    it('should trigger onclick callback on SideNavBar item selection', () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.on('window:alert', cy.stub().as('alertStub'))
+      const expectedAlertText = 'Help clicked'
+
+      cy.contains('Help')
+        .click().wait(100)
+
+      cy.get('@alertStub')
+        .should('have.been.calledOnceWith', expectedAlertText)
+    })
+
+    it('should show main navigation as SideNavBar with labelled items', async () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+  
+      cy.contains('This is home').should('be.visible')
+      cy.get('nav[data-cid="SideNavBar"]').as('SideNavBar').should('exist')
+  
+      cy.get('@SideNavBar').find('li').should('have.length', 6)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('button', 'Minimize SideNavBar').should('be.visible')
+    })
+
+    it('should minimize SideNavBar and show only icons as items', async () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+  
+      cy.contains('This is home').should('exist')
+      cy.get('li[class$="-navigation__list"]').should('have.length', 6)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('button', 'Minimize SideNavBar')
+        .click().wait(100)
+  
+      cy.get('li[class$="-navigation__list"]').should('have.length', 6)
+  
+      cy.contains('Account').should('not.be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+  
+      cy.contains('Courses').should('not.be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+  
+      cy.contains('Help').should('not.be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+    })
+
+    it('should show main navigation as topNavBar and burger menu in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:3000/canvastopnav/')
+  
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-mobileTopNavTopBar"]').as('TopNav').should('exist')
+      cy.get('@TopNav').find('svg[name="IconAnalytics"]').should('be.visible')
+      cy.get('@TopNav').find('svg[name="IconAlerts"]').should('be.visible')
+      cy.contains('button', 'Open menu').should('be.visible')
+  
+      cy.contains('Account').should('not.be.visible')
+      cy.get('svg[name="IconUser"]').should('not.be.visible')
+      cy.contains('Courses').should('not.be.visible')
+      cy.get('svg[name="IconCourses"]').should('not.be.visible')
+      cy.contains('Help').should('not.be.visible')
+      cy.get('svg[name="IconQuestion"]').should('not.be.visible')
+      
+      cy.contains('button', 'Open menu')
+        .click().wait(100)
+  
+      cy.contains('Account').should('be.visible')
+      cy.get('svg[name="IconUser"]').should('be.visible')
+      cy.contains('Courses').should('be.visible')
+      cy.get('svg[name="IconCourses"]').should('be.visible')
+      cy.contains('Help').should('be.visible')
+      cy.get('svg[name="IconQuestion"]').should('be.visible')
+  
+      cy.contains('Courses')
+        .click().wait(100)
+  
+      cy.contains('Courses1').should('be.visible')
+  
+      cy.get('[id^="DrilldownHeader-Back"]').contains('Courses').click()
+  
+      cy.get('Courses1').should('not.exist')
+  
+      cy.get('svg[name="IconX"]').closest('button')
+        .click().wait(100)
+  
+      cy.contains('Courses').should('not.be.visible')
+    })
+
+    it('should close burger menu after item selection in mobile view', async () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:3000/canvastopnav/')
+  
+      cy.contains('This is the dashboard').should('not.exist')
+      cy.get('ul[class$="-options__list"]').should('not.be.visible')
+  
+      cy.contains('button', 'Open menu')
+        .click().wait(100)
+  
+      cy.contains('Dashboard').should('be.visible')
+      cy.get('ul[class$="-options__list"]').should('be.visible')
+  
+      cy.contains('Dashboard')
+        .click().wait(100)
+  
+      cy.contains('This is the dashboard').should('be.visible')
+      cy.contains('Dashboard').should('not.be.visible')
+      cy.get('ul[class$="-options__list"]').should('not.be.visible')
+    })
+  })
+
+  describe('Tray', () => {
+    it('should open and close SideNav Tray properly', async () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('button', 'Courses')
+        .click().wait(100)
+
+      cy.contains('Course 1').should('be.visible')
+      cy.contains('Course 2').should('be.visible')
+
+      cy.get('svg[name="IconX"]').closest('button')
+        .click().wait(100)
+
+      cy.contains('Course 1').should('not.be.visible')
+      cy.contains('Course 2').should('not.be.visible')
+    })
+
+    it('should close SideNav Tray menu after item selection', async () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+  
+      cy.contains('This is the first course home page').should('not.exist')
+      cy.get('span[data-cid="Tray"]').should('not.exist')
+      cy.contains('Course 2').should('not.exist')
+  
+      cy.contains('Courses')
+        .click().wait(100)
+  
+      cy.get('span[data-cid="Tray"]').should('be.visible')
+      cy.contains('Course 2').should('be.visible')
+  
+      cy.contains('Course 1')
+        .click().wait(100)
+  
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('span[data-cid="Tray"]').should('not.be.visible')
+      cy.contains('Course 2').should('not.exist')
+    })
+  })
+
+  describe('LTI', () => {
+    it('should display the LTI topNavBar only on specific pages', () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('This is home').should('be.visible')
+      cy.get('div[class$="-desktopTopNavContainer"]')
+        .should('not.be.visible')
+
+      cy.contains('Studio')
+        .click().wait(100)
+
+      cy.get('div[class$="-desktopTopNavContainer"]')
+        .should('be.visible')
+    })
+
+    it('should show LTI topNavBar menu items', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.contains('LTI VIEW TEST').should('be.visible')
+
+      cy.get('div[class$="-desktopTopNavStart"]').as('menu')
+        .should('exist')
+
+      cy.get('@menu')
+        .find('li').should('have.length', 6)
+    })
+
+    it('should highlight selected LTI topNavBar menu item', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .find('div[class$="-topNavBarItem__container"]').as('firstMenuItemContainer')
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .contains('a', 'Overview').as('firstMenuItem')
+
+      cy.get('@firstMenuItem')
+        .should('have.attr', 'aria-current', 'page')
+
+      cy.get('@firstMenuItemContainer')
+        .then(($container) => {
+          cy.window().then((win) => {
+            const afterStyles = win.getComputedStyle($container[0], '::after')
+            // Menu item underline
+            const height = parseFloat(afterStyles.getPropertyValue('height'))
+            expect(height).to.be.greaterThan(0)
+          })
+        })
+
+      cy.get('div[class$="-desktopTopNavStart"]')
+        .contains('a', 'Admin').as('secondMenuItem')
+
+      cy.get('@secondMenuItem')
+        .should('not.have.attr', 'aria-current')
+    })
+
+    it('should highlight focused LTI topNavBar menu item', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.contains('a', 'Settings').as('menuItem')
+      cy.contains('a', 'Admin').as('menuItem2')
+
+      cy.get('@menuItem').focus().wait(800)
+        .then(($item) => {
+          cy.window().then((win) => {
+            const styles = win.getComputedStyle($item[0])
+            const outline = styles.getPropertyValue('outline')
+
+            expect(outline).to.equal('rgb(43, 122, 188) solid 2px')
+          })
+        })
+
+      cy.get('@menuItem2')
+      .then(($item2) => {
+        cy.window().then((win) => {
+          const styles = win.getComputedStyle($item2[0])
+          const outline = styles.getPropertyValue('outline')
+
+          expect(outline).to.equal('rgba(43, 122, 188, 0) solid 2px')
+        })
+      })
+    })
+
+    // TODO sub menu?
+    // it('should show LTI topNavBar SubMenu as menuitem', () => {
+    //   cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+    //   cy.get('div[class$="-desktopTopNavStart"]')
+    //     .find('li').eq(3).as('subMenu')
+
+    //   cy.get('@subMenu').click().wait(100)
+
+    //   cy.contains('Link One').should('be.visible')
+
+    //   cy.contains('Link One').click().wait(100)
+
+    //   cy.contains('Level 2 Option One').should('be.visible')
+    //   cy.get('Link One').should('not.exist')
+
+    //   cy.contains('Back').click().wait(100)
+
+    //   cy.contains('Link One').should('be.visible')
+
+    //   cy.contains('Link Two').click().wait(100)
+
+    //   cy.url().should('contain', '/#TopNavBar')
+    //   cy.get('Link Two').should('not.exist')
+    // })
+
+    // TODO sub menu?
+    // it('should close LTI TopNav SubMenu after item selection', async () => {
+    //   cy.visit('http://localhost:3000/canvastopnav?page=studio')
+  
+    //   cy.contains('LTI VIEW TEST').should('be.visible')
+    //   cy.get('ul[class$="-options__list"]').should('not.exist')
+  
+    //   cy.contains('Submenu')
+    //     .click().wait(100)
+  
+    //   cy.get('ul[class$="-options__list"]').should('be.visible')
+    //   cy.contains('Link One').should('be.visible')
+  
+    //   cy.contains('Link Two')
+    //     .click().wait(100)
+  
+    //   cy.get('ul[class$="-options__list"]').should('not.exist')
+    //   cy.contains('Link One').should('not.exist')
+    // })
+
+    it('should show LTI topNavBar buttons', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.get('div[class$="-desktopTopNavEnd"]')
+        .find('button').should('have.length', 2)
+
+      cy.get('div[class$="-desktopTopNavEnd"]')
+        .find('button').eq(0).as('AddLineButton')
+
+      cy.get('@AddLineButton')
+        .should('have.text', 'AddLine')
+
+      cy.get('@AddLineButton').find('svg[name="IconAdd"]')
+        .should('exist')
+    })
+
+    it('should trigger onclick callback on LTI topNavBar button click', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.on('window:alert', cy.spy().as('alertSpy'))
+
+      cy.contains('LTI VIEW TEST').should('be.visible')
+
+      cy.contains('button', 'AddLine')
+        .click()
+
+      cy.get('@alertSpy')
+        .should('have.been.calledWith', 'Button 1')
+    })
+
+    it('should not show LTI topNavBar menu items and buttons in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.contains('LTI VIEW TEST').should('be.visible')
+
+      cy.get('AddLine').should('not.exist')
+      cy.get('svg[name="IconAdd"]').should('not.exist')
+
+      cy.get('div[class$="-topNavBarMenuItems"]').should('not.exist')
+      cy.get('Settings').should('not.exist')
+    })
+  })
+
+  describe('SubNav', () => {
+    it('should show subNav on specific page', () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-subNavContainer"]').should('not.exist')
+      cy.contains('Announcements').should('not.exist')
+
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Course 1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('div[class$="-subNavContainer"]').should('exist')
+      cy.contains('Announcements').should('be.visible')
+    })
+
+    it('should show subNav in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('div[class$="-subNavContainer"]').should('not.exist')
+      cy.contains('Announcements').should('not.exist')
+
+      cy.contains('button', 'Open menu').click().wait(100)
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Courses1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('div[class$="-subNavContainer"]').should('exist')
+      cy.contains('Announcements').should('be.visible')
+    })
+  })
+
+  describe('Breadcrumbs', () => {
+    it('should show Breadcrumbs', () => {
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('ol[class$="-breadcrumb"]').should('not.be.visible')
+      cy.contains('FirstC').should('not.be.visible')
+      cy.contains('Crumb2').should('not.be.visible')
+      cy.url().should('not.contain', '#crumb1')
+      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should('not.be.visible')
+
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Course 1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('ol[class$="-breadcrumb"]').should('be.visible')
+      cy.contains('FirstC').should('be.visible')
+      cy.contains('Crumb2').should('be.visible')
+
+      cy.contains('FirstC').trigger('mouseover')
+      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should('be.visible')
+
+      cy.contains('FirstC').click().wait(100)
+      cy.url().should('contain', '#crumb1')
+    })
+
+    it('should not show Breadcrumbs in mobile view', () => {
+      cy.viewport(300, 400)
+      cy.visit('http://localhost:3000/canvastopnav/')
+
+      cy.contains('This is home').should('exist')
+      cy.get('ol[class$="-breadcrumb"]').should('not.exist')
+      cy.contains('FirstC').should('not.exist')
+      cy.contains('Crumb2').should('not.exist')
+
+      cy.contains('button', 'Open menu').click().wait(100)
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Courses1').click().wait(100)
+
+      cy.contains('This is the first course home page').should('be.visible')
+      cy.get('ol[class$="-breadcrumb"]').should('not.exist')
+      cy.contains('FirstC').should('not.exist')
+      cy.contains('Crumb2').should('not.exist')
+    })
+  })
+})
\ No newline at end of file
diff --git a/regression-test/src/app/canvastopnav/page.tsx b/regression-test/src/app/canvastopnav/page.tsx
index 8d32bd02f8..9fa2ea2b73 100644
--- a/regression-test/src/app/canvastopnav/page.tsx
+++ b/regression-test/src/app/canvastopnav/page.tsx
@@ -345,10 +345,10 @@ export default function CanvasTopNavPage() {
               label: 'You are here:',
               links: [
                 {
-                  href: '#',
-                  label: 'Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1Crumb 1'
+                  href: '#crumb1',
+                  label: 'FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1'
                 },
-                { href: '#', label: 'Crumb 2' },
+                { href: '#crumb2', label: 'Crumb2' },
                 { label: 'Home' }
               ]
             }}

From 67850f1face2d43f34e01f595e9cd7ff67257acc Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 7 Jul 2025 14:45:14 +0200
Subject: [PATCH 52/53] test: add submenu to LTI menulist

---
 regression-test/cypress/e2e/spec.cy.ts        | 263 ++++++++----------
 regression-test/src/app/canvastopnav/page.tsx |  41 ++-
 2 files changed, 154 insertions(+), 150 deletions(-)

diff --git a/regression-test/cypress/e2e/spec.cy.ts b/regression-test/cypress/e2e/spec.cy.ts
index 1780456c20..6a317467c7 100644
--- a/regression-test/cypress/e2e/spec.cy.ts
+++ b/regression-test/cypress/e2e/spec.cy.ts
@@ -24,7 +24,6 @@
 
 import type { Result, RunOnly } from 'axe-core'
 
-
 describe('visual regression test', () => {
   type ConsoleErrorStub = Cypress.Agent<sinon.SinonStub<any[], any>>
   let windowErrorSpy: ConsoleErrorStub | undefined
@@ -104,20 +103,16 @@ describe('CanvasTopNavBar', () => {
       cy.url().should('not.contain', 'studio')
       cy.contains('Studio').should('be.visible')
 
-      cy.contains('Studio')
-        .click().wait(100)
+      cy.contains('Studio').click().wait(100)
 
       cy.url().should('contain', 'page=studio')
 
-      cy.contains('Account')
-        .click().wait(100)
+      cy.contains('Account').click().wait(100)
 
       cy.url().should('contain', 'page=account')
 
-      cy.contains('Courses')
-        .click().wait(100)
-      cy.contains('Course 1')
-        .click().wait(100)
+      cy.contains('Courses').click().wait(100)
+      cy.contains('Course 1').click().wait(100)
 
       cy.url().should('contain', 'page=course1')
     })
@@ -128,59 +123,56 @@ describe('CanvasTopNavBar', () => {
       cy.on('window:alert', cy.stub().as('alertStub'))
       const expectedAlertText = 'Help clicked'
 
-      cy.contains('Help')
-        .click().wait(100)
+      cy.contains('Help').click().wait(100)
 
-      cy.get('@alertStub')
-        .should('have.been.calledOnceWith', expectedAlertText)
+      cy.get('@alertStub').should('have.been.calledOnceWith', expectedAlertText)
     })
 
     it('should show main navigation as SideNavBar with labelled items', async () => {
       cy.visit('http://localhost:3000/canvastopnav/')
-  
+
       cy.contains('This is home').should('be.visible')
       cy.get('nav[data-cid="SideNavBar"]').as('SideNavBar').should('exist')
-  
+
       cy.get('@SideNavBar').find('li').should('have.length', 6)
-  
+
       cy.contains('Account').should('be.visible')
       cy.get('svg[name="IconUser"]').should('be.visible')
-  
+
       cy.contains('Courses').should('be.visible')
       cy.get('svg[name="IconCourses"]').should('be.visible')
-  
+
       cy.contains('Help').should('be.visible')
       cy.get('svg[name="IconQuestion"]').should('be.visible')
-  
+
       cy.contains('button', 'Minimize SideNavBar').should('be.visible')
     })
 
     it('should minimize SideNavBar and show only icons as items', async () => {
       cy.visit('http://localhost:3000/canvastopnav/')
-  
+
       cy.contains('This is home').should('exist')
       cy.get('li[class$="-navigation__list"]').should('have.length', 6)
-  
+
       cy.contains('Account').should('be.visible')
       cy.get('svg[name="IconUser"]').should('be.visible')
-  
+
       cy.contains('Courses').should('be.visible')
       cy.get('svg[name="IconCourses"]').should('be.visible')
-  
+
       cy.contains('Help').should('be.visible')
       cy.get('svg[name="IconQuestion"]').should('be.visible')
-  
-      cy.contains('button', 'Minimize SideNavBar')
-        .click().wait(100)
-  
+
+      cy.contains('button', 'Minimize SideNavBar').click().wait(100)
+
       cy.get('li[class$="-navigation__list"]').should('have.length', 6)
-  
+
       cy.contains('Account').should('not.be.visible')
       cy.get('svg[name="IconUser"]').should('be.visible')
-  
+
       cy.contains('Courses').should('not.be.visible')
       cy.get('svg[name="IconCourses"]').should('be.visible')
-  
+
       cy.contains('Help').should('not.be.visible')
       cy.get('svg[name="IconQuestion"]').should('be.visible')
     })
@@ -188,61 +180,56 @@ describe('CanvasTopNavBar', () => {
     it('should show main navigation as topNavBar and burger menu in mobile view', () => {
       cy.viewport(300, 400)
       cy.visit('http://localhost:3000/canvastopnav/')
-  
+
       cy.contains('This is home').should('exist')
       cy.get('div[class$="-mobileTopNavTopBar"]').as('TopNav').should('exist')
       cy.get('@TopNav').find('svg[name="IconAnalytics"]').should('be.visible')
       cy.get('@TopNav').find('svg[name="IconAlerts"]').should('be.visible')
       cy.contains('button', 'Open menu').should('be.visible')
-  
+
       cy.contains('Account').should('not.be.visible')
       cy.get('svg[name="IconUser"]').should('not.be.visible')
       cy.contains('Courses').should('not.be.visible')
       cy.get('svg[name="IconCourses"]').should('not.be.visible')
       cy.contains('Help').should('not.be.visible')
       cy.get('svg[name="IconQuestion"]').should('not.be.visible')
-      
-      cy.contains('button', 'Open menu')
-        .click().wait(100)
-  
+
+      cy.contains('button', 'Open menu').click().wait(100)
+
       cy.contains('Account').should('be.visible')
       cy.get('svg[name="IconUser"]').should('be.visible')
       cy.contains('Courses').should('be.visible')
       cy.get('svg[name="IconCourses"]').should('be.visible')
       cy.contains('Help').should('be.visible')
       cy.get('svg[name="IconQuestion"]').should('be.visible')
-  
-      cy.contains('Courses')
-        .click().wait(100)
-  
+
+      cy.contains('Courses').click().wait(100)
+
       cy.contains('Courses1').should('be.visible')
-  
+
       cy.get('[id^="DrilldownHeader-Back"]').contains('Courses').click()
-  
+
       cy.get('Courses1').should('not.exist')
-  
-      cy.get('svg[name="IconX"]').closest('button')
-        .click().wait(100)
-  
+
+      cy.get('svg[name="IconX"]').closest('button').click().wait(100)
+
       cy.contains('Courses').should('not.be.visible')
     })
 
     it('should close burger menu after item selection in mobile view', async () => {
       cy.viewport(300, 400)
       cy.visit('http://localhost:3000/canvastopnav/')
-  
+
       cy.contains('This is the dashboard').should('not.exist')
       cy.get('ul[class$="-options__list"]').should('not.be.visible')
-  
-      cy.contains('button', 'Open menu')
-        .click().wait(100)
-  
+
+      cy.contains('button', 'Open menu').click().wait(100)
+
       cy.contains('Dashboard').should('be.visible')
       cy.get('ul[class$="-options__list"]').should('be.visible')
-  
-      cy.contains('Dashboard')
-        .click().wait(100)
-  
+
+      cy.contains('Dashboard').click().wait(100)
+
       cy.contains('This is the dashboard').should('be.visible')
       cy.contains('Dashboard').should('not.be.visible')
       cy.get('ul[class$="-options__list"]').should('not.be.visible')
@@ -253,14 +240,12 @@ describe('CanvasTopNavBar', () => {
     it('should open and close SideNav Tray properly', async () => {
       cy.visit('http://localhost:3000/canvastopnav/')
 
-      cy.contains('button', 'Courses')
-        .click().wait(100)
+      cy.contains('button', 'Courses').click().wait(100)
 
       cy.contains('Course 1').should('be.visible')
       cy.contains('Course 2').should('be.visible')
 
-      cy.get('svg[name="IconX"]').closest('button')
-        .click().wait(100)
+      cy.get('svg[name="IconX"]').closest('button').click().wait(100)
 
       cy.contains('Course 1').should('not.be.visible')
       cy.contains('Course 2').should('not.be.visible')
@@ -268,20 +253,18 @@ describe('CanvasTopNavBar', () => {
 
     it('should close SideNav Tray menu after item selection', async () => {
       cy.visit('http://localhost:3000/canvastopnav/')
-  
+
       cy.contains('This is the first course home page').should('not.exist')
       cy.get('span[data-cid="Tray"]').should('not.exist')
       cy.contains('Course 2').should('not.exist')
-  
-      cy.contains('Courses')
-        .click().wait(100)
-  
+
+      cy.contains('Courses').click().wait(100)
+
       cy.get('span[data-cid="Tray"]').should('be.visible')
       cy.contains('Course 2').should('be.visible')
-  
-      cy.contains('Course 1')
-        .click().wait(100)
-  
+
+      cy.contains('Course 1').click().wait(100)
+
       cy.contains('This is the first course home page').should('be.visible')
       cy.get('span[data-cid="Tray"]').should('not.be.visible')
       cy.contains('Course 2').should('not.exist')
@@ -293,14 +276,11 @@ describe('CanvasTopNavBar', () => {
       cy.visit('http://localhost:3000/canvastopnav/')
 
       cy.contains('This is home').should('be.visible')
-      cy.get('div[class$="-desktopTopNavContainer"]')
-        .should('not.be.visible')
+      cy.get('div[class$="-desktopTopNavContainer"]').should('not.be.visible')
 
-      cy.contains('Studio')
-        .click().wait(100)
+      cy.contains('Studio').click().wait(100)
 
-      cy.get('div[class$="-desktopTopNavContainer"]')
-        .should('be.visible')
+      cy.get('div[class$="-desktopTopNavContainer"]').should('be.visible')
     })
 
     it('should show LTI topNavBar menu items', () => {
@@ -308,40 +288,38 @@ describe('CanvasTopNavBar', () => {
 
       cy.contains('LTI VIEW TEST').should('be.visible')
 
-      cy.get('div[class$="-desktopTopNavStart"]').as('menu')
-        .should('exist')
+      cy.get('div[class$="-desktopTopNavStart"]').as('menu').should('exist')
 
-      cy.get('@menu')
-        .find('li').should('have.length', 6)
+      cy.get('@menu').find('li').should('have.length', 4)
     })
 
     it('should highlight selected LTI topNavBar menu item', () => {
       cy.visit('http://localhost:3000/canvastopnav?page=studio')
 
       cy.get('div[class$="-desktopTopNavStart"]')
-        .find('div[class$="-topNavBarItem__container"]').as('firstMenuItemContainer')
+        .find('div[class$="-topNavBarItem__container"]')
+        .as('firstMenuItemContainer')
 
       cy.get('div[class$="-desktopTopNavStart"]')
-        .contains('a', 'Overview').as('firstMenuItem')
+        .contains('a', 'Overview')
+        .as('firstMenuItem')
 
-      cy.get('@firstMenuItem')
-        .should('have.attr', 'aria-current', 'page')
+      cy.get('@firstMenuItem').should('have.attr', 'aria-current', 'page')
 
-      cy.get('@firstMenuItemContainer')
-        .then(($container) => {
-          cy.window().then((win) => {
-            const afterStyles = win.getComputedStyle($container[0], '::after')
-            // Menu item underline
-            const height = parseFloat(afterStyles.getPropertyValue('height'))
-            expect(height).to.be.greaterThan(0)
-          })
+      cy.get('@firstMenuItemContainer').then(($container) => {
+        cy.window().then((win) => {
+          const afterStyles = win.getComputedStyle($container[0], '::after')
+          // Menu item underline
+          const height = parseFloat(afterStyles.getPropertyValue('height'))
+          expect(height).to.be.greaterThan(0)
         })
+      })
 
       cy.get('div[class$="-desktopTopNavStart"]')
-        .contains('a', 'Admin').as('secondMenuItem')
+        .contains('a', 'Admin')
+        .as('secondMenuItem')
 
-      cy.get('@secondMenuItem')
-        .should('not.have.attr', 'aria-current')
+      cy.get('@secondMenuItem').should('not.have.attr', 'aria-current')
     })
 
     it('should highlight focused LTI topNavBar menu item', () => {
@@ -350,7 +328,9 @@ describe('CanvasTopNavBar', () => {
       cy.contains('a', 'Settings').as('menuItem')
       cy.contains('a', 'Admin').as('menuItem2')
 
-      cy.get('@menuItem').focus().wait(800)
+      cy.get('@menuItem')
+        .focus()
+        .wait(800)
         .then(($item) => {
           cy.window().then((win) => {
             const styles = win.getComputedStyle($item[0])
@@ -360,8 +340,7 @@ describe('CanvasTopNavBar', () => {
           })
         })
 
-      cy.get('@menuItem2')
-      .then(($item2) => {
+      cy.get('@menuItem2').then(($item2) => {
         cy.window().then((win) => {
           const styles = win.getComputedStyle($item2[0])
           const outline = styles.getPropertyValue('outline')
@@ -372,65 +351,63 @@ describe('CanvasTopNavBar', () => {
     })
 
     // TODO sub menu?
-    // it('should show LTI topNavBar SubMenu as menuitem', () => {
-    //   cy.visit('http://localhost:3000/canvastopnav?page=studio')
+    it('should show LTI topNavBar SubMenu as menuitem', () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
 
-    //   cy.get('div[class$="-desktopTopNavStart"]')
-    //     .find('li').eq(3).as('subMenu')
+      cy.get('div[class$="-desktopTopNavStart"]').find('li').eq(3).as('subMenu')
 
-    //   cy.get('@subMenu').click().wait(100)
+      cy.get('@subMenu').click()
 
-    //   cy.contains('Link One').should('be.visible')
+      cy.contains('Link One').should('be.visible')
 
-    //   cy.contains('Link One').click().wait(100)
+      cy.contains('Link One').click()
 
-    //   cy.contains('Level 2 Option One').should('be.visible')
-    //   cy.get('Link One').should('not.exist')
+      cy.contains('Level 2 Option One').should('be.visible')
+      cy.get('Link One').should('not.exist')
 
-    //   cy.contains('Back').click().wait(100)
+      cy.contains('Back').click().wait(100)
 
-    //   cy.contains('Link One').should('be.visible')
+      cy.contains('Link One').should('be.visible')
 
-    //   cy.contains('Link Two').click().wait(100)
+      cy.contains('Link Two').click().wait(100)
 
-    //   cy.url().should('contain', '/#TopNavBar')
-    //   cy.get('Link Two').should('not.exist')
-    // })
+      cy.url().should('contain', '/#TopNavBar')
+      cy.get('Link Two').should('not.exist')
+    })
 
     // TODO sub menu?
-    // it('should close LTI TopNav SubMenu after item selection', async () => {
-    //   cy.visit('http://localhost:3000/canvastopnav?page=studio')
-  
-    //   cy.contains('LTI VIEW TEST').should('be.visible')
-    //   cy.get('ul[class$="-options__list"]').should('not.exist')
-  
-    //   cy.contains('Submenu')
-    //     .click().wait(100)
-  
-    //   cy.get('ul[class$="-options__list"]').should('be.visible')
-    //   cy.contains('Link One').should('be.visible')
-  
-    //   cy.contains('Link Two')
-    //     .click().wait(100)
-  
-    //   cy.get('ul[class$="-options__list"]').should('not.exist')
-    //   cy.contains('Link One').should('not.exist')
-    // })
+    it('should close LTI TopNav SubMenu after item selection', async () => {
+      cy.visit('http://localhost:3000/canvastopnav?page=studio')
+
+      cy.contains('LTI VIEW TEST').should('be.visible')
+      cy.get('ul[class$="-options__list"]').should('not.exist')
+
+      cy.contains('Submenu').click().wait(100)
+
+      cy.get('ul[class$="-options__list"]').should('be.visible')
+      cy.contains('Link One').should('be.visible')
+
+      cy.contains('Link Two').click().wait(100)
+
+      cy.get('ul[class$="-options__list"]').should('not.exist')
+      cy.contains('Link One').should('not.exist')
+    })
 
     it('should show LTI topNavBar buttons', () => {
       cy.visit('http://localhost:3000/canvastopnav?page=studio')
 
       cy.get('div[class$="-desktopTopNavEnd"]')
-        .find('button').should('have.length', 2)
+        .find('button')
+        .should('have.length', 2)
 
       cy.get('div[class$="-desktopTopNavEnd"]')
-        .find('button').eq(0).as('AddLineButton')
+        .find('button')
+        .eq(0)
+        .as('AddLineButton')
 
-      cy.get('@AddLineButton')
-        .should('have.text', 'AddLine')
+      cy.get('@AddLineButton').should('have.text', 'AddLine')
 
-      cy.get('@AddLineButton').find('svg[name="IconAdd"]')
-        .should('exist')
+      cy.get('@AddLineButton').find('svg[name="IconAdd"]').should('exist')
     })
 
     it('should trigger onclick callback on LTI topNavBar button click', () => {
@@ -440,11 +417,9 @@ describe('CanvasTopNavBar', () => {
 
       cy.contains('LTI VIEW TEST').should('be.visible')
 
-      cy.contains('button', 'AddLine')
-        .click()
+      cy.contains('button', 'AddLine').click()
 
-      cy.get('@alertSpy')
-        .should('have.been.calledWith', 'Button 1')
+      cy.get('@alertSpy').should('have.been.calledWith', 'Button 1')
     })
 
     it('should not show LTI topNavBar menu items and buttons in mobile view', () => {
@@ -504,7 +479,9 @@ describe('CanvasTopNavBar', () => {
       cy.contains('FirstC').should('not.be.visible')
       cy.contains('Crumb2').should('not.be.visible')
       cy.url().should('not.contain', '#crumb1')
-      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should('not.be.visible')
+      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should(
+        'not.be.visible'
+      )
 
       cy.contains('Courses').click().wait(100)
       cy.contains('Course 1').click().wait(100)
@@ -515,7 +492,9 @@ describe('CanvasTopNavBar', () => {
       cy.contains('Crumb2').should('be.visible')
 
       cy.contains('FirstC').trigger('mouseover')
-      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should('be.visible')
+      cy.contains('FirstCrumb Crumb1 Crumb1 Crumb1 Crumb1 Crumb1').should(
+        'be.visible'
+      )
 
       cy.contains('FirstC').click().wait(100)
       cy.url().should('contain', '#crumb1')
@@ -540,4 +519,4 @@ describe('CanvasTopNavBar', () => {
       cy.contains('Crumb2').should('not.exist')
     })
   })
-})
\ No newline at end of file
+})
diff --git a/regression-test/src/app/canvastopnav/page.tsx b/regression-test/src/app/canvastopnav/page.tsx
index 9fa2ea2b73..7e3b3afbe2 100644
--- a/regression-test/src/app/canvastopnav/page.tsx
+++ b/regression-test/src/app/canvastopnav/page.tsx
@@ -387,14 +387,39 @@ export default function CanvasTopNavPage() {
                 <TopNavBar.Item id="SettingsPage" href="/#TopNavBar">
                   Settings
                 </TopNavBar.Item>
-                <TopNavBar.Item id="MapsPage" href="/#TopNavBar">
-                  Maps
-                </TopNavBar.Item>
-                <TopNavBar.Item id="AssessmentsPage" href="/#TopNavBar">
-                  Assessments
-                </TopNavBar.Item>
-                <TopNavBar.Item id="CommunityPage" href="/#TopNavBar">
-                  Community
+                <TopNavBar.Item
+                  id="itemSubmenuExample"
+                  renderSubmenu={
+                    <Drilldown rootPageId="root">
+                      <Drilldown.Page id="root">
+                        <Drilldown.Option
+                          id="rootOption1"
+                          subPageId="secondPage"
+                        >
+                          Link One
+                        </Drilldown.Option>
+                        <Drilldown.Option id="rootOption2" href="/#TopNavBar">
+                          Link Two
+                        </Drilldown.Option>
+                        <Drilldown.Option id="rootOption3" href="/#TopNavBar">
+                          Link Three
+                        </Drilldown.Option>
+                      </Drilldown.Page>
+                      <Drilldown.Page id="secondPage">
+                        <Drilldown.Option id="secondPageOption1">
+                          Level 2 Option One
+                        </Drilldown.Option>
+                        <Drilldown.Option
+                          id="secondPageOption2"
+                          href="/#TopNavBar"
+                        >
+                          Level 2 Option Two
+                        </Drilldown.Option>
+                      </Drilldown.Page>
+                    </Drilldown>
+                  }
+                >
+                  Submenu
                 </TopNavBar.Item>
               </TopNavBar.MenuItems>
             }

From bb5669a67ac48eb6b0faca6b35a28e478e454e7e Mon Sep 17 00:00:00 2001
From: Peter Pal Hudak <hudakpe@gmail.com>
Date: Mon, 7 Jul 2025 14:46:38 +0200
Subject: [PATCH 53/53] feat: remove todos

---
 regression-test/cypress/e2e/spec.cy.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/regression-test/cypress/e2e/spec.cy.ts b/regression-test/cypress/e2e/spec.cy.ts
index 6a317467c7..f9468ad311 100644
--- a/regression-test/cypress/e2e/spec.cy.ts
+++ b/regression-test/cypress/e2e/spec.cy.ts
@@ -350,7 +350,6 @@ describe('CanvasTopNavBar', () => {
       })
     })
 
-    // TODO sub menu?
     it('should show LTI topNavBar SubMenu as menuitem', () => {
       cy.visit('http://localhost:3000/canvastopnav?page=studio')
 
@@ -375,7 +374,6 @@ describe('CanvasTopNavBar', () => {
       cy.get('Link Two').should('not.exist')
     })
 
-    // TODO sub menu?
     it('should close LTI TopNav SubMenu after item selection', async () => {
       cy.visit('http://localhost:3000/canvastopnav?page=studio')