@cerberus-design/react 0.9.2 → 0.10.0

package/build/legacy/components/NavMenuLink.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAwB;;;ACCxB,mBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADJU;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,eAAW;AAAA,gBACT,YAAY;AAAA,oBACZ,gBAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,4CAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * The NavMenuLink component is a link element that is used within the NavMenu.\n * @see https://cerberus.digitalu.design/react/nav-menu\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAwB;;;ACCxB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADOU;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,eAAW;AAAA,gBACT,YAAY;AAAA,oBACZ,gBAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,4CAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/NavMenuList.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n  left: string\n  right: string\n  top: string\n  bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  id: string\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *  <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  triggerRef: NavTriggerRef | null\n  menuRef: NavMenuRef | null\n  expanded: boolean\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAA6C;AAC7C,IAAAC,cAAmB;AACnB,sBAAuB;;;ACFvB,iBAAoB;AACpB,mBASO;AAmCD;AAvBN,IAAM,qBAAiB,4BAA0C,IAAI;AAkC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;AC9DA,IAAAC,gBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFqEM,IAAAC,sBAAA;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,oBAAgB,wBAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,gBAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n  /**\n   * The left position of the element.\n   */\n  left: string\n  /**\n   * The right position of the element.\n   */\n  right: string\n  /**\n   * The top position of the element.\n   */\n  top: string\n  /**\n   * The bottom position of the element.\n   */\n  bottom: string\n}\n\n/**\n * Returns the position of the NavMenuList based on the position prop.\n * @param position - The position of the NavMenuList.\n * @returns The position of the NavMenuList.\n */\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * The unique identifier for the NavMenuList. Required for accessibility.\n   */\n  id: string\n  /**\n   * The position of the NavMenuList.\n   * @type 'top' | 'right' | 'bottom' | 'left'\n   * @default 'bottom'\n   */\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * Provides the nav menu state for all the NavMenu family components.\n * @see https://cerberus.digitalu.design/react/nav-menu\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAA6C;AAC7C,IAAAC,cAAmB;AACnB,sBAAuB;;;ACFvB,iBAAoB;AACpB,mBASO;AAwDD;AA3BN,IAAM,qBAAiB,4BAA0C,IAAI;AA0C9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACvFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AF0FM,IAAAC,sBAAA;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,oBAAgB,wBAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,gBAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}

package/build/legacy/components/NavMenuTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n  createNavTriggerProps,\n  type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\nexport interface NavMenuTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonProps,\n    NavTriggerAriaValues {\n  as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n *   <NavMenuTrigger controls=\"nav-menu-list\">\n *     Menu\n *   </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n  const {\n    as,\n    palette,\n    usage,\n    shape,\n    controls,\n    expanded: propsExpanded,\n    onClick,\n    ...nativeProps\n  } = props\n  const { triggerRef, onToggle, expanded } = useNavMenuContext()\n  const ariaProps = createNavTriggerProps({\n    controls,\n    expanded: propsExpanded ?? expanded,\n  })\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) return onClick(e)\n      onToggle()\n    },\n    [onClick, onToggle],\n  )\n\n  return (\n    <Show\n      when={hasAs}\n      fallback={\n        <button\n          {...nativeProps}\n          {...ariaProps}\n          className={cx(\n            nativeProps.className,\n            button({\n              palette,\n              usage,\n              shape,\n            }),\n          )}\n          onClick={handleClick}\n          ref={triggerRef}\n        >\n          {props.children}\n        </button>\n      }\n    >\n      {hasAs && (\n        <AsSub\n          {...nativeProps}\n          {...ariaProps}\n          onClick={handleClick}\n          ref={triggerRef}\n        />\n      )}\n    </Show>\n  )\n}\n","export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  triggerRef: NavTriggerRef | null\n  menuRef: NavMenuRef | null\n  expanded: boolean\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAKO;AACP,IAAAC,cAAmB;AACnB,qBAAuB;;;ACChB,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;;;ACfA,iBAAoB;AACpB,mBASO;AAmCD;AAvBN,IAAM,qBAAiB,4BAA0C,IAAI;AAkC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;AC9DA,IAAAC,gBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AHyCQ,IAAAC,sBAAA;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,uBAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n  createNavTriggerProps,\n  type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ButtonProps,\n    NavTriggerAriaValues {\n  /**\n   * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n   * @default 'button'\n   * @example\n   * ```tsx\n   * <NavMenuTrigger as={IconButton} href=\"/home\" />\n   * ```\n   */\n  as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n *   <NavMenuTrigger controls=\"nav-menu-list\">\n *     Menu\n *   </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n  const {\n    as,\n    palette,\n    usage,\n    shape,\n    controls,\n    expanded: propsExpanded,\n    onClick,\n    ...nativeProps\n  } = props\n  const { triggerRef, onToggle, expanded } = useNavMenuContext()\n  const ariaProps = createNavTriggerProps({\n    controls,\n    expanded: propsExpanded ?? expanded,\n  })\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      if (onClick) return onClick(e)\n      onToggle()\n    },\n    [onClick, onToggle],\n  )\n\n  return (\n    <Show\n      when={hasAs}\n      fallback={\n        <button\n          {...nativeProps}\n          {...ariaProps}\n          className={cx(\n            nativeProps.className,\n            button({\n              palette,\n              usage,\n              shape,\n            }),\n          )}\n          onClick={handleClick}\n          ref={triggerRef}\n        >\n          {props.children}\n        </button>\n      }\n    >\n      {hasAs && (\n        <AsSub\n          {...nativeProps}\n          {...ariaProps}\n          onClick={handleClick}\n          ref={triggerRef}\n        />\n      )}\n    </Show>\n  )\n}\n","export interface NavTriggerAriaValues {\n  controls: string\n  expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n  ['aria-controls']: string\n  ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n  values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n  return {\n    ['aria-controls']: values.controls,\n    ['aria-expanded']: values.expanded ?? false,\n  }\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * Provides the nav menu state for all the NavMenu family components.\n * @see https://cerberus.digitalu.design/react/nav-menu\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAKO;AACP,IAAAC,cAAmB;AACnB,qBAAuB;;;ACChB,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;;;ACfA,iBAAoB;AACpB,mBASO;AAwDD;AA3BN,IAAM,qBAAiB,4BAA0C,IAAI;AA0C9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACvFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AH2CQ,IAAAC,sBAAA;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,uBAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}

package/build/legacy/components/Notification.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = props.palette || 'info'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key] as IconType\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  id: string\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n *  This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      role=\"alert\"\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <Close />\n      </button>\n    </dialog>\n  )\n}\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":"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","names":["import_icons","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = props.palette || 'info'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[key] as IconType\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  return (\n    <dialog\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n      role=\"alert\"\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <Close />\n      </button>\n    </dialog>\n  )\n}\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n"],"mappings":"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","names":["import_icons","import_jsx_runtime"]}

package/build/legacy/components/NotificationDescription.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,iBAAmB;AACnB,qBAGO;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,eAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/NotificationDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport interface BaseNotificationDescriptionProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AAuBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,eAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/build/legacy/components/NotificationHeading.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,iBAAmB;AACnB,qBAGO;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE,4CAAC,OAAE,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}
+{"version":3,"sources":["../../../src/components/NotificationHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport interface BaseNotificationHeadingProps\n  extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AAuBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE,4CAAC,OAAE,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}

package/build/legacy/components/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  container?: Element | DocumentFragment\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA6B;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,aAAO,+BAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}
+{"version":3,"sources":["../../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n  /**\n   * The root container to render the children into.\n   * @default document.body\n   */\n  container?: Element | DocumentFragment\n  /**\n   * An optional key to use for the Portal component.\n   */\n  key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  const container = props.container || document.body\n  return createPortal(props.children, container, props.key)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA6B;AAwBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,aAAO,+BAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/legacy/components/ProgressBar.cjs

@@ -41,7 +41,7 @@ function ProgressBar(props) {
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? 0 : nowClamped,
       className: (0, import_css.cx)(nativeProps.className, styles.root),
-      role: "meter",
+      role: "progressbar",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {

package/build/legacy/components/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  indeterminate?: never\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  indeterminate: true\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @param props - HTML div element attributes\n * @param props.now - The current value of the progress bar\n * @param props.indeterminate - Whether the progress bar is indeterminate\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"meter\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AAgDD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,aAAS,4BAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,eAAW,eAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n  progressBar,\n  type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: never\n  /**\n   * The current value of the progress bar.\n   */\n  now: number\n}\nexport type IndeterminateProgressBarProps = {\n  /**\n   * The state of the progress bar.\n   */\n  indeterminate?: true\n  /**\n   * The current value of the progress bar.\n   */\n  now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n  ProgressBarVariantProps &\n  (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n  const { indeterminate, size, usage, now, ...nativeProps } = props\n  const styles = progressBar({ size, usage })\n  const nowClamped = Math.min(100, Math.max(0, now || 0))\n  const width = {\n    width: indeterminate ? '50%' : `${nowClamped}%`,\n  }\n\n  return (\n    <div\n      {...nativeProps}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? 0 : nowClamped}\n      className={cx(nativeProps.className, styles.root)}\n      role=\"progressbar\"\n    >\n      <div\n        {...(indeterminate && { 'data-indeterminate': true })}\n        data-complete={nowClamped === 100}\n        className={styles.bar}\n        style={width}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AA0DD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,aAAS,4BAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,eAAW,eAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Radio.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Radio.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const { invalid, ...state } = useFieldContext()\n  const styles = radio({ size })\n\n  return (\n    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n      <input\n        {...nativeProps}\n        {...state}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;;;ACFtB,mBAKO;AAyBH;AAhBJ,IAAM,mBAAe,4BAAwC,IAAI;AAsB1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADtBI,IAAAA,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE,8CAAC,SAAI,eAAW,eAAG,aAAS,wBAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Radio.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * A unique identifier for the radio button. Required for accessibility.\n   */\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n *  <fieldset name=\"fruit\">\n *    <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n *     Option 1\n *    </Radio>\n *    <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n *     Option 2\n *    </Radio>\n *    <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n *     Option 3\n *    </Radio>\n *   </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const { invalid, ...state } = useFieldContext()\n  const styles = radio({ size })\n\n  return (\n    <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n      <input\n        {...nativeProps}\n        {...state}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;;;ACFtB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADnBI,IAAAA,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE,8CAAC,SAAI,eAAW,eAAG,aAAS,wBAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  'size'\n> &\n  SelectVariantProps & {\n    id: string\n    describedBy?: string\n  }\n\n/**\n * Select component\n * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }\n * @example\n * ```tsx\n * <Select describedby=\"help:fruit\" id=\"fruit\">\n *  <Option value=\"\">Choose option</Option>\n *  <Option value=\"one\">Option 1</Option>\n *  <Option value=\"two\">Option 2</Option>\n *  <Option value=\"three\">Option 3</Option>\n * </Select>\n * ```\n */\nexport function Select(props: SelectProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n  const styles = select({\n    size,\n  })\n\n  return (\n    <div className={styles.root}>\n      <select\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={styles.input}\n      />\n      <span\n        className={cx(\n          styles.iconStack,\n          hstack({\n            gap: '2',\n          }),\n        )}\n      >\n        <Show when={invalid}>\n          <span\n            {...(invalid && { 'data-invalid': true })}\n            className={styles.stateIcon}\n          >\n            <InvalidIcon />\n          </span>\n        </Show>\n        <span className={styles.arrowIcon}>\n          <SelectArrow />\n        </span>\n      </span>\n    </div>\n  )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n  return <option {...props} />\n}\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n  SelectHTMLAttributes<HTMLSelectElement>,\n  'size'\n> &\n  SelectVariantProps & {\n    /**\n     * The unique id of the select element. Required for accessibility.\n     */\n    id: string\n    /**\n     * The id of the FieldMessage that describes the select element.\n     */\n    describedBy?: string\n  }\n\n/**\n * Used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/select\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n *   <Select describedby=\"help:fruit\" id=\"fruit\">\n *    <Option value=\"\">Choose option</Option>\n *    <Option value=\"one\">Option 1</Option>\n *    <Option value=\"two\">Option 2</Option>\n *    <Option value=\"three\">Option 3</Option>\n *   </Select>\n * </Field>\n * ```\n */\nexport function Select(props: SelectProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n  const styles = select({\n    size,\n  })\n\n  return (\n    <div className={styles.root}>\n      <select\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={styles.input}\n      />\n      <span\n        className={cx(\n          styles.iconStack,\n          hstack({\n            gap: '2',\n          }),\n        )}\n      >\n        <Show when={invalid}>\n          <span\n            {...(invalid && { 'data-invalid': true })}\n            className={styles.stateIcon}\n          >\n            <InvalidIcon />\n          </span>\n        </Show>\n        <span className={styles.arrowIcon}>\n          <SelectArrow />\n        </span>\n      </span>\n    </div>\n  )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n  return <option {...props} />\n}\n","import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}

package/build/legacy/components/Show.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}
+{"version":3,"sources":["../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/legacy/components/Spinner.cjs

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Spinner.tsx
+var Spinner_exports = {};
+__export(Spinner_exports, {
+  Spinner: () => Spinner
+});
+module.exports = __toCommonJS(Spinner_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function Spinner(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      "aria-busy": "true",
+      role: "status",
+      xmlns: "http://www.w3.org/2000/svg",
+      height: props.size,
+      width: props.size,
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "path",
+              {
+                strokeDasharray: 16,
+                strokeDashoffset: 16,
+                d: "M12 3c4.97 0 9 4.03 9 9",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "animate",
+                    {
+                      fill: "freeze",
+                      attributeName: "stroke-dashoffset",
+                      dur: "0.15s",
+                      values: "16;0"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      dur: "0.75s",
+                      repeatCount: "indefinite",
+                      type: "rotate",
+                      values: "0 12 12;360 12 12"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                strokeDasharray: 64,
+                strokeDashoffset: 64,
+                strokeOpacity: 0.3,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.6s",
+                    values: "64;0"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spinner
+});
+//# sourceMappingURL=Spinner.cjs.map

package/build/legacy/components/Spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n  /**\n   * The size of the spinner\n   */\n  size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n *   <Show when={loading} fallback={<>Save</>}>\n *      Saving\n *      <Spinner size={24} />\n *   </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n  return (\n    <svg\n      aria-busy=\"true\"\n      role=\"status\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height={props.size}\n      width={props.size}\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n      >\n        <path\n          strokeDasharray={16}\n          strokeDashoffset={16}\n          d=\"M12 3c4.97 0 9 4.03 9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.15s\"\n            values=\"16;0\"\n          ></animate>\n          <animateTransform\n            attributeName=\"transform\"\n            dur=\"0.75s\"\n            repeatCount=\"indefinite\"\n            type=\"rotate\"\n            values=\"0 12 12;360 12 12\"\n          ></animateTransform>\n        </path>\n        <path\n          strokeDasharray={64}\n          strokeDashoffset={64}\n          strokeOpacity={0.3}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.6s\"\n            values=\"64;0\"\n          ></animate>\n        </path>\n      </g>\n    </svg>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Tab.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tab.tsx","../../../src/context/tabs.tsx","../../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { 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 */\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, styles } = 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, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', 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 id - the id of the tabs component,\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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","'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":"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","names":["import_react","import_react","tabs","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/Tab.tsx","../../../src/context/tabs.tsx","../../../src/aria-helpers/tabs.aria.ts"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { 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  /**\n   * The id of the tab that will be tracked as the active tab and used for aria\n   * attributes.\n   */\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 * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <Tabs>\n *  <TabList description=\"Profile settings\">\n *   <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tab(props: TabProps) {\n  const { value, ...nativeProps } = props\n  const { active, onTabUpdate, styles } = 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, styles.tab)}\n      onClick={handleClick}\n      role=\"tab\"\n      ref={ref}\n      value={value}\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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 Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\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","'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\nfunction getNextIndex(index: number, length: number) {\n  return index === length - 1 ? 0 : index + 1\n}\n\nfunction getPrevIndex(index: number, length: number) {\n  return index === 0 ? length - 1 : index - 1\n}\n\nexport function useTabsKeyboardNavigation() {\n  const { tabs } = useTabsContext()\n  const [activeTab, setActiveTab] = useState(-1)\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const index =\n        activeTab === -1\n          ? tabs.current.findIndex((tab) => tab.ariaSelected === 'true')\n          : activeTab\n      const nextIndex = getNextIndex(index, tabs.current.length)\n      const prevIndex = getPrevIndex(index, tabs.current.length)\n\n      // If the active tab is not found, do nothing\n      if (index === -1) return\n\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault()\n          setActiveTab(prevIndex)\n          tabs.current[prevIndex].focus()\n          break\n        case 'ArrowRight':\n          event.preventDefault()\n          setActiveTab(nextIndex)\n          tabs.current[nextIndex].focus()\n          break\n        case 'Home':\n          event.preventDefault()\n          setActiveTab(0)\n          tabs.current[0].focus()\n          break\n        case 'End':\n          event.preventDefault()\n          setActiveTab(tabs.current.length - 1)\n          tabs.current[tabs.current.length - 1].focus()\n          break\n        default:\n          break\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyDown)\n\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [activeTab, tabs.current])\n\n  return {\n    ref: (tab: HTMLButtonElement) => {\n      if (tab && !tabs.current.includes(tab)) {\n        tabs.current.push(tab)\n      }\n    },\n  }\n}\n"],"mappings":"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","names":["import_react","import_react","tabs","import_jsx_runtime"]}

package/build/legacy/components/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabList.tsx","../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  const { id, styles } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', 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 id - the id of the tabs component,\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;;;ACDvB,qBAA4C;AAE5C,mBASO;AAiFH;AAlEG,IAAM,kBAAc,4BAAuC,IAAI;AAsE/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;ADxEI,IAAAA,sBAAA;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/TabList.tsx","../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A description of what the tab list contains. Required for accessibility.\n   */\n  description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n *  <Tab id=\"overview\">Overview</Tab>\n *  <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n  const { description, ...nativeProps } = props\n  const { id, styles } = useTabsContext()\n\n  return (\n    <div\n      {...nativeProps}\n      aria-describedby={description}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          gap: '0',\n        }),\n        styles.tabList,\n      )}\n      id={id ?? nativeProps.id}\n    />\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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 Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;;;ACDvB,qBAA4C;AAE5C,mBASO;AAwGH;AA1EG,IAAM,kBAAc,4BAAuC,IAAI;AAkF/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD/FI,IAAAA,sBAAA;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/TabPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabPanel.tsx","../../../src/context/tabs.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { 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, styles } = 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(nativeProps.className, styles.tabPanel)}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', 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 id - the id of the tabs component,\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,IAAAA,gBAA6C;;;ACD7C,qBAA4C;AAE5C,mBASO;AAiFH;AAlEG,IAAM,kBAAc,4BAAuC,IAAI;AAsE/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;ACtGA,IAAAC,gBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFMM,IAAAC,sBAAA;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,eAAW,uBAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,eAAW,eAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":["import_react","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/TabPanel.tsx","../../../src/context/tabs.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { 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  /**\n   * The unique value of the Tab that is associated with the TabPanel.\n   */\n  tab: string\n}\n\n/**\n * The TabPanel component provides a panel element to be used in a Tabs\n * provider.\n * @see https://cerberus.digitalu.design/react/tabs\n * @memberof module:Tabs\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, styles } = 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(nativeProps.className, styles.tabPanel)}\n        id={`panel:${tab}`}\n        role=\"tabpanel\"\n      />\n    </Show>\n  )\n}\n","'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\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 Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\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(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\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\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,IAAAA,gBAA6C;;;ACD7C,qBAA4C;AAE5C,mBASO;AAwGH;AA1EG,IAAM,kBAAc,4BAAuC,IAAI;AAkF/D,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;ACjIA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFAM,IAAAC,sBAAA;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,eAAW,uBAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,eAAW,eAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":["import_react","import_react","import_jsx_runtime"]}

package/build/legacy/components/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  caption: string\n}\n\n/**\n * The Table component is used to render a table.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @prop caption - An easy to understand description of the table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n *  {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n  const { caption, children, ...nativeProps } = props\n  const styles = table()\n\n  return (\n    <div className={styles.container}>\n      <table\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.table)}\n      >\n        <caption className={styles.caption}>{caption}</caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n *  {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n  return <tr {...props} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AA6BhB;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,aAAS,sBAAM;AAErB,SACE,4CAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,oDAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,4CAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}
+{"version":3,"sources":["../../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * An easy to understand description of the table. Required for accessibility.\n   */\n  caption: string\n}\n\n/**\n * An accessible table component.\n * @definition [ARIA Table pattern](https://www.w3.org/WAI/ARIA/apg/patterns/table/)\n * @see https://cerberus.digitalu.design/react/table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n *  {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n  const { caption, children, ...nativeProps } = props\n  const styles = table()\n\n  return (\n    <div className={styles.container}>\n      <table\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.table)}\n      >\n        <caption className={styles.caption}>{caption}</caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n *  {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n  return <tr {...props} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAgChB;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,aAAS,sBAAM;AAErB,SACE,4CAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,oDAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,4CAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}