@cypress-design/react-docmenu 0.3.1 → 0.4.1

package/_DocGroup.tsx

@@ -1,122 +1,262 @@
 import * as React from 'react'
 import { IconChevronDownSmall } from '@cypress-design/react-icon'
 import clsx from 'clsx'
-import { NavGroup, classes } from '@cypress-design/constants-docmenu'
-import { DocLink } from './_DocLink'
+import {
+  type NavGroup,
+  type NavItemLink,
+  classes,
+} from '@cypress-design/constants-docmenu'
+import {
+  DocLink,
+  type DocLinkForward,
+  type LinkComponentType,
+} from './_DocLink'
 
 export interface DocGroupProps {
   group: NavGroup
+  activePath: string
   collapsible: boolean
+  onActivePosition: (opts: { top: number; height: number }) => void
+  updateMarkerPosition?: () => void
   depth?: number
-  setHeight?: (height: number) => void
+  LinkComponent?: LinkComponentType
+  hideMarker: () => void
 }
 
-export const DocGroup: React.FC<DocGroupProps> = ({
-  group,
-  collapsible,
-  depth = 0,
-  setHeight,
-}) => {
-  const [open, setOpen] = React.useState(depth === 0)
-  const [itemsHeights, setItemsHeights] = React.useState<number[]>(
-    Array(group.items.length).fill(1),
-  )
-
-  React.useEffect(() => {
-    setHeight?.(open ? itemsHeights.reduce((a, b) => a + b, 1) : 1)
-  }, [itemsHeights, open, setHeight])
-
-  const [activeTop, setActiveTop] = React.useState(0)
-
-  React.useEffect(() => {
-    const activeItem = group.items.findIndex(
-      (item) => 'href' in item && item.active,
+export interface DocGroupForward {
+  reTriggerSetActiveGroup: () => void
+}
+
+export const DocGroup = React.forwardRef<DocGroupForward, DocGroupProps>(
+  (
+    {
+      group,
+      activePath,
+      collapsible,
+      depth = 0,
+      onActivePosition,
+      updateMarkerPosition,
+      LinkComponent = 'a',
+      hideMarker,
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = React.useState(group.collapsed !== true)
+    const $groupElements = React.useRef<DocGroupElementsForward>(null)
+
+    function toggleMenu(open: boolean) {
+      if (!collapsible) return
+      setOpen(open)
+    }
+
+    const hasActiveItemRecursively = React.useCallback(
+      (items = group.items): boolean => {
+        return items.some((item) => {
+          if ('items' in item) {
+            return hasActiveItemRecursively(item.items)
+          }
+          return item.href === activePath
+        })
+      },
+      [group.items, activePath],
+    )
+
+    const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
+
+    const setActivePosition = React.useCallback(
+      ({ top, height }: { top: number; height: number }) => {
+        if (open) {
+          onActivePosition({ top, height })
+        }
+      },
+      [onActivePosition, open],
     )
-    if (activeItem >= 0) {
-      setActiveTop(
-        itemsHeights.slice(0, activeItem).reduce((a, b) => a + b, 1) * 44,
-      )
+
+    function reTriggerSetActiveGroup() {
+      $groupElements.current?.reTriggerSetActiveGroup()
     }
-  }, [itemsHeights, group.items])
-
-  function toggleMenu(open: boolean) {
-    if (!collapsible) return
-    setOpen(open)
-  }
-
-  function onSetHeight(index: number, height: number) {
-    setItemsHeights((prev) => {
-      const newHeights = [...prev]
-      newHeights[index] = height
-      return newHeights
-    })
-  }
-
-  const Head = collapsible ? 'button' : group.href ? 'a' : 'div'
-
-  return (
-    <>
-      <Head
-        onClick={() => toggleMenu(!open)}
-        href={group.href}
-        className={clsx(classes.button, {
-          'text-indigo-500': group.active,
-          [classes.topButton]: depth === 0,
-          [classes.leafButton]: depth,
-        })}
-      >
-        {collapsible ? (
-          <IconChevronDownSmall
-            stroke-color="gray-400"
-            size={depth ? '8' : '16'}
-            className={clsx('absolute transform transition-transform left-0', {
-              'rotate-0': open,
-              '-rotate-90': !open,
-              'ml-[16px]': depth,
-            })}
-          />
-        ) : null}
-        {group.text}
-      </Head>
-      {collapsible &&
-      depth >= 0 &&
-      open &&
-      group.items.some((item) => 'href' in item && item.active) ? (
-        <div
-          className="absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[4px]"
-          style={{
-            top: `${activeTop}px`,
-            left: `${depth === 0 ? 0.5 : -(depth * 8) - 0.5}px`,
-          }}
+
+    React.useEffect(() => {
+      if (hasActiveItemRecursively()) {
+        if (open) {
+          reTriggerSetActiveGroup()
+        } else {
+          hideMarker()
+        }
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [open, updateMarkerPosition, hideMarker, hasActiveItemRecursively])
+
+    React.useImperativeHandle(ref, () => ({
+      reTriggerSetActiveGroup,
+    }))
+
+    const onUpdateMarkerPosition = React.useCallback(() => {
+      if (hasActiveItemRecursively()) {
+        reTriggerSetActiveGroup()
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [hasActiveItemRecursively, updateMarkerPosition])
+
+    return (
+      <>
+        <Head
+          onClick={() => toggleMenu(!open)}
+          href={group.href}
+          className={clsx(classes.button, {
+            [classes.topButton]: depth === 0,
+            [classes.leafButton]: depth,
+            'text-indigo-500': activePath === group.href,
+          })}
+        >
+          {collapsible ? (
+            <IconChevronDownSmall
+              stroke-color="gray-400"
+              size={depth ? '8' : '16'}
+              className={clsx(
+                'absolute transform transition-transform left-0',
+                {
+                  'rotate-0': open,
+                  '-rotate-90': !open,
+                  'ml-[16px]': depth,
+                },
+              )}
+            />
+          ) : null}
+          {group.label}
+        </Head>
+        <DocGroupElements
+          ref={$groupElements}
+          className={!open ? 'hidden' : undefined}
+          items={group.items}
+          activePath={activePath}
+          collapsible={collapsible}
+          depth={depth}
+          onActivePosition={setActivePosition}
+          updateMarkerPosition={onUpdateMarkerPosition}
+          LinkComponent={LinkComponent}
+          hideMarker={hideMarker}
         />
-      ) : null}
+      </>
+    )
+  },
+)
+
+export interface DocGroupElementsProps
+  extends React.HTMLAttributes<HTMLUListElement> {
+  items: (NavGroup | NavItemLink)[]
+  activePath: string
+  collapsible: boolean
+  onActivePosition: (opts: { top: number; height: number }) => void
+  updateMarkerPosition?: () => void
+  depth: number
+  LinkComponent: LinkComponentType
+  hideMarker: () => void
+  className: string | undefined
+}
+
+export interface DocGroupElementsForward {
+  reTriggerSetActiveGroup: () => void
+}
+
+export const DocGroupElements = React.forwardRef<
+  DocGroupElementsForward,
+  DocGroupElementsProps
+>(
+  (
+    {
+      items,
+      activePath,
+      collapsible,
+      depth = 0,
+      onActivePosition,
+      updateMarkerPosition,
+      LinkComponent,
+      hideMarker,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const $groups = React.useRef<DocGroupForward[]>([])
+    const $items = React.useRef<DocLinkForward[]>([])
+
+    const hasActiveItemRecursively = React.useCallback(
+      (localItems = items): boolean => {
+        return localItems.some((item) => {
+          if ('items' in item) {
+            return hasActiveItemRecursively(item.items)
+          }
+          return item.href === activePath
+        })
+      },
+      [items, activePath],
+    )
+
+    function reTriggerSetActiveGroup() {
+      $groups.current.forEach((group) => {
+        group?.reTriggerSetActiveGroup()
+      })
+      $items.current.forEach((item) => {
+        item?.setActiveMarkerPosition()
+      })
+    }
+
+    React.useImperativeHandle(ref, () => ({
+      reTriggerSetActiveGroup,
+    }))
+
+    const onUpdateMarkerPosition = React.useCallback(() => {
+      if (hasActiveItemRecursively()) {
+        reTriggerSetActiveGroup()
+      } else {
+        updateMarkerPosition?.()
+      }
+    }, [hasActiveItemRecursively, updateMarkerPosition])
+
+    return (
       <ul
-        className={clsx('ml-[8px] list-none p-0', {
+        {...rest}
+        className={clsx('list-none p-0', className, {
           'border-l border-gray-100': depth === 0 && collapsible,
-          hidden: !open,
+          'ml-[8px]': depth >= 0,
         })}
       >
-        {group.items.map((item, index) =>
+        {items.map((item, index) =>
           'items' in item ? (
             <li key={index} className="relative list-none p-0">
               <DocGroup
+                ref={(el: DocGroupForward) => {
+                  $groups.current[index] = el
+                }}
                 group={item}
+                activePath={activePath}
                 depth={depth + 1}
-                setHeight={(height) => onSetHeight(index, height)}
                 collapsible={collapsible}
+                LinkComponent={LinkComponent}
+                hideMarker={hideMarker}
+                onActivePosition={onActivePosition}
+                updateMarkerPosition={onUpdateMarkerPosition}
               />
             </li>
           ) : (
             <DocLink
+              ref={(el: DocLinkForward) => {
+                $items.current[index] = el
+              }}
               key={index}
               item={item}
+              active={item.href === activePath}
               collapsible={collapsible}
               depth={depth}
-              onActive={(top) => setActiveTop(top)}
+              onActive={onActivePosition}
+              LinkComponent={LinkComponent}
             />
           ),
         )}
       </ul>
-    </>
-  )
-}
+    )
+  },
+)

package/_DocLink.tsx

@@ -2,61 +2,81 @@ import * as React from 'react'
 import clsx from 'clsx'
 import { NavItemLink } from '@cypress-design/constants-docmenu'
 
+export type LinkComponentType = React.ElementType<{
+  href: string
+  className?: string
+  children?: React.ReactNode
+}>
+
 export interface DocLinkProps {
   item: NavItemLink
+  active: boolean
   collapsible: boolean
   depth?: number
-  onActive?: (top: number) => void
+  onActive?: (opts: { top: number; height: number }) => void
+  LinkComponent?: LinkComponentType
+}
+
+export interface DocLinkForward {
+  setActiveMarkerPosition: () => void
 }
 
-export const DocLink: React.FC<DocLinkProps> = ({
-  item,
-  collapsible,
-  depth = -1,
-  onActive,
-}) => {
-  const activeLIRef = React.useRef<HTMLLIElement>(null)
-
-  // on mount, if the item is active,
-  // send the top position to the parent
-  React.useEffect(() => {
-    if (item.active) {
-      onActive?.(activeLIRef?.current?.offsetTop || 0)
+export const DocLink = React.forwardRef<DocLinkForward, DocLinkProps>(
+  (
+    { item, active, collapsible, depth = -1, onActive, LinkComponent = 'a' },
+    ref,
+  ) => {
+    const activeLIRef = React.useRef<HTMLLIElement>(null)
+
+    // on mount, if the item is active,
+    // send the top position to the parent
+    React.useEffect(setActiveMarkerPosition, [onActive, active])
+
+    function setActiveMarkerPosition() {
+      if (active) {
+        const box = activeLIRef?.current?.getBoundingClientRect()
+        onActive?.({
+          top: box?.top || 0,
+          height: box?.height || 0,
+        })
+      }
     }
-    // supposed to happen only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return (
-    <li
-      ref={activeLIRef}
-      className={clsx('list-none p-0', {
-        'pl-[16px]': depth >= 0,
-      })}
-    >
-      <a
-        className={clsx('group relative inline-block pl-[24px]', {
-          'text-indigo-500': item.active,
-          'py-[8px] text-[16px] leading-[24px]': depth < 0,
-          'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+
+    React.useImperativeHandle(ref, () => ({
+      setActiveMarkerPosition,
+    }))
+
+    return (
+      <li
+        ref={activeLIRef}
+        className={clsx('list-none p-0', {
+          'pl-[16px]': depth >= 0,
         })}
-        href={item.href}
       >
-        {depth >= 0 ? (
-          <div
-            className={clsx(
-              'absolute w-[4px] z-10 top-[10%] h-[80%] rounded-full hidden',
-              {
-                'group-hover:block bg-gray-300': !item.active && collapsible,
-              },
-            )}
-            style={{
-              left: `-${18.5 + depth * 8}px`,
-            }}
-          />
-        ) : null}
-        {item.text}
-      </a>
-    </li>
-  )
-}
+        <LinkComponent
+          className={clsx('group relative inline-block pl-[24px]', {
+            'text-indigo-500': active,
+            'py-[8px] text-[16px] leading-[24px]': depth < 0,
+            'py-[12px] leading-[20px] text-[14px]': depth >= 0,
+          })}
+          href={item.href}
+        >
+          {depth >= 0 ? (
+            <div
+              className={clsx(
+                'absolute w-[4px] z-10 top-[4px] bottom-[4px] rounded-full hidden',
+                {
+                  'group-hover:block bg-gray-300': !active && collapsible,
+                },
+              )}
+              style={{
+                left: `-${18.5 + depth * 8}px`,
+              }}
+            />
+          ) : null}
+          {item.label}
+        </LinkComponent>
+      </li>
+    )
+  },
+)

package/dist/DocMenu.d.ts

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
+import type { LinkComponentType } from './_DocLink';
 export type NavItem = NavGroup | NavItemLink;
 export interface DocMenuProps extends React.HTMLAttributes<HTMLUListElement> {
     items: NavItem[];
+    activePath?: string;
     collapsible?: boolean;
+    LinkComponent?: LinkComponentType;
 }
 export declare const DocMenu: React.FC<DocMenuProps>;
 export default DocMenu;

package/dist/DocMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAKzE,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkB1C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"DocMenu.d.ts","sourceRoot":"./","sources":["DocMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AACzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAGnD,MAAM,MAAM,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAA;AAE5C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC1E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+C1C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/_DocGroup.d.ts

@@ -1,10 +1,39 @@
 import * as React from 'react';
-import { NavGroup } from '@cypress-design/constants-docmenu';
+import { type NavGroup, type NavItemLink } from '@cypress-design/constants-docmenu';
+import { type LinkComponentType } from './_DocLink';
 export interface DocGroupProps {
     group: NavGroup;
+    activePath: string;
     collapsible: boolean;
+    onActivePosition: (opts: {
+        top: number;
+        height: number;
+    }) => void;
+    updateMarkerPosition?: () => void;
     depth?: number;
-    setHeight?: (height: number) => void;
+    LinkComponent?: LinkComponentType;
+    hideMarker: () => void;
 }
-export declare const DocGroup: React.FC<DocGroupProps>;
+export interface DocGroupForward {
+    reTriggerSetActiveGroup: () => void;
+}
+export declare const DocGroup: React.ForwardRefExoticComponent<DocGroupProps & React.RefAttributes<DocGroupForward>>;
+export interface DocGroupElementsProps extends React.HTMLAttributes<HTMLUListElement> {
+    items: (NavGroup | NavItemLink)[];
+    activePath: string;
+    collapsible: boolean;
+    onActivePosition: (opts: {
+        top: number;
+        height: number;
+    }) => void;
+    updateMarkerPosition?: () => void;
+    depth: number;
+    LinkComponent: LinkComponentType;
+    hideMarker: () => void;
+    className: string | undefined;
+}
+export interface DocGroupElementsForward {
+    reTriggerSetActiveGroup: () => void;
+}
+export declare const DocGroupElements: React.ForwardRefExoticComponent<DocGroupElementsProps & React.RefAttributes<DocGroupElementsForward>>;
 //# sourceMappingURL=_DocGroup.d.ts.map

package/dist/_DocGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAGrE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4G5C,CAAA"}
+{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,QAAQ,uFAmHpB,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}

package/dist/_DocLink.d.ts

@@ -1,10 +1,23 @@
 import * as React from 'react';
 import { NavItemLink } from '@cypress-design/constants-docmenu';
+export type LinkComponentType = React.ElementType<{
+    href: string;
+    className?: string;
+    children?: React.ReactNode;
+}>;
 export interface DocLinkProps {
     item: NavItemLink;
+    active: boolean;
     collapsible: boolean;
     depth?: number;
-    onActive?: (top: number) => void;
+    onActive?: (opts: {
+        top: number;
+        height: number;
+    }) => void;
+    LinkComponent?: LinkComponentType;
 }
-export declare const DocLink: React.FC<DocLinkProps>;
+export interface DocLinkForward {
+    setActiveMarkerPosition: () => void;
+}
+export declare const DocLink: React.ForwardRefExoticComponent<DocLinkProps & React.RefAttributes<DocLinkForward>>;
 //# sourceMappingURL=_DocLink.d.ts.map

package/dist/_DocLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkD1C,CAAA"}
+{"version":3,"file":"_DocLink.d.ts","sourceRoot":"./","sources":["_DocLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,WAAW,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC1D,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,cAAc;IAC7B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAED,eAAO,MAAM,OAAO,qFA0DnB,CAAA"}