@stack-spot/portal-layout 0.0.26 → 0.0.27

package/dist/layout.css

@@ -39,7 +39,7 @@ body {
 
 #layout {
   --header-height: 56px;
-  --menu-sections-width: 87px;
+  --menu-sections-width: 135px;
   --menu-content-width: 233px;
   --menu-item-height: 74px;
   --modal-animation-duration: 0.3s;
@@ -50,7 +50,7 @@ body {
 }
 
 #layout.menu-compact {
-  --menu-sections-width: 56px;
+  --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
@@ -147,8 +147,8 @@ body {
   position: relative;
 }
 
-#layout.menu-compact .section-label {
-  display: none;
+#menuSections .sections-footer {
+  padding: 16px;
 }
 
 #menuSections .toggle,
@@ -161,7 +161,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   transition: background-color 0.2s;
   cursor: pointer;
@@ -175,7 +175,6 @@ body {
   height: 24px;
   transform: scaleY(0);
   transition: transform ease-in 0.2s;
-  background-color: var(--primary-500);
   border-radius: 50%;
   left: 0;
 }
@@ -186,6 +185,7 @@ body {
 
 #menuSections > ul li.active a:before {
   transform: scaleY(1);
+  background-color: var(--primary-500);
 }
 
 #menuSections .toggle:hover,
@@ -195,6 +195,11 @@ body {
   background: var(--light-500);
 }
 
+#menuSections > ul li:not(.active) a:hover:before {
+  transform: scaleY(1); 
+  background-color: var(--light-contrastText);
+}
+
 #menuSections .toggle i {
   position: relative;
 }
@@ -430,3 +435,19 @@ i {
   height: 0;
   overflow: hidden;
 }
+
+#menuSections .section-submenu {
+  position: relative;
+}
+
+#menuSections .section-submenu-icon {
+  opacity: 0;
+  position: absolute;
+  top: 27%;
+  right: 10px;
+  background-color: inherit;
+}
+
+#menuSections .section-submenu-icon:focus-visible {
+  opacity: 1; 
+}

package/dist/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/SelectionList.tsx

@@ -3,8 +3,9 @@ import { ArrowLeft, Check, ChevronRight } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactElement, useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { useKeyboardControls } from './menu/use-keyboard-controls'
 import { Action } from './types'
 
 interface ItemWithIcon {
@@ -171,7 +172,6 @@ export const SelectionList = ({
   id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
   const t = useTranslate(dictionary)
-  const wrapper = useRef<HTMLDivElement>(null)
   const [current, setCurrent] = useState<CurrentItemList>({ items })
 
   const listItems = useMemo(
@@ -185,63 +185,7 @@ export const SelectionList = ({
     )),
     [current],
   )
-
-  const keyboardControls = useCallback((event: KeyboardEvent) => {
-    const target = event?.target as HTMLElement | null
-
-    function getSelectableAnchors() {
-      return wrapper.current?.querySelectorAll('li.action a, li.collapsible a, button') ?? []
-    }
-
-    function handleArrows(key = event.key) {
-      const anchors = getSelectableAnchors()
-      let i = 0
-      while (i < anchors.length && document.activeElement !== anchors[i]) i++
-      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
-      next?.focus?.()
-    }
-
-    const handlers: Record<string, (() => void) | undefined> = {
-      Escape: () => {
-        onHide?.()
-        event.stopPropagation()
-        event.preventDefault()
-      },
-      Enter: () => target?.click(),
-      Tab: () => {
-        const anchors = getSelectableAnchors()
-        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
-        else {
-          handleArrows('ArrowDown')
-          event.preventDefault()
-        }
-      },
-      ArrowUp: handleArrows,
-      ArrowDown: handleArrows,
-    }
-
-    handlers[event.key]?.()
-  }, [])
-
-  const hide = useCallback((event: Event) => {
-    const target = (event.target as HTMLElement | null)
-    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
-    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
-    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
-    if (!isClickInsideSelectionList || isAction) onHide?.()
-  }, [])
-
-  useEffect(() => {
-    if (visible) {
-      setCurrent({ items })
-      document.addEventListener('keydown', keyboardControls)
-      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
-    }
-    else {
-      document.removeEventListener('keydown', keyboardControls)
-      document.removeEventListener('click', hide)
-    }
-  }, [visible])
+  const wrapper = useKeyboardControls({ onHide, querySelectors: 'li.action a, li.collapsible a, button', visible })
 
   return (
     <SelectionBox

package/src/components/menu/MenuContent.tsx

@@ -9,7 +9,7 @@ import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
-import { useCheckTextOverflow } from './useCheckTextOverflow'
+import { useCheckTextOverflow } from './use-check-text-overflow'
 
 const BackLink = styled.a`
   display: flex;
@@ -69,7 +69,7 @@ export const MenuGroup = styled.ul`
         left: 2px;
         width: 2px;
         height: 0;
-        background: ${theme.color.primary['500']};
+        background: inherit;
         border-radius: 50%;
         transition: height 0.2s;
       }
@@ -82,9 +82,15 @@ export const MenuGroup = styled.ul`
         }
   
         &:before {
+          background: ${theme.color.primary['500']};
           height: 24px;
         }
       }
+
+      &:not(.active):hover:before {
+        background: ${theme.color.light.contrastText};
+        height: 24px;
+      }
     }
 
     .chevron {
@@ -145,6 +151,7 @@ export const ActionItem = ({ label, onClick, href, active, icon, badge, overflow
       }}
       className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
       {...(active ? { 'aria-current': 'page' } : undefined)}
+      {...(!href ? { 'tabIndex': 0 } : undefined)}
     >
       {icon}
       <Text ref={ref} appearance="body2" className={`label ${overflow}`} title={textOverflow ? label : ''}>{label}</Text>

package/src/components/menu/MenuSections.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { IconBox, Text } from '@citric/core'
-import { ChevronLeft, Menu as MenuIcon } from '@citric/icons'
-import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { Flex, IconBox, Text } from '@citric/core'
+import { ChevronRight, Cog, Collapse, Menu as MenuIcon } from '@citric/icons'
+import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useCallback, useMemo, useState } from 'react'
 import { MenuContent } from './MenuContent'
 import { MenuProps, MenuSection } from './types'
+import { useKeyboardControls } from './use-keyboard-controls'
 
 const ARROW_HEIGHT = 24
 const HIDE_OVERLAY_DELAY_MS = 400
@@ -50,9 +50,12 @@ const Section = ({
   setCurrentOverlay,
   id,
   hasContent,
-}: MenuSection & { id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean }) => {
+  className,
+}: MenuSection & {
+  id: number, setCurrentOverlay: (id: number | undefined) => void, hasContent: boolean,
+}) => {
   const contentToRender = typeof content === 'function' ? content() : content
-
+  const t = useTranslate(dictionary)
   function shouldShowOverlay() {
     /* The overlay should appear if:
      * 1. The section has some content to render OR:
@@ -63,7 +66,7 @@ const Section = ({
     return (!!contentToRender || !!customContent || (hasContent && active)) && (!active || !isMenuContentVisible())
   }
 
-  function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+  function showOverlayAndFixArrowPosition(event: React.MouseEvent<HTMLAnchorElement, MouseEvent> | React.KeyboardEvent<any>) {
     if (!shouldShowOverlay()) return
     onOpen?.()
     const rect = (event.target as HTMLElement)?.getBoundingClientRect()
@@ -81,22 +84,42 @@ const Section = ({
   }
 
   return (
-    <li key={label} title={label} className={active ? 'active' : undefined}>
-      <a
-        href={href}
-        target={target}
-        onClick={click}
-        onMouseEnter={showOverlayAndFixArrowPosition}
-        onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
-        title={label}
-        aria-label={label}
-        onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
-        {...(active ? { 'aria-current': 'page' } : undefined)}
-      >
-        {icon}
-        <Text appearance="microtext1" className="section-label">{label}</Text>
-      </a>
-    </li>
+    <>
+      <li key={label} title={label} className={`section-submenu ${className || ''} ${active ? 'active' : ''}`}>
+        <a
+          href={href}
+          target={target}
+          onClick={click}
+          onMouseEnter={showOverlayAndFixArrowPosition}
+          onMouseLeave={() => shouldShowOverlay() && hideOverlay()}
+          title={label}
+          aria-label={label}
+          onKeyDown={onClick ? e => e.key === 'Enter' && onClick() : undefined}
+          {...(active ? { 'aria-current': 'page' } : undefined)}
+          {...(!href ? { 'tabIndex': 0 } : undefined)}
+        >
+          <Flex alignItems="center" justifyContent="center" px={5}>
+            {icon}
+            <Text appearance="body2" className="section-label" ml={2}>{label}</Text>
+          </Flex>
+        </a>
+        {shouldShowOverlay() &&
+          <IconBox size="sm" className="section-submenu-icon"
+            as="button"
+            aria-label={interpolate(t.menuOptions, label)}
+            aria-controls={MENU_OVERLAY_ID}
+            aria-expanded={document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible')}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                showOverlayAndFixArrowPosition(event)
+              }
+            }
+            }>
+            <ChevronRight />
+          </IconBox>
+        }
+      </li>
+    </>
   )
 }
 
@@ -104,15 +127,17 @@ const OverlayRenderer = ({ content, customContent }: Pick<MenuSection, 'content'
   if (customContent) {
     return <> {customContent} </>
   }
-  
+
   const data = typeof content === 'function' ? content() : content
-  return <div><MenuContent {...data} /></div>
+  return <MenuContent {...data} />
 }
 
 export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   const t = useTranslate(dictionary)
   // this is a mock state only used to force an update on the component.
   const [_, setUpdate] = useState(0)
+  const onHide = () => hideOverlay()
+
   const toggleMenu = useCallback(() => {
     const layout = document.getElementById('layout')
     if (!layout) return
@@ -132,6 +157,18 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
     [sections],
   )
 
+  function onPressEscape() {
+    hideOverlay()
+    const items = document.getElementsByClassName('section-submenu')
+    if (!!items && !!currentOverlay && items.length > currentOverlay && items[currentOverlay].children.length > 1) {
+      (items[currentOverlay].children[1] as HTMLElement).focus()
+    }
+  }
+
+  const wrapper = useKeyboardControls({ onHide, visible: document.getElementById(MENU_OVERLAY_ID)?.classList.contains('visible') || false, 
+    querySelectors: 'li a.action, #custom-selectable-item button, #custom-selectable-item input', 
+    onPressEscape: () => onPressEscape() })
+
   /* This function renders the section preview in the overlay in normal circumstances. If the menu is hidden and the section is active,
   instead of rendering the section preview, it will render the actual menu content, which would be invisible otherwise.
   Below, the key is of extreme importance. It ensures React will consider every section content to be an entirely different
@@ -139,26 +176,43 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
   hook, this would cause some serious problems. */
   function renderMenuOverlay() {
     if (currentOverlay === undefined) return null
-    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active && 
+    const shouldRenderMenuContentInstead = !isMenuContentVisible() && sections[currentOverlay].active &&
       (!!props.content || !!props.customContent)
     return shouldRenderMenuContentInstead
       ? <OverlayRenderer key={'contentKey' in props ? props.contentKey : undefined} content={props.content}
         customContent={props.customContent} />
-      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content} 
+      : <OverlayRenderer key={currentOverlay} content={sections[currentOverlay].content}
         customContent={sections[currentOverlay].customContent} />
   }
 
   return (
     <>
       <ul>{sectionItems}</ul>
-      {(!!props.content || !!props.customContent) && 
-        <button className="toggle" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
-          <IconBox>
-            <MenuIcon className="expand" />
-            <ChevronLeft className="collapse" />
-          </IconBox>
-        </button>}
-      <div id="menuContentOverlay" onMouseEnter={showOverlay} onMouseLeave={hideOverlay}>
+
+      {(!!props.content || !!props.customContent || props.settings?.show) && 
+        <Flex mb={7} alignItems="center" justifyContent="center">
+          {(!!props.content || !!props.customContent) &&
+          <button className="toggle sections-footer" onClick={toggleMenu} title={t.toggle} tabIndex={-1} aria-hidden>
+            <IconBox>
+              <MenuIcon className="expand" />
+              <Collapse className="collapse" />
+            </IconBox>
+          </button>}
+          {(props.settings?.show) &&
+          <a href={props.settings?.href} onClick={props.settings?.onClick}
+            className="sections-footer"
+            {...(props.settings.active ? { 'aria-current': 'page' } : undefined)}>
+            <Flex alignItems="center" justifyContent="center">
+              <IconBox aria-label={t.settingsIcon}>
+                <Cog />
+              </IconBox>
+              <Text appearance="body2" ml={2}>{t.settings}</Text>
+            </Flex>
+          </a>
+          }
+        </Flex>
+      }
+      <div id={MENU_OVERLAY_ID} onMouseEnter={showOverlay} onMouseLeave={hideOverlay} ref={wrapper}>
         {renderMenuOverlay()}
         <div className="arrow"></div>
       </div>
@@ -169,8 +223,14 @@ export const MenuSections = ({ sections = [], ...props }: MenuProps) => {
 const dictionary = {
   en: {
     toggle: 'Show or hide the menu',
+    menuOptions: 'View $0 menu options',
+    settings: 'Settings',
+    settingsIcon: 'Settings icon',
   },
   pt: {
     toggle: 'Visualizar ou esconder o menu',
+    menuOptions: 'Visualizar opções do menu $0',
+    settings: 'Configurações',
+    settingsIcon: 'Icone de configurações',
   },
 } satisfies Dictionary

package/src/components/menu/PageSelector.tsx

@@ -8,7 +8,7 @@ import { styled } from 'styled-components'
 import { ListAction, SelectionList } from '../SelectionList'
 import { MENU_CONTENT_PADDING as PADDING } from './constants'
 import { Selector } from './types'
-import { useCheckTextOverflow } from './useCheckTextOverflow'
+import { useCheckTextOverflow } from './use-check-text-overflow'
 
 const SelectorBox = styled.div`
   position: relative;

package/src/components/menu/types.ts

@@ -76,12 +76,20 @@ export interface MenuSection extends Action {
   customContent?: ReactNode,
   active?: boolean,
   onOpen?: () => void,
+  className?: string,
 }
 
 interface BaseMenuProps {
   sections?: MenuSection[],
   compact?: boolean,
   customContent?: ReactNode,
+  settings?: {
+    show?: boolean,
+    onClick?: () => void,
+    href?: string,
+    active?: boolean,
+    className?: string,
+  },
 }
 
 export interface MenuPropsWithStaticContent extends BaseMenuProps {

package/src/components/menu/{useCheckTextOverflow.tsx → use-check-text-overflow.tsx}

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react'
 
 export function useCheckTextOverflow() {
   const [overflow, setOverflow] = useState<boolean>(false)
@@ -23,4 +23,4 @@ export function useCheckTextOverflow() {
   }, [ref.current])
 
   return { overflow, ref }
-}
+}

package/src/components/menu/use-keyboard-controls.tsx

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+interface Props {
+  onHide?: () => void,
+  visible: boolean,
+  querySelectors: string,
+  onPressEscape?: () => void,
+}
+
+export function useKeyboardControls({ onHide, visible, querySelectors, onPressEscape }: Props) {
+  const wrapper = useRef<HTMLDivElement>(null)
+
+  const onRemoveListeners = () =>{
+    document.removeEventListener('keydown', keyboardControls)
+    document.removeEventListener('click', hide)
+  }
+
+  const keyboardControls = useCallback((event: KeyboardEvent) => {
+    const target = event?.target as HTMLElement | null
+
+    function getSelectableAnchors() {
+      return wrapper.current?.querySelectorAll(querySelectors) ?? []
+    }
+
+    function handleArrows(key = event.key) {
+      
+      const anchors = getSelectableAnchors()
+      let i = 0
+      while (i < anchors.length && document.activeElement !== anchors[i]) i++
+      const next: any = key === 'ArrowDown' ? (anchors[i + 1] ?? anchors[0]) : (anchors[i - 1] ?? anchors[anchors.length - 1])
+      next?.focus?.()
+    }
+      
+    const handlers: Record<string, (() => void) | undefined> = {
+      Escape: () => {
+        onPressEscape?.()
+        onHide?.()
+        onRemoveListeners()
+      },
+      Enter: () => {
+        target?.click()
+      },
+      Tab: () => {
+        const anchors = getSelectableAnchors()
+        if (document.activeElement === anchors[anchors.length - 1]) onHide?.()
+        else {
+          handleArrows('ArrowDown')
+          event.preventDefault()
+        }
+      },
+      ArrowUp: () => {
+        handleArrows()
+      },
+      ArrowDown: () => {
+        handleArrows()
+      },
+    }
+
+    handlers[event.key]?.()
+  }, [onPressEscape, visible])
+
+  const hide = useCallback((event: Event) => {
+    const target = (event.target as HTMLElement | null)
+    // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+    const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target)
+    const isAction = target?.classList?.contains('action') || !!target?.closest('.action')
+    if (!isClickInsideSelectionList || isAction) onHide?.()
+  }, [])
+
+  useEffect(() => {
+    if (visible) {
+      document.addEventListener('keydown', keyboardControls)
+      document.addEventListener('keydown', keyboardControls)
+      if (onHide) setTimeout(() => document.addEventListener('click', hide), 50)
+    }
+    else {
+      onRemoveListeners() 
+    }
+  
+    return () => {
+      // Remove the event listener
+      document.removeEventListener('keydown', keyboardControls)
+      document.removeEventListener('click', hide)
+    }
+  }, [visible, keyboardControls])
+
+  return wrapper
+}

package/src/layout.css

@@ -39,7 +39,7 @@ body {
 
 #layout {
   --header-height: 56px;
-  --menu-sections-width: 87px;
+  --menu-sections-width: 135px;
   --menu-content-width: 233px;
   --menu-item-height: 74px;
   --modal-animation-duration: 0.3s;
@@ -50,7 +50,7 @@ body {
 }
 
 #layout.menu-compact {
-  --menu-sections-width: 56px;
+  --menu-sections-width: 135px;
   --menu-item-height: 56px;
 }
 
@@ -147,8 +147,8 @@ body {
   position: relative;
 }
 
-#layout.menu-compact .section-label {
-  display: none;
+#menuSections .sections-footer {
+  padding: 16px;
 }
 
 #menuSections .toggle,
@@ -161,7 +161,7 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   transition: background-color 0.2s;
   cursor: pointer;
@@ -175,7 +175,6 @@ body {
   height: 24px;
   transform: scaleY(0);
   transition: transform ease-in 0.2s;
-  background-color: var(--primary-500);
   border-radius: 50%;
   left: 0;
 }
@@ -186,6 +185,7 @@ body {
 
 #menuSections > ul li.active a:before {
   transform: scaleY(1);
+  background-color: var(--primary-500);
 }
 
 #menuSections .toggle:hover,
@@ -195,6 +195,11 @@ body {
   background: var(--light-500);
 }
 
+#menuSections > ul li:not(.active) a:hover:before {
+  transform: scaleY(1); 
+  background-color: var(--light-contrastText);
+}
+
 #menuSections .toggle i {
   position: relative;
 }
@@ -430,3 +435,19 @@ i {
   height: 0;
   overflow: hidden;
 }
+
+#menuSections .section-submenu {
+  position: relative;
+}
+
+#menuSections .section-submenu-icon {
+  opacity: 0;
+  position: absolute;
+  top: 27%;
+  right: 10px;
+  background-color: inherit;
+}
+
+#menuSections .section-submenu-icon:focus-visible {
+  opacity: 1; 
+}

package/dist/components/error/ErrorDescriptor.d.ts

@@ -1,12 +0,0 @@
-export interface ErrorDescription {
-    code?: number;
-    message?: string;
-    debug?: boolean;
-}
-export type DescriptionFn = (error: any) => ErrorDescription;
-export declare class ErrorDescriptor {
-    private static descriptionFunction;
-    static setDescriptionFunction(fn: DescriptionFn): void;
-    static describe(error: any): ErrorDescription;
-}
-//# sourceMappingURL=ErrorDescriptor.d.ts.map

package/dist/components/error/ErrorDescriptor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorDescriptor.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorDescriptor.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,gBAAgB,CAAA;AAE5D,qBAAa,eAAe;IAC1B,OAAO,CAAC,MAAM,CAAC,mBAAmB,CAEhC;IAEF,MAAM,CAAC,sBAAsB,CAAC,EAAE,EAAE,aAAa;IAI/C,MAAM,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG;CAG3B"}