@cerberus-design/react 0.18.3 → 0.19.0

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

@@ -4,6 +4,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/context/prompt-modal.tsx
 var prompt_modal_exports = {};
@@ -25,10 +27,10 @@ __export(prompt_modal_exports, {
   usePromptModal: () => usePromptModal
 });
 module.exports = __toCommonJS(prompt_modal_exports);
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_dialog2 = require("@ark-ui/react/dialog");
 var import_jsx3 = require("styled-system/jsx");
-var import_css7 = require("styled-system/css");
+var import_css4 = require("styled-system/css");
 var import_patterns = require("styled-system/patterns");
 
 // src/utils/index.ts
@@ -51,19 +53,159 @@ function splitProps(props, ...keyGroups) {
   return [...result, rest];
 }
 
+// src/components/show/show.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Show(props) {
+  const { when, children, fallback } = props;
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: fallback });
+  }
+  return null;
+}
+
 // src/components/field/primitives.tsx
-var import_field = require("@ark-ui/react/field");
-var import_css3 = require("styled-system/css");
+var import_field2 = require("@ark-ui/react/field");
+var import_react3 = require("@ark-ui/react");
 var import_recipes3 = require("styled-system/recipes");
 
-// src/components/field/status-indicator.tsx
-var import_react2 = require("@ark-ui/react");
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
+    }
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
+    }
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
+}
+
+// src/components/field/start-indicator.tsx
+var import_css2 = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FieldStartIndicator(props) {
+  const styles = (0, import_recipes.field)();
+  if (!props.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      ...props,
+      "data-part": "start-indicator",
+      className: (0, import_css2.cx)(props.className, styles.startIndicator)
+    }
+  );
+}
+
+// src/components/field/status-indicator.tsx
+var import_react2 = require("@ark-ui/react");
+var import_css3 = require("styled-system/css");
+var import_recipes2 = require("styled-system/recipes");
 
 // src/context/cerberus.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CerberusContext = (0, import_react.createContext)(null);
 function useCerberusContext() {
   const context = (0, import_react.useContext)(CerberusContext);
@@ -74,168 +216,137 @@ function useCerberusContext() {
 }
 
 // src/components/field/status-indicator.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function FieldStatusIndicator(props) {
   const { fallback, ...nativeProps } = props;
-  const styles = (0, import_recipes.field)();
+  const styles = (0, import_recipes2.field)();
   const fieldContext = (0, import_react2.useFieldContext)();
   const { icons } = useCerberusContext();
   const { invalid: InvalidIcon } = icons;
   if (fieldContext.invalid) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "span",
       {
         ...nativeProps,
         "aria-hidden": "true",
         "data-invalid": true,
-        className: (0, import_css.cx)(nativeProps.className, styles.statusIndicator),
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InvalidIcon, {})
+        className: (0, import_css3.cx)(nativeProps.className, styles.statusIndicator),
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(InvalidIcon, {})
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "span",
     {
       ...nativeProps,
       "aria-hidden": "true",
       "data-part": "end-indicator",
-      className: (0, import_css.cx)(nativeProps.className, styles.endIndicator),
+      className: (0, import_css3.cx)(nativeProps.className, styles.endIndicator),
       children: fallback
     }
   );
 }
 
-// src/components/field/start-indicator.tsx
-var import_css2 = require("styled-system/css");
-var import_recipes2 = require("styled-system/recipes");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function FieldStartIndicator(props) {
-  const styles = (0, import_recipes2.field)();
-  if (!props.children) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    "span",
-    {
-      ...props,
-      "data-part": "start-indicator",
-      className: (0, import_css2.cx)(props.className, styles.startIndicator)
-    }
-  );
-}
-
-// src/components/field/primitives.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function FieldRoot(props) {
-  const { size, ...fieldProps } = props;
-  const styles = (0, import_recipes3.field)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_field.Field.Root,
-    {
-      ...fieldProps,
-      className: (0, import_css3.cx)(styles.root, fieldProps.className)
-    }
-  );
-}
-function FieldLabel(props) {
-  const { children, ...nativeProps } = props;
-  const styles = (0, import_recipes3.field)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_field.Field.Label, { ...nativeProps, className: (0, import_css3.cx)(styles.label, props.className), children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_field.Field.RequiredIndicator, { children: "(required)" })
-  ] });
-}
-function FieldInput(props) {
-  const { size, startIcon, endIcon, ...fieldProps } = props;
-  const styles = (0, import_recipes3.field)({ size });
+// src/components/field/input.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function CerberusFieldInput(props) {
+  const [{ startIcon, endIcon }, fieldProps] = splitProps(props, [
+    "startIcon",
+    "endIcon"
+  ]);
   const hasStartIcon = Boolean(startIcon);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.inputRoot, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldStartIndicator, { children: startIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_field.Field.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FieldInputRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldStartIndicator, { children: startIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      FieldInput,
       {
         ...fieldProps,
-        ...hasStartIcon && { "data-has": "start-indicator" },
-        className: (0, import_css3.cx)(styles.input, fieldProps.className)
+        ...hasStartIcon && { "data-has": "start-indicator" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldStatusIndicator, { fallback: endIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldStatusIndicator, { fallback: endIcon })
   ] });
 }
-var Input = FieldInput;
 
-// src/components/Show.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function Show(props) {
-  const { when, children, fallback } = props;
-  if (when) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
-  }
-  if (fallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: fallback });
-  }
-  return null;
+// src/components/field/error-text.tsx
+var import_field = require("@ark-ui/react/field");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CerberusFieldErrorText(props) {
+  if (!props.children) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_field.Field.ErrorText, { ...props });
 }
 
+// src/components/field/primitives.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes3.field);
+var FieldRoot = withSlotRecipe(import_field2.Field.Root, "root");
+function FieldLabelEl(props) {
+  const { children, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_field2.Field.Label, { ...nativeProps, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_field2.Field.RequiredIndicator, { children: "(required)" })
+  ] });
+}
+var FieldLabel = withSlotRecipe(FieldLabelEl, "label");
+function FieldRequiredIndicatorEl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_field2.Field.RequiredIndicator, { ...props, children: "(required)" });
+}
+var FieldRequiredIndicator = withNoRecipe(
+  FieldRequiredIndicatorEl
+);
+var FieldInputRoot = withSlotRecipe(
+  import_react3.ark.div,
+  "inputRoot"
+);
+var FieldInput = withSlotRecipe(import_field2.Field.Input, "input");
+var FieldHelperText = withSlotRecipe(
+  import_field2.Field.HelperText,
+  "helperText"
+);
+var FieldErrorText = withSlotRecipe(
+  CerberusFieldErrorText,
+  "errorText"
+);
+var FieldTextarea = withSlotRecipe(
+  import_field2.Field.Textarea,
+  "textarea"
+);
+var Input = CerberusFieldInput;
+
 // src/components/button/button.tsx
+var import_react4 = require("react");
+var import_jsx = require("styled-system/jsx");
+
+// src/components/button/primitives.tsx
 var import_factory = require("@ark-ui/react/factory");
-var import_react3 = require("react");
-var import_css4 = require("styled-system/css");
 var import_recipes4 = require("styled-system/recipes");
-var import_jsx = require("styled-system/jsx");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ButtonContext = (0, import_react3.createContext)({
+var { withRecipe } = createCerberusPrimitive(import_recipes4.button);
+var ButtonRoot = withRecipe(import_factory.ark.button);
+
+// src/components/button/button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ButtonContext = (0, import_react4.createContext)({
   pending: false
 });
 function Button(props) {
-  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
-  const value = (0, import_react3.useMemo)(() => ({ pending }), [pending]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_factory.ark.button,
-    {
-      ...nativeProps,
-      disabled: pending || nativeProps.disabled,
-      className: (0, import_css4.cx)(
-        nativeProps.className,
-        (0, import_recipes4.button)({
-          palette,
-          usage,
-          shape,
-          size
-        })
-      )
-    }
-  ) });
+  const { pending = false, ...nativeProps } = props;
+  const value = (0, import_react4.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ButtonRoot, { ...nativeProps, disabled: pending || nativeProps.disabled }) });
 }
 
 // src/components/avatar/primitives.tsx
 var import_avatar = require("@ark-ui/react/avatar");
 var import_recipes5 = require("styled-system/recipes");
-var import_css5 = require("styled-system/css");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function AvatarRoot(props) {
-  const { gradient, shape, size, ...rootProps } = props;
-  const styles = (0, import_recipes5.avatar)({ gradient, shape, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_avatar.Avatar.Root,
-    {
-      ...rootProps,
-      className: (0, import_css5.cx)(styles.root, rootProps.className)
-    }
-  );
-}
-function AvatarImage(props) {
-  const styles = (0, import_recipes5.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_avatar.Avatar.Image, { ...props, className: (0, import_css5.cx)(styles.image, props.className) });
-}
-function AvatarFallback(props) {
-  const styles = (0, import_recipes5.avatar)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_avatar.Avatar.Fallback,
-    {
-      ...props,
-      className: (0, import_css5.cx)(styles.fallback, props.className)
-    }
-  );
-}
+var { withSlotRecipe: withSlotRecipe2 } = createCerberusPrimitive(import_recipes5.avatar);
+var AvatarRoot = withSlotRecipe2(import_avatar.Avatar.Root, "root");
+var AvatarImage = withSlotRecipe2(
+  import_avatar.Avatar.Image,
+  "image"
+);
+var AvatarFallback = withSlotRecipe2(
+  import_avatar.Avatar.Fallback,
+  "fallback"
+);
 
 // src/components/avatar/parts.ts
 var AvatarParts = {
@@ -245,118 +356,71 @@ var AvatarParts = {
 };
 
 // src/components/avatar/avatar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Avatar2(props) {
   const [imgProps, { fallback, children }, rootProps] = splitProps(
     props,
     ["alt", "src"],
     ["fallback", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Show,
     {
       when: children,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Fallback, { children: fallback }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AvatarParts.Image, { ...imgProps })
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Fallback, { children: fallback }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarParts.Image, { ...imgProps })
       ] }),
       children
     }
   ) });
 }
 
-// src/components/Text.tsx
+// src/components/text/text.tsx
 var import_jsx2 = require("styled-system/jsx");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
-  switch (as) {
-    case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H1, { ...pandaJSXProps });
-    case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H2, { ...pandaJSXProps });
-    case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H3, { ...pandaJSXProps });
-    case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H4, { ...pandaJSXProps });
-    case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H5, { ...pandaJSXProps });
-    case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.H6, { ...pandaJSXProps });
-    case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.Strong, { ...pandaJSXProps });
-    case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.Em, { ...pandaJSXProps });
-    case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.Small, { ...pandaJSXProps });
-    case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.Span, { ...pandaJSXProps });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx2.P, { ...pandaJSXProps });
+  const cache = {
+    h1: import_jsx2.H1,
+    h2: import_jsx2.H2,
+    h3: import_jsx2.H3,
+    h4: import_jsx2.H4,
+    h5: import_jsx2.H5,
+    h6: import_jsx2.H6,
+    strong: import_jsx2.Strong,
+    em: import_jsx2.Em,
+    small: import_jsx2.Small,
+    span: import_jsx2.Span,
+    p: import_jsx2.P
+  };
+  if (as in cache) {
+    const Component = cache[as];
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Component, { ...pandaJSXProps });
   }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx2.P, { ...pandaJSXProps });
 }
 
 // src/components/dialog/primitives.tsx
 var import_dialog = require("@ark-ui/react/dialog");
-var import_css6 = require("styled-system/css");
 var import_recipes6 = require("styled-system/recipes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function DialogRoot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_dialog.Dialog.Root, { ...props });
-}
-function DialogBackdrop(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Backdrop,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.backdrop, props.className)
-    }
-  );
-}
-function DialogPositioner(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Positioner,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function DialogContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes6.dialog)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Content,
-    {
-      ...contentProps,
-      className: (0, import_css6.cx)(styles.content, contentProps.className)
-    }
-  );
-}
-function DialogHeading(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_dialog.Dialog.Title, { ...props, className: (0, import_css6.cx)(styles.title, props.className) });
-}
-function DialogDescription(props) {
-  const styles = (0, import_recipes6.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_dialog.Dialog.Description,
-    {
-      ...props,
-      className: (0, import_css6.cx)(styles.description, props.className)
-    }
-  );
-}
+var { withSlotRecipe: withSlotRecipe3, withNoRecipe: withNoRecipe2 } = createCerberusPrimitive(import_recipes6.dialog);
+var DialogRoot = withNoRecipe2(import_dialog.Dialog.Root);
 var DialogProvider = DialogRoot;
+var DialogTrigger = withSlotRecipe3(import_dialog.Dialog.Trigger, "trigger");
+var DialogBackdrop = withSlotRecipe3(import_dialog.Dialog.Backdrop, "backdrop");
+var DialogPositioner = withSlotRecipe3(import_dialog.Dialog.Positioner, "positioner");
+var DialogContent = withSlotRecipe3(import_dialog.Dialog.Content, "content");
+var DialogHeading = withSlotRecipe3(import_dialog.Dialog.Title, "title");
+var DialogDescription = withSlotRecipe3(
+  import_dialog.Dialog.Description,
+  "description"
+);
+var DialogCloseTrigger = withNoRecipe2(import_dialog.Dialog.CloseTrigger);
 
-// src/components/Portal.tsx
-var import_react4 = require("@ark-ui/react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react4.Portal, { ...props });
-}
+// src/components/portal/portal.tsx
+var import_react5 = require("@ark-ui/react");
+var Portal = import_react5.Portal;
 
 // src/components/dialog/dialog.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -369,29 +433,26 @@ function Dialog2(props) {
 
 // src/context/prompt-modal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react5.createContext)(null);
+var PromptModalContext = (0, import_react6.createContext)(null);
 function PromptModal(props) {
-  const resolveRef = (0, import_react5.useRef)(null);
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [content, setContent] = (0, import_react5.useState)(null);
-  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const resolveRef = (0, import_react6.useRef)(null);
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [content, setContent] = (0, import_react6.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react6.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react5.useMemo)(
+  const isValid = (0, import_react6.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react5.useMemo)(
+  const palette = (0, import_react6.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react5.useCallback)(
-    (e) => {
-      setInputValue(e.currentTarget.value);
-    },
-    [content]
-  );
-  const handleChoice = (0, import_react5.useCallback)(
+  const handleChange = (0, import_react6.useCallback)((e) => {
+    setInputValue(e.currentTarget.value);
+  }, []);
+  const handleChoice = (0, import_react6.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -402,7 +463,7 @@ function PromptModal(props) {
     },
     [inputValue, setOpen]
   );
-  const handleShow = (0, import_react5.useCallback)(
+  const handleShow = (0, import_react6.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -412,7 +473,7 @@ function PromptModal(props) {
     },
     [setOpen]
   );
-  const value = (0, import_react5.useMemo)(
+  const value = (0, import_react6.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -420,112 +481,120 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Dialog2, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_jsx3.HStack,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Dialog2,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_jsx3.VStack,
           {
-            alignSelf: "center",
-            justify: "center",
-            paddingBlockEnd: "md",
+            alignItems: "flex-start",
+            h: "full",
+            justify: "space-between",
             w: "full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              Show,
-              {
-                when: palette === "danger",
-                fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  Avatar2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                import_jsx3.HStack,
+                {
+                  alignSelf: "center",
+                  justify: "center",
+                  paddingBlockEnd: "md",
+                  w: "full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    Show,
+                    {
+                      when: palette === "danger",
+                      fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        Avatar2,
+                        {
+                          gradient: "charon-light",
+                          fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
+                        }
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        Avatar2,
+                        {
+                          gradient: "hades-dark",
+                          fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                import_jsx3.VStack,
+                {
+                  alignItems: "flex-start",
+                  marginBlockStart: "md",
+                  marginBlockEnd: "lg",
+                  w: "full",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(FieldRoot, { invalid: !isValid, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      FieldLabel,
+                      {
+                        className: (0, import_patterns.hstack)({
+                          gap: "xs",
+                          justify: "flex-start",
+                          marginBlockEnd: "xs",
+                          textStyle: "label-md",
+                          w: "initial"
+                        }),
+                        children: [
+                          "Type",
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
+                          "to confirm"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  Button,
                   {
-                    gradient: "charon-light",
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
+                    autoFocus: true,
+                    className: (0, import_css4.css)({
+                      w: "1/2"
+                    }),
+                    disabled: !isValid,
+                    name: "confirm",
+                    onClick: handleChoice,
+                    palette,
+                    value: "true",
+                    children: content == null ? void 0 : content.actionText
                   }
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  Avatar2,
-                  {
-                    gradient: "hades-dark",
-                    fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PromptIcon, { size: 24 })
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_jsx3.VStack,
-        {
-          alignItems: "flex-start",
-          marginBlockStart: "md",
-          marginBlockEnd: "lg",
-          w: "full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            FieldRoot,
-            {
-              ids: {
-                control: "confirm"
-              },
-              invalid: !isValid,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                  FieldLabel,
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog2.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  Button,
                   {
-                    className: (0, import_patterns.hstack)({
-                      gap: "xs",
-                      justify: "flex-start !important",
-                      marginBlockEnd: "xs",
-                      textStyle: "label-md"
+                    className: (0, import_css4.css)({
+                      w: "1/2"
                     }),
-                    children: [
-                      "Type",
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
-                      "to confirm"
-                    ]
+                    name: "cancel",
+                    onClick: handleChoice,
+                    usage: "outlined",
+                    value: "false",
+                    children: content == null ? void 0 : content.cancelText
                   }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Button,
-          {
-            autoFocus: true,
-            className: (0, import_css7.css)({
-              w: "1/2"
-            }),
-            disabled: !isValid,
-            name: "confirm",
-            onClick: handleChoice,
-            palette,
-            value: "true",
-            children: content == null ? void 0 : content.actionText
+                ) })
+              ] })
+            ]
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_dialog2.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          Button,
-          {
-            className: (0, import_css7.css)({
-              w: "1/2"
-            }),
-            name: "cancel",
-            onClick: handleChoice,
-            usage: "outlined",
-            value: "false",
-            children: content == null ? void 0 : content.cancelText
-          }
-        ) })
-      ] })
-    ] }) }) })
+        )
+      }
+    ) })
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react5.useContext)(PromptModalContext);
+  const context = (0, import_react6.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }