@cerberus-design/react 0.23.0 → 0.24.0

package/dist/components/tag/tag.cjs

@@ -3,56 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const factory = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.cjs');
-const css = require('styled-system/css');
-const recipes = require('styled-system/recipes');
-const cerberus = require('../../context/cerberus.cjs');
-const show = require('../show/show.cjs');
-const button = require('../icon-button/button.cjs');
+const primitives = require('./primitives.cjs');
+const closable = require('./closable.cjs');
 
+function isClosableTag(props) {
+  return "onClick" in props && typeof props.onClick !== "undefined";
+}
 function Tag(props) {
-  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
-  const palette = props?.palette ?? "page";
-  const isClosable = Boolean(onClick);
-  const shape = isClosable ? "pill" : initShape;
-  const closableStyles = isClosable ? closableCss : "";
-  const { icons } = cerberus.useCerberusContext();
-  const { close: Close } = icons;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    factory.ark.span,
-    {
-      ...nativeProps,
-      className: css.cx(
-        nativeProps.className,
-        recipes.tag({
-          gradient,
-          palette,
-          shape,
-          usage
-        }),
-        closableStyles
-      ),
-      children: [
-        props.children,
-        /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: isClosable, children: /* @__PURE__ */ jsxRuntime.jsx(
-          button.IconButton,
-          {
-            ariaLabel: "Close",
-            onClick,
-            palette: "action",
-            usage: "filled",
-            size: "sm",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Close, {})
-          }
-        ) })
-      ]
-    }
-  );
+  const { children } = props;
+  if (isClosableTag(props)) {
+    const { onClick, ...rootProps2 } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(closable.ClosableTag, { onClick, ...rootProps2, children });
+  }
+  const rootProps = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(primitives.TagRoot, { "data-palette": rootProps.palette ?? "page", ...rootProps, children });
 }
-const closableCss = css.css({
-  bgColor: "action.bg.active",
-  color: "action.text.initial",
-  paddingInlineEnd: "0"
-});
 
 exports.Tag = Tag;

package/dist/components/tag/tag.d.cts

@@ -1,49 +1,10 @@
-import { HTMLArkProps } from '@ark-ui/react/factory';
-import { MouseEventHandler, PropsWithChildren } from 'react';
-import { TagVariantProps } from 'styled-system/recipes';
-/**
- * This module contains the tag component.
- * @module
- */
-export type StaticTagProps = HTMLArkProps<'span'> & TagVariantProps & {
-    /**
-     * The action to be performed when the tag is clicked. Not available when
-     * the palette or gradient props are provided.
-     */
-    onClick?: never;
-};
-export type ClickableTagProps = HTMLArkProps<'span'> & {
-    /**
-     * The gradient to apply to the tag. Not available when the onClick prop is
-     * provided.
-     */
-    gradient?: never;
-    /**
-     * The palette to use for the tag. Not available when the onClick prop is
-     * provided.
-     */
-    palette?: never;
-    /**
-     * The action to be performed when the tag is clicked.
-     */
-    onClick: MouseEventHandler<HTMLSpanElement>;
-    /**
-     * The shape of the tag. Not available when the onClick prop is provided.
-     * @type 'pill' | 'rounded'
-     * @default 'pill'
-     */
-    shape?: never;
-    /**
-     * The usage of the tag. Not available when the onClick prop is provided.
-     * @type 'filled' | 'outlined'
-     * @default 'filled'
-     */
-    usage?: never;
-};
-export type TagProps = StaticTagProps | ClickableTagProps;
+import { PropsWithChildren } from 'react';
+import { TagRootProps } from './primitives';
+import { ClosableTagProps } from './closable';
+export type TagProps = TagRootProps | ClosableTagProps;
 /**
  * The Tag component is used to display a meta descriptions.
- * @see https://cerberus.digitalu.design/react/tag
+ * @see https://cerberus.digitalu.design/docs/components/tag
  * @example
  * ```tsx
  * <Tag>Tag</Tag>

package/dist/components/tag/tag.d.ts

@@ -1,49 +1,10 @@
-import { HTMLArkProps } from '@ark-ui/react/factory';
-import { MouseEventHandler, PropsWithChildren } from 'react';
-import { TagVariantProps } from 'styled-system/recipes';
-/**
- * This module contains the tag component.
- * @module
- */
-export type StaticTagProps = HTMLArkProps<'span'> & TagVariantProps & {
-    /**
-     * The action to be performed when the tag is clicked. Not available when
-     * the palette or gradient props are provided.
-     */
-    onClick?: never;
-};
-export type ClickableTagProps = HTMLArkProps<'span'> & {
-    /**
-     * The gradient to apply to the tag. Not available when the onClick prop is
-     * provided.
-     */
-    gradient?: never;
-    /**
-     * The palette to use for the tag. Not available when the onClick prop is
-     * provided.
-     */
-    palette?: never;
-    /**
-     * The action to be performed when the tag is clicked.
-     */
-    onClick: MouseEventHandler<HTMLSpanElement>;
-    /**
-     * The shape of the tag. Not available when the onClick prop is provided.
-     * @type 'pill' | 'rounded'
-     * @default 'pill'
-     */
-    shape?: never;
-    /**
-     * The usage of the tag. Not available when the onClick prop is provided.
-     * @type 'filled' | 'outlined'
-     * @default 'filled'
-     */
-    usage?: never;
-};
-export type TagProps = StaticTagProps | ClickableTagProps;
+import { PropsWithChildren } from 'react';
+import { TagRootProps } from './primitives';
+import { ClosableTagProps } from './closable';
+export type TagProps = TagRootProps | ClosableTagProps;
 /**
  * The Tag component is used to display a meta descriptions.
- * @see https://cerberus.digitalu.design/react/tag
+ * @see https://cerberus.digitalu.design/docs/components/tag
  * @example
  * ```tsx
  * <Tag>Tag</Tag>

package/dist/components/tag/tag.js

@@ -1,54 +1,18 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ark } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/factory.js';
-import { cx, css } from 'styled-system/css';
-import { tag } from 'styled-system/recipes';
-import { useCerberusContext } from '../../context/cerberus.js';
-import { Show } from '../show/show.js';
-import { IconButton } from '../icon-button/button.js';
+import { jsx } from 'react/jsx-runtime';
+import { TagRoot } from './primitives.js';
+import { ClosableTag } from './closable.js';
 
+function isClosableTag(props) {
+  return "onClick" in props && typeof props.onClick !== "undefined";
+}
 function Tag(props) {
-  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
-  const palette = props?.palette ?? "page";
-  const isClosable = Boolean(onClick);
-  const shape = isClosable ? "pill" : initShape;
-  const closableStyles = isClosable ? closableCss : "";
-  const { icons } = useCerberusContext();
-  const { close: Close } = icons;
-  return /* @__PURE__ */ jsxs(
-    ark.span,
-    {
-      ...nativeProps,
-      className: cx(
-        nativeProps.className,
-        tag({
-          gradient,
-          palette,
-          shape,
-          usage
-        }),
-        closableStyles
-      ),
-      children: [
-        props.children,
-        /* @__PURE__ */ jsx(Show, { when: isClosable, children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            ariaLabel: "Close",
-            onClick,
-            palette: "action",
-            usage: "filled",
-            size: "sm",
-            children: /* @__PURE__ */ jsx(Close, {})
-          }
-        ) })
-      ]
-    }
-  );
+  const { children } = props;
+  if (isClosableTag(props)) {
+    const { onClick, ...rootProps2 } = props;
+    return /* @__PURE__ */ jsx(ClosableTag, { onClick, ...rootProps2, children });
+  }
+  const rootProps = props;
+  return /* @__PURE__ */ jsx(TagRoot, { "data-palette": rootProps.palette ?? "page", ...rootProps, children });
 }
-const closableCss = css({
-  bgColor: "action.bg.active",
-  color: "action.text.initial",
-  paddingInlineEnd: "0"
-});
 
 export { Tag };

package/dist/components/toggle/primitives.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const index = require('../../system/index.cjs');
-const toggleIndicator = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-indicator.cjs');
-const toggleRoot = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-root.cjs');
+const toggleIndicator = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-indicator.cjs');
+const toggleRoot = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-root.cjs');
 
 const { withNoRecipe } = index.createCerberusPrimitive();
 const ToggleRoot = withNoRecipe(toggleRoot.ToggleRoot);

package/dist/components/toggle/primitives.js

@@ -1,6 +1,6 @@
 import { createCerberusPrimitive } from '../../system/index.js';
-import { ToggleIndicator as ToggleIndicator$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-indicator.js';
-import { ToggleRoot as ToggleRoot$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-root.js';
+import { ToggleIndicator as ToggleIndicator$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-indicator.js';
+import { ToggleRoot as ToggleRoot$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/toggle/toggle-root.js';
 
 const { withNoRecipe } = createCerberusPrimitive();
 const ToggleRoot = withNoRecipe(ToggleRoot$1);

package/dist/components/tooltip/primitives.cjs

@@ -4,12 +4,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const recipes = require('styled-system/recipes');
 const index = require('../../system/index.cjs');
-const tooltipRoot = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.cjs');
-const tooltipTrigger = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.cjs');
-const tooltipPositioner = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.cjs');
-const tooltipContent = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.cjs');
-const tooltipArrow = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.cjs');
-const tooltipArrowTip = require('../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.cjs');
+const tooltipRoot = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.cjs');
+const tooltipTrigger = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.cjs');
+const tooltipPositioner = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.cjs');
+const tooltipContent = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.cjs');
+const tooltipArrow = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.cjs');
+const tooltipArrowTip = require('../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.cjs');
 
 const { withSlotRecipe } = index.createCerberusPrimitive(recipes.tooltip);
 const TooltipRoot = withSlotRecipe(tooltipRoot.TooltipRoot, "root");

package/dist/components/tooltip/primitives.js

@@ -1,11 +1,11 @@
 import { tooltip } from 'styled-system/recipes';
 import { createCerberusPrimitive } from '../../system/index.js';
-import { TooltipRoot as TooltipRoot$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.js';
-import { TooltipTrigger as TooltipTrigger$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.js';
-import { TooltipPositioner as TooltipPositioner$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.js';
-import { TooltipContent as TooltipContent$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.js';
-import { TooltipArrow as TooltipArrow$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.js';
-import { TooltipArrowTip as TooltipArrowTip$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.25.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.js';
+import { TooltipRoot as TooltipRoot$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-root.js';
+import { TooltipTrigger as TooltipTrigger$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-trigger.js';
+import { TooltipPositioner as TooltipPositioner$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-positioner.js';
+import { TooltipContent as TooltipContent$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-content.js';
+import { TooltipArrow as TooltipArrow$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow.js';
+import { TooltipArrowTip as TooltipArrowTip$1 } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/tooltip/tooltip-arrow-tip.js';
 
 const { withSlotRecipe } = createCerberusPrimitive(tooltip);
 const TooltipRoot = withSlotRecipe(TooltipRoot$1, "root");

package/dist/context/confirm-modal.cjs

@@ -66,86 +66,95 @@ function ConfirmModal(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(ConfirmModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogProvider, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(
-      dialog.Dialog,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.DialogProvider,
       {
-        size: "sm",
-        style: {
-          "--dialog-content-min-h": "auto"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          jsx.VStack,
+        lazyMount: true,
+        open,
+        onOpenChange: handleOpenChange,
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          dialog.Dialog,
           {
-            alignItems: "flex-start",
-            gap: "md",
-            justify: "space-between",
-            w: "full",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: showAvatar, children: /* @__PURE__ */ jsxRuntime.jsx(
-                jsx.HStack,
-                {
-                  alignSelf: "center",
-                  justify: "center",
-                  paddingBlockEnd: "md",
-                  w: "full",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    show.Show,
+            size: "sm",
+            style: {
+              "--dialog-content-min-h": "auto"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              jsx.VStack,
+              {
+                alignItems: "flex-start",
+                gap: "md",
+                justify: "space-between",
+                w: "full",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: showAvatar, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    jsx.HStack,
                     {
-                      when: palette === "danger",
-                      fallback: /* @__PURE__ */ jsxRuntime.jsx(
-                        avatar.Avatar,
-                        {
-                          gradient: "charon-light",
-                          fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
-                        }
-                      ),
+                      alignSelf: "center",
+                      justify: "center",
+                      paddingBlockEnd: "md",
+                      w: "full",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        avatar.Avatar,
+                        show.Show,
                         {
-                          gradient: "hades-dark",
-                          fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
+                          when: palette === "danger",
+                          fallback: /* @__PURE__ */ jsxRuntime.jsx(
+                            avatar.Avatar,
+                            {
+                              gradient: "charon-light",
+                              fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
+                            }
+                          ),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            avatar.Avatar,
+                            {
+                              gradient: "hades-dark",
+                              fallback: /* @__PURE__ */ jsxRuntime.jsx(ConfirmIcon, { size: 24 })
+                            }
+                          )
                         }
                       )
                     }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogHeading, { children: content?.heading }),
-              /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: content?.description, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { children: content?.description }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "md", pt: "md", w: "full", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    autoFocus: true,
-                    className: css.css({
-                      w: "1/2"
-                    }),
-                    name: "confirm",
-                    onClick: handleChoice,
-                    palette,
-                    value: "true",
-                    children: content?.actionText
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
-                  {
-                    className: css.css({
-                      w: "1/2"
-                    }),
-                    name: "cancel",
-                    onClick: handleChoice,
-                    usage: "outlined",
-                    value: "false",
-                    children: content?.cancelText
-                  }
-                ) })
-              ] })
-            ]
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogHeading, { children: content?.heading }),
+                  /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: content?.description, children: /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogDescription, { children: content?.description }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { gap: "md", pt: "md", w: "full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      button.Button,
+                      {
+                        autoFocus: true,
+                        className: css.css({
+                          w: "1/2"
+                        }),
+                        name: "confirm",
+                        onClick: handleChoice,
+                        palette,
+                        value: "true",
+                        children: content?.actionText
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(primitives.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.Button,
+                      {
+                        className: css.css({
+                          w: "1/2"
+                        }),
+                        name: "cancel",
+                        onClick: handleChoice,
+                        usage: "outlined",
+                        value: "false",
+                        children: content?.cancelText
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            )
           }
         )
       }
-    ) })
+    )
   ] });
 }
 function useConfirmModal() {