@cerberus-design/react 0.6.1-next-79cd0cd → 0.6.1-next-fb37218

package/build/modern/components/TabList.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   TabList
-} from "../chunk-5GSXIYD3.js";
-import "../chunk-DQOYTLGB.js";
+} from "../chunk-X2JMXTBH.js";
+import "../chunk-7KJIZIAU.js";
 export {
   TabList
 };

package/build/modern/components/TabPanel.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   TabPanel
-} from "../chunk-YJCWUN33.js";
+} from "../chunk-67S42J4B.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-DQOYTLGB.js";
+import "../chunk-7KJIZIAU.js";
 export {
   TabPanel
 };

package/build/modern/context/tabs.js

@@ -3,7 +3,7 @@ import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "../chunk-DQOYTLGB.js";
+} from "../chunk-7KJIZIAU.js";
 export {
   Tabs,
   TabsContext,

package/build/modern/index.js

@@ -3,13 +3,13 @@ import {
 } from "./chunk-WE3JNSNO.js";
 import {
   Tab
-} from "./chunk-SUP7U42W.js";
+} from "./chunk-HBEEHHON.js";
 import {
   TabList
-} from "./chunk-5GSXIYD3.js";
+} from "./chunk-X2JMXTBH.js";
 import {
   TabPanel
-} from "./chunk-YJCWUN33.js";
+} from "./chunk-67S42J4B.js";
 import {
   Tag
 } from "./chunk-SLIOCQBZ.js";
@@ -61,12 +61,12 @@ import {
 } from "./chunk-JF76VIL3.js";
 import {
   useTabsKeyboardNavigation
-} from "./chunk-S7HBD2A7.js";
+} from "./chunk-KFUXGX33.js";
 import {
   Tabs,
   TabsContext,
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 import {
   $cerberusIcons,
   defineIcons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.6.1-next-79cd0cd",
+  "version": "0.6.1-next-fb37218",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -22,7 +22,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.6.1-next-79cd0cd"
+    "@cerberus-design/styled-system": "0.6.1-next-fb37218"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Tab.tsx

@@ -7,14 +7,13 @@ import {
   type MouseEvent,
 } from 'react'
 import { useTabsContext } from '../context/tabs'
-import { css, cx } from '@cerberus/styled-system/css'
+import { cx } from '@cerberus/styled-system/css'
 import { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'
 
 /**
  * This module provides a Tab component.
  * @module
  */
-
 export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   value: string
 }
@@ -33,7 +32,7 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 export function Tab(props: TabProps) {
   const { value, ...nativeProps } = props
-  const { active, onTabUpdate } = useTabsContext()
+  const { active, onTabUpdate, styles } = useTabsContext()
   const [isPending, startTransition] = useTransition()
   const { ref } = useTabsKeyboardNavigation()
   const isActive = useMemo(() => active === value, [active, value])
@@ -51,7 +50,7 @@ export function Tab(props: TabProps) {
       aria-busy={isPending}
       aria-selected={isActive}
       id={value}
-      className={cx(nativeProps.className, btnStyles)}
+      className={cx(nativeProps.className, styles.tab)}
       onClick={handleClick}
       role="tab"
       ref={ref}
@@ -59,83 +58,3 @@ export function Tab(props: TabProps) {
     />
   )
 }
-
-const btnStyles = css({
-  alignItems: 'center',
-  display: 'inline-flex',
-  borderTopLeftRadius: 'md',
-  borderTopRightRadius: 'md',
-  fontSize: 'sm',
-  fontWeight: '600',
-  gap: '2',
-  h: '2.75rem',
-  justifyContent: 'center',
-  position: 'relative',
-  pxi: '4',
-  zIndex: 'base',
-  _motionSafe: {
-    transition: 'all 200ms ease-in-out',
-    _before: {
-      transitionProperty: 'height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-in-out',
-    },
-    _after: {
-      transitionProperty: 'height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-in-out',
-    },
-  },
-  _before: {
-    bgColor: 'action.border.initial',
-    bottom: '0',
-    content: '""',
-    h: '0',
-    position: 'absolute',
-    left: '0',
-    right: '0',
-    w: 'full',
-    willChange: 'height',
-    zIndex: 'decorator',
-  },
-  _after: {
-    borderTopLeftRadius: 'md',
-    borderTopRightRadius: 'md',
-    bottom: '0',
-    bgColor: 'neutral.surface.100',
-    content: '""',
-    left: '0',
-    position: 'absolute',
-    right: '0',
-    h: '0',
-    w: 'full',
-    willChange: 'height',
-    zIndex: '-1',
-  },
-  _hover: {
-    _after: {
-      h: 'full',
-    },
-  },
-  _focusVisible: {
-    boxShadow: 'none',
-    outline: '3px solid',
-    outlineColor: 'action.border.focus',
-    outlineOffset: '2px',
-  },
-  _disabled: {
-    cursor: 'not-allowed',
-    opacity: '0.5',
-  },
-  _selected: {
-    color: 'action.text.200',
-    _before: {
-      h: '3px',
-    },
-    _hover: {
-      _after: {
-        h: '0',
-      },
-    },
-  },
-})

package/src/components/TabList.tsx

@@ -27,7 +27,7 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement> {
  */
 export function TabList(props: PropsWithChildren<TabListProps>) {
   const { description, ...nativeProps } = props
-  const { id } = useTabsContext()
+  const { id, styles } = useTabsContext()
 
   return (
     <div
@@ -36,11 +36,9 @@ export function TabList(props: PropsWithChildren<TabListProps>) {
       className={cx(
         nativeProps.className,
         hstack({
-          borderBottom: '1px solid',
-          borderBottomColor: 'action.border.100',
           gap: '0',
-          w: 'full',
         }),
+        styles.tabList,
       )}
       id={id ?? nativeProps.id}
     />

package/src/components/TabPanel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { css, cx } from '@cerberus/styled-system/css'
+import { cx } from '@cerberus/styled-system/css'
 import { useMemo, type HTMLAttributes } from 'react'
 import { useTabsContext } from '../context/tabs'
 import { Show } from './Show'
@@ -26,7 +26,7 @@ export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
  */
 export function TabPanel(props: TabPanelProps) {
   const { tab, ...nativeProps } = props
-  const { active } = useTabsContext()
+  const { active, styles } = useTabsContext()
   const isActive = useMemo(() => active === tab, [active, tab])
 
   return (
@@ -35,18 +35,7 @@ export function TabPanel(props: TabPanelProps) {
         {...nativeProps}
         {...(isActive && { tabIndex: 0 })}
         aria-labelledby={tab}
-        className={cx(
-          nativeProps.className,
-          css({
-            rounded: 'md',
-            _focusVisible: {
-              boxShadow: 'none',
-              outline: '3px solid',
-              outlineColor: 'action.border.focus',
-              outlineOffset: '2px',
-            },
-          }),
-        )}
+        className={cx(nativeProps.className, styles.tabPanel)}
         id={`panel:${tab}`}
         role="tabpanel"
       />

package/src/context/tabs.tsx

@@ -1,5 +1,10 @@
 'use client'
 
+import {
+  tabs,
+  type TabsVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import type { Pretty } from '@cerberus-design/styled-system/types'
 import {
   createContext,
   useContext,
@@ -20,6 +25,7 @@ export interface TabsContextValue {
   tabs: MutableRefObject<HTMLButtonElement[]>
   id: string
   active: string
+  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>
   onTabUpdate: (active: string) => void
 }
 
@@ -33,6 +39,7 @@ export interface TabsProps {
 
 /**
  * The Tabs component provides a context to manage tab state.
+ * @param id - the id of the tabs component,
  * @param active - the default active tab id,
  * @param cache - whether to cache the active tab state in local storage
  * @example
@@ -49,22 +56,25 @@ export interface TabsProps {
  * </Tabs>
  * ```
  */
-export function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {
-  const { cache, active, id } = props
+export function Tabs(
+  props: PropsWithChildren<TabsProps & TabsVariantProps>,
+): JSX.Element {
+  const { cache, active, id, palette } = props
   const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))
-  const tabs = useRef<HTMLButtonElement[]>([])
+  const tabsList = useRef<HTMLButtonElement[]>([])
   const uuid = useMemo(() => {
     return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'
   }, [id])
 
   const value = useMemo(
     () => ({
-      tabs,
+      tabs: tabsList,
       id: uuid,
       active: activeTab,
+      styles: tabs({ palette }),
       onTabUpdate: setActiveTab,
     }),
-    [activeTab, setActiveTab, uuid, tabs],
+    [activeTab, setActiveTab, palette, uuid, tabsList],
   )
 
   // Get the active tab from local storage

package/build/legacy/chunk-DQOYTLGB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {\n  const { cache, active, id } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabs = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs,\n      id: uuid,\n      active: activeTab,\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, uuid, tabs],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AA4EH;AA9DG,IAAM,cAAc,cAAuC,IAAI;AA0B/D,SAAS,KAAK,OAAkD;AACrE,QAAM,EAAE,OAAO,QAAQ,GAAG,IAAI;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,OAAO,OAA4B,CAAC,CAAC;AAC3C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,MAAM,IAAI;AAAA,EACtC;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/legacy/chunk-YA2UV2AB.js

@@ -1,126 +0,0 @@
-import {
-  useTabsKeyboardNavigation
-} from "./chunk-S7HBD2A7.js";
-import {
-  useTabsContext
-} from "./chunk-DQOYTLGB.js";
-
-// src/components/Tab.tsx
-import {
-  useMemo,
-  useTransition
-} from "react";
-import { css, cx } from "@cerberus/styled-system/css";
-import { jsx } from "react/jsx-runtime";
-function Tab(props) {
-  const { value, ...nativeProps } = props;
-  const { active, onTabUpdate } = useTabsContext();
-  const [isPending, startTransition] = useTransition();
-  const { ref } = useTabsKeyboardNavigation();
-  const isActive = useMemo(() => active === value, [active, value]);
-  function handleClick(e) {
-    var _a;
-    (_a = props.onClick) == null ? void 0 : _a.call(props, e);
-    startTransition(() => onTabUpdate(e.currentTarget.value));
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": `panel:${value}`,
-      "aria-busy": isPending,
-      "aria-selected": isActive,
-      id: value,
-      className: cx(nativeProps.className, btnStyles),
-      onClick: handleClick,
-      role: "tab",
-      ref,
-      value
-    }
-  );
-}
-var btnStyles = css({
-  alignItems: "center",
-  display: "inline-flex",
-  borderTopLeftRadius: "md",
-  borderTopRightRadius: "md",
-  fontSize: "sm",
-  fontWeight: "600",
-  gap: "2",
-  h: "2.75rem",
-  justifyContent: "center",
-  position: "relative",
-  pxi: "4",
-  zIndex: "base",
-  _motionSafe: {
-    transition: "all 200ms ease-in-out",
-    _before: {
-      transitionProperty: "height",
-      transitionDuration: "200ms",
-      transitionTimingFunction: "ease-in-out"
-    },
-    _after: {
-      transitionProperty: "height",
-      transitionDuration: "200ms",
-      transitionTimingFunction: "ease-in-out"
-    }
-  },
-  _before: {
-    bgColor: "action.border.initial",
-    bottom: "0",
-    content: '""',
-    h: "0",
-    position: "absolute",
-    left: "0",
-    right: "0",
-    w: "full",
-    willChange: "height",
-    zIndex: "decorator"
-  },
-  _after: {
-    borderTopLeftRadius: "md",
-    borderTopRightRadius: "md",
-    bottom: "0",
-    bgColor: "neutral.surface.100",
-    content: '""',
-    left: "0",
-    position: "absolute",
-    right: "0",
-    h: "0",
-    w: "full",
-    willChange: "height",
-    zIndex: "-1"
-  },
-  _hover: {
-    _after: {
-      h: "full"
-    }
-  },
-  _focusVisible: {
-    boxShadow: "none",
-    outline: "3px solid",
-    outlineColor: "action.border.focus",
-    outlineOffset: "2px"
-  },
-  _disabled: {
-    cursor: "not-allowed",
-    opacity: "0.5"
-  },
-  _selected: {
-    color: "action.text.200",
-    _before: {
-      h: "3px"
-    },
-    _hover: {
-      _after: {
-        h: "0"
-      }
-    }
-  }
-});
-
-export {
-  Tab
-};
-//# sourceMappingURL=chunk-YA2UV2AB.js.map

package/build/legacy/chunk-YA2UV2AB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string\n}\n\n/**\n * The Tab component provides a tab element to be used in a TabList.\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)\n * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <Tab value=\"overview\">\n *  Overview\n * </Tab>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { value, ...nativeProps } = props\n  const { active, onTabUpdate } = useTabsContext()\n  const [isPending, startTransition] = useTransition()\n  const { ref } = useTabsKeyboardNavigation()\n  const isActive = useMemo(() => active === value, [active, value])\n\n  function handleClick(e: MouseEvent<HTMLButtonElement>) {\n    props.onClick?.(e)\n    startTransition(() => onTabUpdate(e.currentTarget.value))\n  }\n\n  return (\n    <button\n      {...nativeProps}\n      {...(!isActive && { tabIndex: -1 })}\n      aria-controls={`panel:${value}`}\n      aria-busy={isPending}\n      aria-selected={isActive}\n      id={value}\n      className={cx(nativeProps.className, btnStyles)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n\nconst btnStyles = css({\n  alignItems: 'center',\n  display: 'inline-flex',\n  borderTopLeftRadius: 'md',\n  borderTopRightRadius: 'md',\n  fontSize: 'sm',\n  fontWeight: '600',\n  gap: '2',\n  h: '2.75rem',\n  justifyContent: 'center',\n  position: 'relative',\n  pxi: '4',\n  zIndex: 'base',\n  _motionSafe: {\n    transition: 'all 200ms ease-in-out',\n    _before: {\n      transitionProperty: 'height',\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'ease-in-out',\n    },\n    _after: {\n      transitionProperty: 'height',\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'ease-in-out',\n    },\n  },\n  _before: {\n    bgColor: 'action.border.initial',\n    bottom: '0',\n    content: '\"\"',\n    h: '0',\n    position: 'absolute',\n    left: '0',\n    right: '0',\n    w: 'full',\n    willChange: 'height',\n    zIndex: 'decorator',\n  },\n  _after: {\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    bottom: '0',\n    bgColor: 'neutral.surface.100',\n    content: '\"\"',\n    left: '0',\n    position: 'absolute',\n    right: '0',\n    h: '0',\n    w: 'full',\n    willChange: 'height',\n    zIndex: '-1',\n  },\n  _hover: {\n    _after: {\n      h: 'full',\n    },\n  },\n  _focusVisible: {\n    boxShadow: 'none',\n    outline: '3px solid',\n    outlineColor: 'action.border.focus',\n    outlineOffset: '2px',\n  },\n  _disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.5',\n  },\n  _selected: {\n    color: 'action.text.200',\n    _before: {\n      h: '3px',\n    },\n    _hover: {\n      _after: {\n        h: '0',\n      },\n    },\n  },\n})\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,KAAK,UAAU;AAqCpB;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AAxCzD;AAyCI,gBAAM,YAAN,+BAAgB;AAChB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/legacy/chunk-YJCWUN33.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { Show } from './Show'\n\n/**\n * This module provides a TabPanel component.\n * @module\n */\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <TabPanel tab=\"overview\">\n *   Overview content\n * </TabPanel>\n * ```\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { tab, ...nativeProps } = props\n  const { active } = useTabsContext()\n  const isActive = useMemo(() => active === tab, [active, tab])\n\n  return (\n    <Show when={isActive}>\n      <div\n        {...nativeProps}\n        {...(isActive && { tabIndex: 0 })}\n        aria-labelledby={tab}\n        className={cx(\n          nativeProps.className,\n          css({\n            rounded: 'md',\n            _focusVisible: {\n              boxShadow: 'none',\n              outline: '3px solid',\n              outlineColor: 'action.border.focus',\n              outlineOffset: '2px',\n            },\n          }),\n        )}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF,SAAS;AAAA,UACT,eAAe;AAAA,YACb,WAAW;AAAA,YACX,SAAS;AAAA,YACT,cAAc;AAAA,YACd,eAAe;AAAA,UACjB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/modern/chunk-DQOYTLGB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module\n */\n\nexport interface TabsContextValue {\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  id: string\n  active: string\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  id?: string\n  active?: string\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(props: PropsWithChildren<TabsProps>): JSX.Element {\n  const { cache, active, id } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabs = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs,\n      id: uuid,\n      active: activeTab,\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, uuid, tabs],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AA4EH;AA9DG,IAAM,cAAc,cAAuC,IAAI;AA0B/D,SAAS,KAAK,OAAkD;AACrE,QAAM,EAAE,OAAO,QAAQ,GAAG,IAAI;AAC9B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,OAAO,OAA4B,CAAC,CAAC;AAC3C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,MAAM,IAAI;AAAA,EACtC;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-SUP7U42W.js

@@ -1,125 +0,0 @@
-import {
-  useTabsKeyboardNavigation
-} from "./chunk-S7HBD2A7.js";
-import {
-  useTabsContext
-} from "./chunk-DQOYTLGB.js";
-
-// src/components/Tab.tsx
-import {
-  useMemo,
-  useTransition
-} from "react";
-import { css, cx } from "@cerberus/styled-system/css";
-import { jsx } from "react/jsx-runtime";
-function Tab(props) {
-  const { value, ...nativeProps } = props;
-  const { active, onTabUpdate } = useTabsContext();
-  const [isPending, startTransition] = useTransition();
-  const { ref } = useTabsKeyboardNavigation();
-  const isActive = useMemo(() => active === value, [active, value]);
-  function handleClick(e) {
-    props.onClick?.(e);
-    startTransition(() => onTabUpdate(e.currentTarget.value));
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...nativeProps,
-      ...!isActive && { tabIndex: -1 },
-      "aria-controls": `panel:${value}`,
-      "aria-busy": isPending,
-      "aria-selected": isActive,
-      id: value,
-      className: cx(nativeProps.className, btnStyles),
-      onClick: handleClick,
-      role: "tab",
-      ref,
-      value
-    }
-  );
-}
-var btnStyles = css({
-  alignItems: "center",
-  display: "inline-flex",
-  borderTopLeftRadius: "md",
-  borderTopRightRadius: "md",
-  fontSize: "sm",
-  fontWeight: "600",
-  gap: "2",
-  h: "2.75rem",
-  justifyContent: "center",
-  position: "relative",
-  pxi: "4",
-  zIndex: "base",
-  _motionSafe: {
-    transition: "all 200ms ease-in-out",
-    _before: {
-      transitionProperty: "height",
-      transitionDuration: "200ms",
-      transitionTimingFunction: "ease-in-out"
-    },
-    _after: {
-      transitionProperty: "height",
-      transitionDuration: "200ms",
-      transitionTimingFunction: "ease-in-out"
-    }
-  },
-  _before: {
-    bgColor: "action.border.initial",
-    bottom: "0",
-    content: '""',
-    h: "0",
-    position: "absolute",
-    left: "0",
-    right: "0",
-    w: "full",
-    willChange: "height",
-    zIndex: "decorator"
-  },
-  _after: {
-    borderTopLeftRadius: "md",
-    borderTopRightRadius: "md",
-    bottom: "0",
-    bgColor: "neutral.surface.100",
-    content: '""',
-    left: "0",
-    position: "absolute",
-    right: "0",
-    h: "0",
-    w: "full",
-    willChange: "height",
-    zIndex: "-1"
-  },
-  _hover: {
-    _after: {
-      h: "full"
-    }
-  },
-  _focusVisible: {
-    boxShadow: "none",
-    outline: "3px solid",
-    outlineColor: "action.border.focus",
-    outlineOffset: "2px"
-  },
-  _disabled: {
-    cursor: "not-allowed",
-    opacity: "0.5"
-  },
-  _selected: {
-    color: "action.text.200",
-    _before: {
-      h: "3px"
-    },
-    _hover: {
-      _after: {
-        h: "0"
-      }
-    }
-  }
-});
-
-export {
-  Tab
-};
-//# sourceMappingURL=chunk-SUP7U42W.js.map

package/build/modern/chunk-SUP7U42W.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useTabsKeyboardNavigation } from '../aria-helpers/tabs.aria'\n\n/**\n * This module provides a Tab component.\n * @module\n */\n\nexport interface TabProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string\n}\n\n/**\n * The Tab component provides a tab element to be used in a TabList.\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [Tab docs](https://cerberus.digitalu.design/react/tabs)\n * @param value - the id of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <Tab value=\"overview\">\n *  Overview\n * </Tab>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { value, ...nativeProps } = props\n  const { active, onTabUpdate } = useTabsContext()\n  const [isPending, startTransition] = useTransition()\n  const { ref } = useTabsKeyboardNavigation()\n  const isActive = useMemo(() => active === value, [active, value])\n\n  function handleClick(e: MouseEvent<HTMLButtonElement>) {\n    props.onClick?.(e)\n    startTransition(() => onTabUpdate(e.currentTarget.value))\n  }\n\n  return (\n    <button\n      {...nativeProps}\n      {...(!isActive && { tabIndex: -1 })}\n      aria-controls={`panel:${value}`}\n      aria-busy={isPending}\n      aria-selected={isActive}\n      id={value}\n      className={cx(nativeProps.className, btnStyles)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n\nconst btnStyles = css({\n  alignItems: 'center',\n  display: 'inline-flex',\n  borderTopLeftRadius: 'md',\n  borderTopRightRadius: 'md',\n  fontSize: 'sm',\n  fontWeight: '600',\n  gap: '2',\n  h: '2.75rem',\n  justifyContent: 'center',\n  position: 'relative',\n  pxi: '4',\n  zIndex: 'base',\n  _motionSafe: {\n    transition: 'all 200ms ease-in-out',\n    _before: {\n      transitionProperty: 'height',\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'ease-in-out',\n    },\n    _after: {\n      transitionProperty: 'height',\n      transitionDuration: '200ms',\n      transitionTimingFunction: 'ease-in-out',\n    },\n  },\n  _before: {\n    bgColor: 'action.border.initial',\n    bottom: '0',\n    content: '\"\"',\n    h: '0',\n    position: 'absolute',\n    left: '0',\n    right: '0',\n    w: 'full',\n    willChange: 'height',\n    zIndex: 'decorator',\n  },\n  _after: {\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    bottom: '0',\n    bgColor: 'neutral.surface.100',\n    content: '\"\"',\n    left: '0',\n    position: 'absolute',\n    right: '0',\n    h: '0',\n    w: 'full',\n    willChange: 'height',\n    zIndex: '-1',\n  },\n  _hover: {\n    _after: {\n      h: 'full',\n    },\n  },\n  _focusVisible: {\n    boxShadow: 'none',\n    outline: '3px solid',\n    outlineColor: 'action.border.focus',\n    outlineOffset: '2px',\n  },\n  _disabled: {\n    cursor: 'not-allowed',\n    opacity: '0.5',\n  },\n  _selected: {\n    color: 'action.text.200',\n    _before: {\n      h: '3px',\n    },\n    _hover: {\n      _after: {\n        h: '0',\n      },\n    },\n  },\n})\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,KAAK,UAAU;AAqCpB;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,YAAY,IAAI,eAAe;AAC/C,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AACrD,UAAM,UAAU,CAAC;AACjB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,SAAS;AAAA,MAC9C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,YAAY,IAAI;AAAA,EACpB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,GAAG;AAAA,EACH,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,MACP,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,IACA,QAAQ;AAAA,MACN,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG;AAAA,IACH,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,QAAQ;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,MACN,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/build/modern/chunk-YJCWUN33.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/TabPanel.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { Show } from './Show'\n\n/**\n * This module provides a TabPanel component.\n * @module\n */\n\nexport interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs provider.\n * @param tab - the value of the tab that will be tracked as the active tab and used for aria attributes\n * @example\n * ```tsx\n * <TabPanel tab=\"overview\">\n *   Overview content\n * </TabPanel>\n * ```\n */\nexport function TabPanel(props: TabPanelProps) {\n  const { tab, ...nativeProps } = props\n  const { active } = useTabsContext()\n  const isActive = useMemo(() => active === tab, [active, tab])\n\n  return (\n    <Show when={isActive}>\n      <div\n        {...nativeProps}\n        {...(isActive && { tabIndex: 0 })}\n        aria-labelledby={tab}\n        className={cx(\n          nativeProps.className,\n          css({\n            rounded: 'md',\n            _focusVisible: {\n              boxShadow: 'none',\n              outline: '3px solid',\n              outlineColor: 'action.border.focus',\n              outlineOffset: '2px',\n            },\n          }),\n        )}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF,SAAS;AAAA,UACT,eAAe;AAAA,YACb,WAAW;AAAA,YACX,SAAS;AAAA,YACT,cAAc;AAAA,YACd,eAAe;AAAA,UACjB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}