@cerberus-design/react 0.6.1 → 0.7.0

package/build/modern/chunk-4CAT3FHV.js

@@ -0,0 +1,11 @@
+// src/components/Portal.tsx
+import { createPortal } from "react-dom";
+function Portal(props) {
+  const container = props.container || document.body;
+  return createPortal(props.children, container, props.key);
+}
+
+export {
+  Portal
+};
+//# sourceMappingURL=chunk-4CAT3FHV.js.map

package/build/modern/chunk-4CAT3FHV.js.map

@@ -0,0 +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":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}

package/build/modern/chunk-4M3EUP57.js

@@ -0,0 +1,22 @@
+// src/context/feature-flags.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var FeatureFlagContext = createContext(null);
+function FeatureFlags(props) {
+  return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
+}
+function useFeatureFlags(key) {
+  const context = useContext(FeatureFlagContext);
+  if (context === null) {
+    throw new Error(
+      "useFeatureFlag must be used within a FeatureFlags Provider"
+    );
+  }
+  return context[key] ?? false;
+}
+
+export {
+  FeatureFlags,
+  useFeatureFlags
+};
+//# sourceMappingURL=chunk-4M3EUP57.js.map

package/build/modern/chunk-4M3EUP57.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n  [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n  flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n *  featureOne: true,\n *  featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n *    <FeatureFlag flag=\"featureOne\">\n *      This is visible.\n *    </FeatureFlag>\n *   <FeatureFlag flag=\"featureTwo\">\n *     This is hidden.\n *   </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n  props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n  return (\n    <FeatureFlagContext.Provider value={props.flags}>\n      {props.children}\n    </FeatureFlagContext.Provider>\n  )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n  const context = useContext(FeatureFlagContext)\n  if (context === null) {\n    throw new Error(\n      'useFeatureFlag must be used within a FeatureFlags Provider',\n    )\n  }\n  return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}

package/build/{legacy/chunk-X4YQ27D5.js → modern/chunk-5GEC53G7.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-3CBN7U25.js";
+} from "./chunk-6TXQZ3PB.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-X4YQ27D5.js.map
+//# sourceMappingURL=chunk-5GEC53G7.js.map

package/build/modern/{chunk-YJCWUN33.js → chunk-67S42J4B.js}

@@ -3,15 +3,15 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/components/TabPanel.tsx
-import { css, cx } from "@cerberus/styled-system/css";
+import { cx } from "@cerberus/styled-system/css";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 function TabPanel(props) {
   const { tab, ...nativeProps } = props;
-  const { active } = useTabsContext();
+  const { active, styles } = useTabsContext();
   const isActive = useMemo(() => active === tab, [active, tab]);
   return /* @__PURE__ */ jsx(Show, { when: isActive, children: /* @__PURE__ */ jsx(
     "div",
@@ -19,18 +19,7 @@ function TabPanel(props) {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
       "aria-labelledby": tab,
-      className: cx(
-        nativeProps.className,
-        css({
-          rounded: "md",
-          _focusVisible: {
-            boxShadow: "none",
-            outline: "3px solid",
-            outlineColor: "action.border.focus",
-            outlineOffset: "2px"
-          }
-        })
-      ),
+      className: cx(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"
     }
@@ -40,4 +29,4 @@ function TabPanel(props) {
 export {
   TabPanel
 };
-//# sourceMappingURL=chunk-YJCWUN33.js.map
+//# sourceMappingURL=chunk-67S42J4B.js.map

package/build/modern/chunk-67S42J4B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TabPanel.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"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,eAAoC;AA8BvC;AAPC,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,KAAK,GAAG,YAAY,IAAI;AAChC,QAAM,EAAE,QAAQ,OAAO,IAAI,eAAe;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,KAAK,CAAC,QAAQ,GAAG,CAAC;AAE5D,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,UAAU,EAAE;AAAA,MAC/B,mBAAiB;AAAA,MACjB,WAAW,GAAG,YAAY,WAAW,OAAO,QAAQ;AAAA,MACpD,IAAI,SAAS,GAAG;AAAA,MAChB,MAAK;AAAA;AAAA,EACP,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-5MNCW677.js";
+} from "./chunk-C45DY4VE.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -12,7 +12,10 @@ function _validateIconsProperties(icons) {
 }
 function defineIcons(icons) {
   _validateIconsProperties(icons);
-  $cerberusIcons = icons;
+  $cerberusIcons = {
+    ...defaultIcons,
+    ...icons
+  };
   return $cerberusIcons;
 }
 var $cerberusIcons = defaultIcons;
@@ -21,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-3CBN7U25.js.map
+//# sourceMappingURL=chunk-6TXQZ3PB.js.map

package/build/modern/chunk-6TXQZ3PB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["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"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}

package/build/modern/{chunk-DQOYTLGB.js → chunk-7KJIZIAU.js}

@@ -1,4 +1,7 @@
 // src/context/tabs.tsx
+import {
+  tabs
+} from "@cerberus-design/styled-system/recipes";
 import {
   createContext,
   useContext,
@@ -10,20 +13,21 @@ import {
 import { jsx } from "react/jsx-runtime";
 var TabsContext = createContext(null);
 function Tabs(props) {
-  const { cache, active, id } = props;
+  const { cache, active, id, palette } = props;
   const [activeTab, setActiveTab] = useState(() => cache ? "" : active ?? "");
-  const tabs = useRef([]);
+  const tabsList = useRef([]);
   const uuid = useMemo(() => {
     return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
   }, [id]);
   const value = useMemo(
     () => ({
-      tabs,
+      tabs: tabsList,
       id: uuid,
       active: activeTab,
+      styles: tabs({ palette }),
       onTabUpdate: setActiveTab
     }),
-    [activeTab, setActiveTab, uuid, tabs]
+    [activeTab, setActiveTab, palette, uuid, tabsList]
   );
   useEffect(() => {
     if (cache) {
@@ -53,4 +57,4 @@ export {
   Tabs,
   useTabsContext
 };
-//# sourceMappingURL=chunk-DQOYTLGB.js.map
+//# sourceMappingURL=chunk-7KJIZIAU.js.map

package/build/modern/chunk-7KJIZIAU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport {\n  tabs,\n  type TabsVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { Pretty } from '@cerberus-design/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":";AAEA;AAAA,EACE;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAiFH;AAlEG,IAAM,cAAc,cAAuC,IAAI;AA2B/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-C45DY4VE.js

@@ -0,0 +1,17 @@
+// src/config/cerbIcons.ts
+import {
+  Checkmark,
+  Information,
+  WarningFilled
+} from "@cerberus/icons";
+var defaultIcons = {
+  confirmModal: Information,
+  promptModal: Information,
+  invalid: WarningFilled,
+  toggleChecked: Checkmark
+};
+
+export {
+  defaultIcons
+};
+//# sourceMappingURL=chunk-C45DY4VE.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  promptModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAUA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/modern/chunk-C5HLLGME.js

@@ -0,0 +1,23 @@
+// src/hooks/useModal.ts
+import { useCallback, useMemo, useRef } from "react";
+function useModal() {
+  const modalRef = useRef(null);
+  const show = useCallback(() => {
+    modalRef.current?.showModal();
+  }, []);
+  const close = useCallback(() => {
+    modalRef.current?.close();
+  }, []);
+  return useMemo(() => {
+    return {
+      modalRef,
+      show,
+      close
+    };
+  }, [modalRef, show, close]);
+}
+
+export {
+  useModal
+};
+//# sourceMappingURL=chunk-C5HLLGME.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useModal.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\ninterface UseModalReturnValue {\n  modalRef: RefObject<HTMLDialogElement>\n  show: () => void\n  close: () => void\n}\n\nexport function useModal(): UseModalReturnValue {\n  const modalRef = useRef<HTMLDialogElement | null>(null)\n\n  const show = useCallback(() => {\n    modalRef.current?.showModal()\n  }, [])\n\n  const close = useCallback(() => {\n    modalRef.current?.close()\n  }, [])\n\n  return useMemo(() => {\n    return {\n      modalRef,\n      show,\n      close,\n    }\n  }, [modalRef, show, close])\n}\n"],"mappings":";AAEA,SAAS,aAAa,SAAS,cAA8B;AAatD,SAAS,WAAgC;AAC9C,QAAM,WAAW,OAAiC,IAAI;AAEtD,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,SAAS,UAAU;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,MAAM;AAC9B,aAAS,SAAS,MAAM;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,MAAM;AACnB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAC5B;","names":[]}

package/build/{legacy/chunk-HE3HFKYU.js → modern/chunk-CU7HXAKM.js}

@@ -1,9 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -32,7 +32,7 @@ function Label(props) {
           "span",
           {
             className: css({
-              color: "neutral.text.100",
+              color: "page.text.100",
               fontSize: "inherit"
             }),
             children: "(required)"
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-HE3HFKYU.js.map
+//# sourceMappingURL=chunk-CU7HXAKM.js.map

package/build/modern/{chunk-HE3HFKYU.js.map → chunk-CU7HXAKM.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-G3JEWPLM.js

@@ -0,0 +1,29 @@
+// src/components/ModalIcon.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { circle } from "@cerberus-design/styled-system/patterns";
+import {
+  modalIcon
+} from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ModalIcon(props) {
+  const { palette, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        modalIcon({
+          palette
+        }),
+        circle()
+      ),
+      children: props.children
+    }
+  );
+}
+
+export {
+  ModalIcon
+};
+//# sourceMappingURL=chunk-G3JEWPLM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalIcon.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { circle } from '@cerberus-design/styled-system/patterns'\nimport {\n  modalIcon,\n  type ModalIconVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>\nexport type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n  const { palette, ...nativeProps } = props\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        modalIcon({\n          palette,\n        }),\n        circle(),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AASH;AAHG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/modern/chunk-HBEEHHON.js

@@ -0,0 +1,46 @@
+import {
+  useTabsKeyboardNavigation
+} from "./chunk-KFUXGX33.js";
+import {
+  useTabsContext
+} from "./chunk-7KJIZIAU.js";
+
+// src/components/Tab.tsx
+import {
+  useMemo,
+  useTransition
+} from "react";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Tab(props) {
+  const { value, ...nativeProps } = props;
+  const { active, onTabUpdate, styles } = useTabsContext();
+  const [isPending, startTransition] = useTransition();
+  const { ref } = useTabsKeyboardNavigation();
+  const isActive = useMemo(() => active === value, [active, value]);
+  function handleClick(e) {
+    props.onClick?.(e);
+    startTransition(() => onTabUpdate(e.currentTarget.value));
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...nativeProps,
+      ...!isActive && { tabIndex: -1 },
+      "aria-controls": `panel:${value}`,
+      "aria-busy": isPending,
+      "aria-selected": isActive,
+      id: value,
+      className: cx(nativeProps.className, styles.tab),
+      onClick: handleClick,
+      role: "tab",
+      ref,
+      value
+    }
+  );
+}
+
+export {
+  Tab
+};
+//# sourceMappingURL=chunk-HBEEHHON.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tab.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useMemo,\n  useTransition,\n  type ButtonHTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport { useTabsContext } from '../context/tabs'\nimport { 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"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,UAAU;AAoCf;AAbG,SAAS,IAAI,OAAiB;AACnC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,EAAE,QAAQ,aAAa,OAAO,IAAI,eAAe;AACvD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,EAAE,IAAI,IAAI,0BAA0B;AAC1C,QAAM,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,QAAQ,KAAK,CAAC;AAEhE,WAAS,YAAY,GAAkC;AACrD,UAAM,UAAU,CAAC;AACjB,oBAAgB,MAAM,YAAY,EAAE,cAAc,KAAK,CAAC;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,CAAC,YAAY,EAAE,UAAU,GAAG;AAAA,MACjC,iBAAe,SAAS,KAAK;AAAA,MAC7B,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,GAAG;AAAA,MAC/C,SAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-JIZQFTW6.js

@@ -0,0 +1,29 @@
+// src/aria-helpers/trap-focus.aria.ts
+function trapFocus(modalRef) {
+  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  const focusable = Array.from(
+    modalRef.current?.querySelectorAll(focusableElements) ?? []
+  );
+  const firstFocusable = focusable[0];
+  const lastFocusable = focusable[focusable.length - 1];
+  return function handleKeyDown(event) {
+    if (event.key === "Tab") {
+      if (event.shiftKey) {
+        if (document.activeElement === firstFocusable) {
+          lastFocusable.focus();
+          event.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  };
+}
+
+export {
+  trapFocus
+};
+//# sourceMappingURL=chunk-JIZQFTW6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["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":";AAEO,SAAS,UACd,UACyC;AACzC,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,IACtB,SAAS,SAAS,iBAAiB,iBAAiB,KAAK,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/build/modern/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js}

@@ -1,6 +1,6 @@
 import {
   useTabsContext
-} from "./chunk-DQOYTLGB.js";
+} from "./chunk-7KJIZIAU.js";
 
 // src/aria-helpers/tabs.aria.ts
 import { useEffect, useState } from "react";
@@ -61,4 +61,4 @@ function useTabsKeyboardNavigation() {
 export {
   useTabsKeyboardNavigation
 };
-//# sourceMappingURL=chunk-S7HBD2A7.js.map
+//# sourceMappingURL=chunk-KFUXGX33.js.map

package/build/modern/chunk-OGSAAB6K.js

@@ -0,0 +1,12 @@
+// src/components/ModalHeading.tsx
+import { cx } from "@cerberus-design/styled-system/css";
+import { modal } from "@cerberus-design/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function ModalHeading(props) {
+  return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().heading) });
+}
+
+export {
+  ModalHeading
+};
+//# sourceMappingURL=chunk-OGSAAB6K.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n *   <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/{legacy/chunk-G2QMBSK5.js → modern/chunk-PMCYXRAH.js}

@@ -32,7 +32,7 @@ function getPosition(position) {
 }
 var navListStyles = vstack({
   alignItems: "flex-start",
-  bgColor: "neutral.surface.100",
+  bgColor: "page.surface.100",
   boxShadow: "lg",
   gap: "2",
   opacity: "0",
@@ -83,4 +83,4 @@ export {
   getPosition,
   NavMenuList
 };
-//# sourceMappingURL=chunk-G2QMBSK5.js.map
+//# sourceMappingURL=chunk-PMCYXRAH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/NavMenuList.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"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;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,gBAAgB,OAAO;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,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/build/modern/chunk-TAVCJ54A.js

@@ -0,0 +1,154 @@
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
+import {
+  Modal
+} from "./chunk-TPFNVGYA.js";
+import {
+  ModalDescription
+} from "./chunk-UPODPCRD.js";
+import {
+  ModalHeader
+} from "./chunk-2F5TB2EV.js";
+import {
+  ModalHeading
+} from "./chunk-OGSAAB6K.js";
+import {
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
+import {
+  Button
+} from "./chunk-2ATICEW3.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  trapFocus
+} from "./chunk-JIZQFTW6.js";
+import {
+  $cerberusIcons
+} from "./chunk-6TXQZ3PB.js";
+import {
+  useModal
+} from "./chunk-C5HLLGME.js";
+
+// src/context/confirm-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { css } from "@cerberus-design/styled-system/css";
+import { hstack } from "@cerberus-design/styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConfirmModalContext = createContext(null);
+function ConfirmModal(props) {
+  const { modalRef, show, close } = useModal();
+  const resolveRef = useRef(null);
+  const [content, setContent] = useState(null);
+  const focusTrap = trapFocus(modalRef);
+  const ConfirmIcon = $cerberusIcons.confirmModal;
+  const palette = useMemo(
+    () => content?.kind === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const handleChoice = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        resolveRef.current?.(true);
+      }
+      resolveRef.current?.(false);
+      close();
+    },
+    [close]
+  );
+  const handleShow = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        show();
+        resolveRef.current = resolve;
+      });
+    },
+    [show]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
+      /* @__PURE__ */ jsxs(ModalHeader, { children: [
+        /* @__PURE__ */ jsx(
+          Show,
+          {
+            when: palette === "danger",
+            fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) }),
+            children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
+        /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: hstack({
+            gap: "4"
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                autoFocus: true,
+                className: css({
+                  w: "1/2"
+                }),
+                name: "confirm",
+                onClick: handleChoice,
+                palette,
+                value: "true",
+                children: content?.actionText
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: css({
+                  w: "1/2"
+                }),
+                name: "cancel",
+                onClick: handleChoice,
+                usage: "outlined",
+                value: "false",
+                children: content?.cancelText
+              }
+            )
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
+function useConfirmModal() {
+  const context = useContext(ConfirmModalContext);
+  if (context === null) {
+    throw new Error(
+      "useConfirmModal must be used within a ConfirmModal Provider"
+    );
+  }
+  return context;
+}
+
+export {
+  ConfirmModal,
+  useConfirmModal
+};
+//# sourceMappingURL=chunk-TAVCJ54A.js.map