@cerberus-design/react 0.8.0 → 0.8.1

package/build/legacy/chunk-2VPKILZ6.js

@@ -1,122 +0,0 @@
-import {
-  Notification
-} from "./chunk-LF2QFS5S.js";
-import {
-  NotificationDescription
-} from "./chunk-HW76XVA3.js";
-import {
-  NotificationHeading
-} from "./chunk-3C2DJSEE.js";
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
-import {
-  Button
-} from "./chunk-6F34A7NZ.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
-
-// src/context/notification-center.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState
-} from "react";
-import { animateIn, vstack } from "@cerberus/styled-system/patterns";
-import { notification } from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var NotificationsContext = createContext(null);
-function NotificationCenter(props) {
-  const [activeNotifications, setActiveNotifications] = useState([]);
-  const styles = notification();
-  const handleNotify = useCallback((options) => {
-    setActiveNotifications((prev) => {
-      const id = `${options.palette}:${prev.length + 1}`;
-      return [...prev, { ...options, id }];
-    });
-  }, []);
-  const handleClose = useCallback((e) => {
-    const target = e.currentTarget;
-    setActiveNotifications((prev) => {
-      const item = prev.find((option) => option.id === target.value);
-      if (item == null ? void 0 : item.onClose) item.onClose();
-      return prev.filter((option) => option.id !== target.value);
-    });
-  }, []);
-  const handleCloseAll = useCallback(() => {
-    setActiveNotifications((prev) => {
-      prev.forEach((item) => {
-        if (item.onClose) item.onClose();
-      });
-      return [];
-    });
-  }, []);
-  const value = useMemo(
-    () => ({
-      notify: handleNotify
-    }),
-    [handleNotify]
-  );
-  return /* @__PURE__ */ jsxs(NotificationsContext.Provider, { value, children: [
-    props.children,
-    /* @__PURE__ */ jsx(Show, { when: activeNotifications.length > 0, children: /* @__PURE__ */ jsx(Portal, { container: props.container, children: /* @__PURE__ */ jsxs("div", { className: styles.center, children: [
-      /* @__PURE__ */ jsx(Show, { when: activeNotifications.length >= 4, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          className: cx(styles.closeAll, animateIn()),
-          onClick: handleCloseAll,
-          palette: "action",
-          shape: "rounded",
-          size: "sm",
-          usage: "text",
-          children: "Close all"
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: vstack({
-            alignItems: "flex-end",
-            gap: "4"
-          }),
-          style: {
-            alignItems: "flex-end"
-          },
-          children: activeNotifications.map((option) => /* @__PURE__ */ jsxs(
-            Notification,
-            {
-              id: option.id,
-              onClose: handleClose,
-              open: true,
-              palette: option.palette,
-              children: [
-                /* @__PURE__ */ jsx(NotificationHeading, { palette: option.palette, children: option.heading }),
-                /* @__PURE__ */ jsx(NotificationDescription, { palette: option.palette, children: option.description })
-              ]
-            },
-            option.id
-          ))
-        }
-      )
-    ] }) }) })
-  ] });
-}
-function useNotificationCenter() {
-  const context = useContext(NotificationsContext);
-  if (!context) {
-    throw new Error(
-      "useNotificationCenter must be used within a NotificationsProvider"
-    );
-  }
-  return context;
-}
-
-export {
-  NotificationCenter,
-  useNotificationCenter
-};
-//# sourceMappingURL=chunk-2VPKILZ6.js.map

package/build/legacy/chunk-2VPKILZ6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  heading: string\n  id?: string\n  description?: ReactNode\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [activeNotifications, setActiveNotifications] = useState<\n    NotifyOptions[]\n  >([])\n  const styles = notification()\n\n  const handleNotify = useCallback((options: NotifyOptions) => {\n    setActiveNotifications((prev) => {\n      const id = `${options.palette}:${prev.length + 1}`\n      return [...prev, { ...options, id }]\n    })\n  }, [])\n\n  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    setActiveNotifications((prev) => {\n      const item = prev.find((option) => option.id === target.value)\n      if (item?.onClose) item.onClose()\n      return prev.filter((option) => option.id !== target.value)\n    })\n  }, [])\n\n  const handleCloseAll = useCallback(() => {\n    setActiveNotifications((prev) => {\n      prev.forEach((item) => {\n        if (item.onClose) item.onClose()\n      })\n      return []\n    })\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={activeNotifications.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={activeNotifications.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"text\"\n              >\n                Close all\n              </Button>\n            </Show>\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {activeNotifications.map((option) => (\n                <Notification\n                  id={option.id!}\n                  key={option.id}\n                  onClose={handleClose}\n                  open\n                  palette={option.palette}\n                >\n                  <NotificationHeading palette={option.palette}>\n                    {option.heading}\n                  </NotificationHeading>\n                  <NotificationDescription palette={option.palette}>\n                    {option.description}\n                  </NotificationDescription>\n                </Notification>\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA+FL,cAqBE,YArBF;AA5Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,6BAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cAEX,SAAS;AAAA,cACT,MAAI;AAAA,cACJ,SAAS,OAAO;AAAA,cAEhB;AAAA,oCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,gBACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,YAVK,OAAO;AAAA,UAWd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/build/legacy/chunk-3C2DJSEE.js

@@ -1,16 +0,0 @@
-// src/components/NotificationHeading.tsx
-import { cx } from "@cerberus/styled-system/css";
-import {
-  notification
-} from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function NotificationHeading(props) {
-  const { palette, ...nativeProps } = props;
-  const styles = notification({ palette });
-  return /* @__PURE__ */ jsx("p", { className: cx(nativeProps.className, styles.heading), ...nativeProps });
-}
-
-export {
-  NotificationHeading
-};
-//# sourceMappingURL=chunk-3C2DJSEE.js.map

package/build/legacy/chunk-3C2DJSEE.js.map

@@ -1 +0,0 @@
-{"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":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}

package/build/legacy/chunk-3GXISGPS.js

@@ -1,47 +0,0 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
-
-// src/components/Th.tsx
-import { css, cx } from "@cerberus/styled-system/css";
-import { th } from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function Th(props) {
-  const { size, onClick, ...nativeProps } = props;
-  return /* @__PURE__ */ jsx(
-    Show,
-    {
-      when: Boolean(onClick),
-      fallback: /* @__PURE__ */ jsx(
-        "th",
-        {
-          ...nativeProps,
-          className: cx(nativeProps.className, th({ size }))
-        }
-      ),
-      children: /* @__PURE__ */ jsx("th", { ...nativeProps, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: cx(
-            nativeProps.className,
-            th({ size }),
-            css({
-              alignItems: "center",
-              display: "inline-flex",
-              justifyContent: "space-between",
-              userSelect: "none",
-              w: "full"
-            })
-          ),
-          onClick,
-          children: props.children
-        }
-      ) })
-    }
-  );
-}
-
-export {
-  Th
-};
-//# sourceMappingURL=chunk-3GXISGPS.js.map

package/build/legacy/chunk-3GXISGPS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent, TableHTMLAttributes } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement> & {\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n  const { size, onClick, ...nativeProps } = props\n  return (\n    <Show\n      when={Boolean(onClick)}\n      fallback={\n        <th\n          {...nativeProps}\n          className={cx(nativeProps.className, th({ size }))}\n        />\n      }\n    >\n      <th {...nativeProps}>\n        <button\n          className={cx(\n            nativeProps.className,\n            th({ size }),\n            css({\n              alignItems: 'center',\n              display: 'inline-flex',\n              justifyContent: 'space-between',\n              userSelect: 'none',\n              w: 'full',\n            }),\n          )}\n          onClick={onClick}\n        >\n          {props.children}\n        </button>\n      </th>\n    </Show>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,UAA+B;AA4BhC;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,8BAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,GAAG,EAAE,KAAK,CAAC;AAAA,YACX,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,YACL,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,11 +0,0 @@
-// 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/legacy/chunk-4CAT3FHV.js.map

@@ -1 +0,0 @@
-{"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/legacy/chunk-4M3EUP57.js

@@ -1,22 +0,0 @@
-// 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/legacy/chunk-4M3EUP57.js.map

@@ -1 +0,0 @@
-{"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-4M4LCQ43.js

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

package/build/legacy/chunk-4M4LCQ43.js.map

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

package/build/legacy/chunk-4O4QFF4S.js

@@ -1,15 +0,0 @@
-// src/components/Show.tsx
-import { useMemo } from "react";
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = useMemo(() => when ?? false, [when]);
-  return useMemo(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-export {
-  Show
-};
-//# sourceMappingURL=chunk-4O4QFF4S.js.map

package/build/legacy/chunk-4O4QFF4S.js.map

@@ -1 +0,0 @@
-{"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":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}

package/build/legacy/chunk-55J6XMHW.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-55J6XMHW.js.map

package/build/legacy/chunk-6DIGPXAD.js

@@ -1,48 +0,0 @@
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
-
-// src/components/NavMenuLink.tsx
-import { css, cx } from "@cerberus/styled-system/css";
-import { jsx } from "react/jsx-runtime";
-function NavMenuLink(props) {
-  const { as, ...nativeProps } = props;
-  const hasAs = Boolean(as);
-  const AsSub = as;
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      className: css({
-        w: "full"
-      }),
-      children: /* @__PURE__ */ jsx(
-        Show,
-        {
-          when: hasAs,
-          fallback: /* @__PURE__ */ jsx(
-            "a",
-            {
-              ...nativeProps,
-              className: cx(
-                nativeProps.className,
-                css({
-                  color: "action.navigation.initial",
-                  textStyle: "link",
-                  _hover: {
-                    color: "action.navigation.hover"
-                  }
-                })
-              )
-            }
-          ),
-          children: hasAs && /* @__PURE__ */ jsx(AsSub, { ...nativeProps })
-        }
-      )
-    }
-  );
-}
-
-export {
-  NavMenuLink
-};
-//# sourceMappingURL=chunk-6DIGPXAD.js.map

package/build/legacy/chunk-6DIGPXAD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/NavMenuLink.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"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAsBd;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,WAAW,IAAI;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,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;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,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-6F34A7NZ.js

@@ -1,28 +0,0 @@
-// src/components/Button.tsx
-import { cx } from "@cerberus/styled-system/css";
-import {
-  button
-} from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function Button(props) {
-  const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...nativeProps,
-      className: cx(
-        nativeProps.className,
-        button({
-          palette,
-          usage,
-          shape
-        })
-      )
-    }
-  );
-}
-
-export {
-  Button
-};
-//# sourceMappingURL=chunk-6F34A7NZ.js.map

package/build/legacy/chunk-6F34A7NZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/chunk-7VJOPJVX.js

@@ -1,29 +0,0 @@
-// src/components/Droppable.tsx
-import { useDroppable } from "@dnd-kit/core";
-import { useId } from "react";
-import { jsx } from "react/jsx-runtime";
-function Droppable(props) {
-  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } = props;
-  const uuid = useId();
-  const { isOver, setNodeRef } = useDroppable({
-    data,
-    disabled,
-    id: id || uuid,
-    resizeObserverConfig
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...nativeProps,
-      "data-over": isOver,
-      "data-dropped": dropped,
-      ref: setNodeRef,
-      children: props.children
-    }
-  );
-}
-
-export {
-  Droppable
-};
-//# sourceMappingURL=chunk-7VJOPJVX.js.map

package/build/legacy/chunk-7VJOPJVX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Droppable.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'\nimport { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'\n\nexport interface DroppableProps\n  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,\n    UseDroppableArguments {\n  dropped?: boolean\n}\n\nexport function Droppable(props: PropsWithChildren<DroppableProps>) {\n  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =\n    props\n  const uuid = useId()\n  const { isOver, setNodeRef } = useDroppable({\n    data,\n    disabled,\n    id: id || uuid,\n    resizeObserverConfig,\n  })\n\n  return (\n    <div\n      {...nativeProps}\n      data-over={isOver}\n      data-dropped={dropped}\n      ref={setNodeRef}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"mappings":";AAEA,SAAS,oBAAgD;AACzD,SAAS,aAA8D;AAoBnE;AAZG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,IAAI,UAAU,MAAM,sBAAsB,GAAG,YAAY,IACxE;AACF,QAAM,OAAO,MAAM;AACnB,QAAM,EAAE,QAAQ,WAAW,IAAI,aAAa;AAAA,IAC1C;AAAA,IACA;AAAA,IACA,IAAI,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,gBAAc;AAAA,MACd,KAAK;AAAA,MAEJ,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/build/legacy/chunk-A5WYZVUR.js

@@ -1,28 +0,0 @@
-// src/components/Table.tsx
-import { cx } from "@cerberus/styled-system/css";
-import { table } from "@cerberus/styled-system/recipes";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Table(props) {
-  const { caption, children, ...nativeProps } = props;
-  const styles = table();
-  return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxs(
-    "table",
-    {
-      ...nativeProps,
-      className: cx(nativeProps.className, styles.table),
-      children: [
-        /* @__PURE__ */ jsx("caption", { className: styles.caption, children: caption }),
-        children
-      ]
-    }
-  ) });
-}
-function Tr(props) {
-  return /* @__PURE__ */ jsx("tr", { ...props });
-}
-
-export {
-  Table,
-  Tr
-};
-//# sourceMappingURL=chunk-A5WYZVUR.js.map

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

@@ -1 +0,0 @@
-{"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,SAAS,UAAU;AACnB,SAAS,aAAa;AA6BhB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}

package/build/legacy/chunk-AAKIOHAX.js

@@ -1,155 +0,0 @@
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
-import {
-  Modal
-} from "./chunk-2UFNQM55.js";
-import {
-  ModalDescription
-} from "./chunk-4M4LCQ43.js";
-import {
-  ModalHeader
-} from "./chunk-QU7UV5DB.js";
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
-import {
-  ModalIcon
-} from "./chunk-JJP2TFTU.js";
-import {
-  Button
-} from "./chunk-6F34A7NZ.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
-import {
-  trapFocus
-} from "./chunk-KESKDLX6.js";
-import {
-  $cerberusIcons
-} from "./chunk-BEYPMC73.js";
-import {
-  useModal
-} from "./chunk-TZNYJ3G7.js";
-
-// src/context/confirm-modal.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState
-} from "react";
-import { css } from "@cerberus/styled-system/css";
-import { hstack } from "@cerberus/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 == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
-    [content]
-  );
-  const handleChoice = useCallback(
-    (e) => {
-      var _a, _b;
-      const target = e.currentTarget;
-      if (target.value === "true") {
-        (_a = resolveRef.current) == null ? void 0 : _a.call(resolveRef, true);
-      }
-      (_b = resolveRef.current) == null ? void 0 : _b.call(resolveRef, 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 == null ? void 0 : content.heading }),
-        /* @__PURE__ */ jsx(ModalDescription, { children: content == null ? void 0 : 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 == null ? void 0 : content.actionText
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: css({
-                  w: "1/2"
-                }),
-                name: "cancel",
-                onClick: handleChoice,
-                usage: "outlined",
-                value: "false",
-                children: content == null ? void 0 : 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-AAKIOHAX.js.map

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

@@ -1 +0,0 @@
-{"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/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\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 { modalRef, show, close } = useModal()\n  const resolveRef = useRef<ShowResult>(null)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const focusTrap = trapFocus(modalRef)\n  const ConfirmIcon = $cerberusIcons.confirmModal\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (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      close()\n    },\n    [close],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        show()\n        resolveRef.current = resolve\n      })\n    },\n    [show],\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        <Modal onKeyDown={focusTrap} ref={modalRef}>\n          <ModalHeader>\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            <ModalHeading>{content?.heading}</ModalHeading>\n            <ModalDescription>{content?.description}</ModalDescription>\n          </ModalHeader>\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        </Modal>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,WAAW;AACpB,SAAS,cAAc;AA6Gb,SAKQ,KALR;AA9EV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU;AAAA,IACd,OAAO,mCAAS,UAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AAzF1C;AA0FM,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,yBAAW,YAAX,oCAAqB;AAAA,MACvB;AACA,uBAAW,YAAX,oCAAqB;AACrB,YAAM;AAAA,IACR;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAqC;AACpC,aAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,aAAK;AACL,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAC3B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA,2BAAC,eACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY;AAAA,YAClB,UACE,oBAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,YAGF,8BAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,gBAAc,6CAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,6CAAS,aAAY;AAAA,SAC1C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}