@cerberus-design/react 0.6.1-next-1315bf2 → 0.6.1-next-8062b70

package/build/legacy/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-3TYUA4C7.js";
-import "../chunk-SCAVVE6E.js";
+} from "../chunk-6TXQZ3PB.js";
+import "../chunk-C45DY4VE.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/legacy/context/confirm-modal.js

@@ -2,13 +2,14 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-YRUUO4AP.js";
+} from "../chunk-UZIN7UOS.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2ATICEW3.js";
 import "../chunk-4O4QFF4S.js";
+import "../chunk-G3JEWPLM.js";
 import "../chunk-KESKDLX6.js";
-import "../chunk-3TYUA4C7.js";
-import "../chunk-SCAVVE6E.js";
+import "../chunk-6TXQZ3PB.js";
+import "../chunk-C45DY4VE.js";
 export {
   ConfirmModal,
   useConfirmModal

package/build/legacy/context/prompt-modal.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  PromptModal,
+  usePromptModal
+} from "../chunk-WKSC2WCV.js";
+import "../chunk-4CAT3FHV.js";
+import "../chunk-2ATICEW3.js";
+import "../chunk-5GEC53G7.js";
+import "../chunk-CU7HXAKM.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-G3JEWPLM.js";
+import "../chunk-KESKDLX6.js";
+import "../chunk-6TXQZ3PB.js";
+import "../chunk-C45DY4VE.js";
+export {
+  PromptModal,
+  usePromptModal
+};
+//# sourceMappingURL=prompt-modal.js.map

package/build/legacy/context/prompt-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/index.js

@@ -1,3 +1,10 @@
+import {
+  PromptModal,
+  usePromptModal
+} from "./chunk-WKSC2WCV.js";
+import {
+  TabPanel
+} from "./chunk-67S42J4B.js";
 import {
   Tag
 } from "./chunk-EVEEQRH6.js";
@@ -6,11 +13,14 @@ import {
 } from "./chunk-TCO46FK7.js";
 import {
   Toggle
-} from "./chunk-VLVKNEA5.js";
+} from "./chunk-TAZI77TP.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-YRUUO4AP.js";
+} from "./chunk-UZIN7UOS.js";
+import {
+  NavMenuLink
+} from "./chunk-6DIGPXAD.js";
 import {
   NavMenuList,
   getPosition
@@ -34,9 +44,6 @@ import {
 import {
   TabList
 } from "./chunk-X2JMXTBH.js";
-import {
-  TabPanel
-} from "./chunk-67S42J4B.js";
 import {
   useToggle
 } from "./chunk-SCQVXJBT.js";
@@ -58,20 +65,20 @@ import {
 } from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-5RA3ZIXA.js";
+} from "./chunk-5GEC53G7.js";
 import {
   Label
-} from "./chunk-JJGZRBIR.js";
+} from "./chunk-CU7HXAKM.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
 import {
-  NavMenuLink
-} from "./chunk-6DIGPXAD.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -90,8 +97,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-3TYUA4C7.js";
-import "./chunk-SCAVVE6E.js";
+} from "./chunk-6TXQZ3PB.js";
+import "./chunk-C45DY4VE.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -111,11 +118,13 @@ export {
   Input,
   Label,
   MODE_KEY,
+  ModalIcon,
   NavMenu,
   NavMenuLink,
   NavMenuList,
   NavMenuTrigger,
   Portal,
+  PromptModal,
   Radio,
   Show,
   THEME_KEY,
@@ -136,6 +145,7 @@ export {
   useFeatureFlags,
   useFieldContext,
   useNavMenuContext,
+  usePromptModal,
   useTabsContext,
   useTabsKeyboardNavigation,
   useTheme,

package/build/modern/_tsup-dts-rollup.d.ts

@@ -13,6 +13,7 @@ import type { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import type { KeyboardEventHandler } from 'react';
 import { label } from '@cerberus/styled-system/recipes';
+import { ModalIconVariantProps } from '@cerberus-design/styled-system/recipes';
 import { MutableRefObject } from 'react';
 import type { Pretty } from '@cerberus-design/styled-system/types';
 import { PropsWithChildren } from 'react';
@@ -117,6 +118,7 @@ export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
     confirmModal?: CarbonIconType | ElementType;
+    promptModal?: CarbonIconType | ElementType;
     invalid: CarbonIconType | ElementType;
     toggleChecked?: CarbonIconType | ElementType;
 }
@@ -319,6 +321,18 @@ declare type LabelRecipeProps = RecipeVariantProps<typeof label>;
 export { LabelRecipeProps }
 export { LabelRecipeProps as LabelRecipeProps_alias_1 }
 
+declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Element;
+export { ModalIcon }
+export { ModalIcon as ModalIcon_alias_1 }
+
+declare type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>;
+export { ModalIconBaseProps }
+export { ModalIconBaseProps as ModalIconBaseProps_alias_1 }
+
+declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
+export { ModalIconProps }
+export { ModalIconProps as ModalIconProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }
@@ -436,6 +450,51 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * Provides a prompt modal to the app.
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <PromptModal>
+ *   <SomeFeatureSection />
+ * </PromptModal>
+ *
+ * // Use the hook to show the prompt modal.
+ * const prompt = usePromptModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const accepted = await prompt.show({
+ *   kind: 'destructive',
+ *   heading: 'Delete channel?',
+ *  description:
+ *   'This will permanently delete a channel on your account. There is no going back.',
+ * key: CHANNEL_NAME,
+ * actionText: 'Yes, delete channel',
+ * cancelText: 'No, cancel',
+ * })
+ * // do something with accepted
+ * }, [prompt])
+ * ```
+ */
+declare function PromptModal(props: PropsWithChildren<PromptModalProviderProps>): JSX_2.Element;
+export { PromptModal }
+export { PromptModal as PromptModal_alias_1 }
+
+declare interface PromptModalProviderProps {
+}
+export { PromptModalProviderProps }
+export { PromptModalProviderProps as PromptModalProviderProps_alias_1 }
+
+declare interface PromptModalValue {
+    show: (options: ShowPromptModalOptions) => Promise<string>;
+}
+export { PromptModalValue }
+export { PromptModalValue as PromptModalValue_alias_1 }
+
+declare type PromptShowResult = ((value: string | PromiseLike<string>) => void) | null;
+export { PromptShowResult }
+export { PromptShowResult as PromptShowResult_alias_1 }
+
 declare function Radio(props: PropsWithChildren<RadioProps>): JSX_2.Element;
 export { Radio }
 export { Radio as Radio_alias_1 }
@@ -482,6 +541,21 @@ declare interface ShowConfirmModalOptions {
 export { ShowConfirmModalOptions }
 export { ShowConfirmModalOptions as ShowConfirmModalOptions_alias_1 }
 
+/**
+ * This module provides a context and hook for the prompt modal.
+ * @module
+ */
+declare interface ShowPromptModalOptions {
+    kind?: 'destructive' | 'non-destructive';
+    heading: string;
+    description?: string;
+    key: string;
+    actionText: string;
+    cancelText: string;
+}
+export { ShowPromptModalOptions }
+export { ShowPromptModalOptions as ShowPromptModalOptions_alias_1 }
+
 declare interface ShowProps {
     when: boolean | null | undefined;
     fallback?: ReactNode;
@@ -739,6 +813,10 @@ declare function useNavMenuContext(): NavMenuContextValue;
 export { useNavMenuContext }
 export { useNavMenuContext as useNavMenuContext_alias_1 }
 
+declare function usePromptModal(): PromptModalValue;
+export { usePromptModal }
+export { usePromptModal as usePromptModal_alias_1 }
+
 declare function useTabsContext(): TabsContextValue;
 export { useTabsContext }
 export { useTabsContext as useTabsContext_alias_1 }

package/build/modern/{chunk-5RA3ZIXA.js → 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-3TYUA4C7.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-5RA3ZIXA.js.map
+//# sourceMappingURL=chunk-5GEC53G7.js.map

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

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-SCAVVE6E.js";
+} from "./chunk-C45DY4VE.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-3TYUA4C7.js.map
+//# sourceMappingURL=chunk-6TXQZ3PB.js.map

package/build/modern/{chunk-SCAVVE6E.js → chunk-C45DY4VE.js}

@@ -6,6 +6,7 @@ import {
 } from "@cerberus/icons";
 var defaultIcons = {
   confirmModal: Information,
+  promptModal: Information,
   invalid: WarningFilled,
   toggleChecked: Checkmark
 };
@@ -13,4 +14,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-SCAVVE6E.js.map
+//# 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-JJGZRBIR.js → 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";
@@ -46,4 +46,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JJGZRBIR.js.map
+//# sourceMappingURL=chunk-CU7HXAKM.js.map

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-VLVKNEA5.js → chunk-TAZI77TP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-3TYUA4C7.js";
+} from "./chunk-6TXQZ3PB.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus-design/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-VLVKNEA5.js.map
+//# sourceMappingURL=chunk-TAZI77TP.js.map

package/build/modern/{chunk-BVK6GEDZ.js → chunk-X2GKC3IU.js}

@@ -7,12 +7,15 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  ModalIcon
+} from "./chunk-G3JEWPLM.js";
 import {
   trapFocus
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-3TYUA4C7.js";
+} from "./chunk-6TXQZ3PB.js";
 
 // src/context/confirm-modal.tsx
 import {
@@ -23,11 +26,9 @@ import {
   useRef,
   useState
 } from "react";
-import { css, cx } from "@cerberus-design/styled-system/css";
-import { circle, hstack, vstack } from "@cerberus-design/styled-system/patterns";
-import {
-  confirmModal
-} from "@cerberus-design/styled-system/recipes";
+import { css } from "@cerberus-design/styled-system/css";
+import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
+import { modal } from "@cerberus-design/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConfirmModalContext = createContext(null);
 function ConfirmModal(props) {
@@ -35,11 +36,12 @@ function ConfirmModal(props) {
   const resolveRef = useRef(null);
   const [content, setContent] = useState(null);
   const focusTrap = trapFocus(dialogRef);
+  const ConfirmIcon = $cerberusIcons.confirmModal;
   const palette = useMemo(
     () => content?.kind === "destructive" ? "danger" : "action",
     [content]
   );
-  const styles = confirmModal({ palette });
+  const styles = modal();
   const handleChoice = useCallback((e) => {
     const target = e.currentTarget;
     if (target.value === "true") {
@@ -65,7 +67,7 @@ function ConfirmModal(props) {
     props.children,
     /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
       /* @__PURE__ */ jsxs(
-        "div",
+        "section",
         {
           className: vstack({
             alignItems: "flex-start",
@@ -73,7 +75,14 @@ function ConfirmModal(props) {
             mb: "8"
           }),
           children: [
-            /* @__PURE__ */ jsx(ConfirmModalIcon, { palette }),
+            /* @__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("h2", { className: styles.heading, children: content?.heading }),
             /* @__PURE__ */ jsx("p", { className: styles.description, children: content?.description })
           ]
@@ -83,7 +92,6 @@ function ConfirmModal(props) {
         "div",
         {
           className: hstack({
-            justifyContent: "stretch",
             gap: "4"
           }),
           children: [
@@ -120,33 +128,6 @@ function ConfirmModal(props) {
     ] }) })
   ] });
 }
-function ConfirmModalIcon(props) {
-  const InfoIcon = $cerberusIcons.confirmModal;
-  return /* @__PURE__ */ jsx(
-    Show,
-    {
-      when: props.palette === "danger",
-      fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            confirmModal({
-              palette: "danger"
-            }).icon,
-            circle({
-              bgColor: "danger.surface.initial"
-            })
-          ),
-          style: {
-            color: "var(--cerberus-colors-danger-text-100)"
-          },
-          children: /* @__PURE__ */ jsx(InfoIcon, {})
-        }
-      )
-    }
-  );
-}
 function useConfirmModal() {
   const context = useContext(ConfirmModalContext);
   if (context === null) {
@@ -161,4 +142,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-BVK6GEDZ.js.map
+//# sourceMappingURL=chunk-X2GKC3IU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n  kind?: 'destructive' | 'non-destructive'\n  heading: string\n  description?: string\n  actionText: string\n  cancelText: string\n}\nexport type ShowResult =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const dialogRef = useRef<HTMLDialogElement>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(dialogRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n  const styles = modal()\n\n  const handleChoice = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    if (target.value === 'true') {\n      resolveRef.current?.(true)\n    }\n    resolveRef.current?.(false)\n    dialogRef?.current?.close()\n  }, [])\n\n  const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n    return new Promise<boolean>((resolve) => {\n      setContent({ ...options, kind: options.kind || 'non-destructive' })\n      dialogRef?.current?.showModal()\n      resolveRef.current = resolve\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <Portal>\n        <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n          <section\n            className={vstack({\n              alignItems: 'flex-start',\n              gap: '4',\n              mb: '8',\n            })}\n          >\n            <Show\n              when={palette === 'danger'}\n              fallback={\n                <ModalIcon palette=\"action\">\n                  <ConfirmIcon size={24} />\n                </ModalIcon>\n              }\n            >\n              <ModalIcon palette=\"danger\">\n                <ConfirmIcon size={24} />\n              </ModalIcon>\n            </Show>\n            <h2 className={styles.heading}>{content?.heading}</h2>\n            <p className={styles.description}>{content?.description}</p>\n          </section>\n\n          <div\n            className={hstack({\n              gap: '4',\n            })}\n          >\n            <Button\n              autoFocus\n              className={css({\n                w: '1/2',\n              })}\n              name=\"confirm\"\n              onClick={handleChoice}\n              palette={palette}\n              value=\"true\"\n            >\n              {content?.actionText}\n            </Button>\n            <Button\n              className={css({\n                w: '1/2',\n              })}\n              name=\"cancel\"\n              onClick={handleChoice}\n              usage=\"outlined\"\n              value=\"false\"\n            >\n              {content?.cancelText}\n            </Button>\n          </div>\n        </dialog>\n      </Portal>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}