@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

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

@@ -25,73 +25,122 @@ __export(prompt_modal_exports, {
   usePromptModal: () => usePromptModal
 });
 module.exports = __toCommonJS(prompt_modal_exports);
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_react8 = require("@ark-ui/react");
+var import_jsx3 = require("@cerberus/styled-system/jsx");
+var import_css7 = require("@cerberus/styled-system/css");
+var import_patterns2 = require("@cerberus/styled-system/patterns");
+
+// src/components/field/primitives.tsx
+var import_field = require("@ark-ui/react/field");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
 
-// src/components/Button.tsx
+// src/components/field/status-indicator.tsx
+var import_react2 = require("@ark-ui/react");
 var import_css = require("@cerberus/styled-system/css");
 var import_recipes = require("@cerberus/styled-system/recipes");
+
+// src/context/cerberus.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button(props) {
-  const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+var CerberusContext = (0, import_react.createContext)(null);
+function useCerberusContext() {
+  const context = (0, import_react.useContext)(CerberusContext);
+  if (!context) {
+    throw new Error("useCerberus must be used within a CerberusProvider");
+  }
+  return context;
+}
+
+// src/components/field/status-indicator.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FieldStatusIndicator(props) {
+  const { fallback, ...nativeProps } = props;
+  const styles = (0, import_recipes.field)();
+  const fieldContext = (0, import_react2.useFieldContext)();
+  const { icons } = useCerberusContext();
+  const { invalid: InvalidIcon } = icons;
+  if (fieldContext.invalid) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.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, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
     {
       ...nativeProps,
-      className: (0, import_css.cx)(
-        nativeProps.className,
-        (0, import_recipes.button)({
-          palette,
-          usage,
-          shape
-        })
-      )
+      "aria-hidden": "true",
+      "data-part": "end-indicator",
+      className: (0, import_css.cx)(nativeProps.className, styles.endIndicator),
+      children: fallback
     }
   );
 }
 
-// src/context/prompt-modal.tsx
-var import_css6 = require("@cerberus/styled-system/css");
-var import_patterns3 = require("@cerberus/styled-system/patterns");
-
-// src/components/Input.tsx
-var import_recipes2 = require("@cerberus/styled-system/recipes");
+// src/components/field/start-indicator.tsx
 var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/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/context/field.tsx
-var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var FieldContext = (0, import_react.createContext)(null);
-function Field(props) {
-  const value = (0, import_react.useMemo)(
-    () => ({
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required,
-      invalid: props.invalid
-    }),
-    [props.disabled, props.readOnly, props.required, props.invalid]
+// 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)
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldContext.Provider, { value, children: props.children });
 }
-function useFieldContext() {
-  const context = (0, import_react.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
+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)" })
+  ] });
 }
-
-// src/context/cerberus.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
-function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
+function FieldInput(props) {
+  const { size, startIcon, endIcon, ...fieldProps } = props;
+  const styles = (0, import_recipes3.field)({ size });
+  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,
+      {
+        ...fieldProps,
+        ...hasStartIcon && { "data-has": "start-indicator" },
+        className: (0, import_css3.cx)(styles.input, fieldProps.className)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldStatusIndicator, { fallback: endIcon })
+  ] });
 }
+var Input = FieldInput;
 
 // src/components/Show.tsx
 var import_react3 = require("react");
@@ -104,76 +153,40 @@ function Show(props) {
   }, [condition, children, fallback]);
 }
 
-// src/components/Input.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Input(props) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = (0, import_recipes2.input)({ size });
-  const { invalid, ...fieldStates } = useFieldContext();
-  const hasEndIcon = Boolean(endIcon);
-  const { icons } = useCerberusContext();
-  const { invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "input",
-      {
-        ...nativeProps,
-        ...fieldStates,
-        ...describedBy && { "aria-describedby": describedBy },
-        ...invalid && { "aria-invalid": true },
-        "data-start-icon": Boolean(startIcon),
-        className: (0, import_css2.cx)("peer", nativeProps.className, inputStyles.input)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
-  ] });
-}
-
-// src/components/Label.tsx
-var import_recipes3 = require("@cerberus/styled-system/recipes");
-var import_css3 = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
+// src/components/button/button.tsx
+var import_react4 = require("react");
+var import_css4 = require("@cerberus/styled-system/css");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_jsx = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Label(props) {
-  const { hidden, size, ...nativeProps } = props;
-  const { required, disabled } = useFieldContext();
-  const usage = hidden ? "hidden" : "visible";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "label",
+var ButtonContext = (0, import_react4.createContext)({
+  pending: false
+});
+function Button(props) {
+  const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
+  const value = (0, import_react4.useMemo)(() => ({ pending }), [pending]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
     {
       ...nativeProps,
-      ...disabled && { "data-disabled": true },
-      className: (0, import_css3.cx)(
+      disabled: pending || nativeProps.disabled,
+      className: (0, import_css4.cx)(
         nativeProps.className,
-        (0, import_recipes3.label)({ size, usage }),
-        (0, import_patterns.hstack)({
-          justify: "space-between",
-          w: "full"
+        (0, import_recipes4.button)({
+          palette,
+          usage,
+          shape,
+          size
         })
-      ),
-      children: [
-        props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: required, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "span",
-          {
-            className: (0, import_css3.css)({
-              color: "page.text.100",
-              fontSize: "inherit"
-            }),
-            children: "(required)"
-          }
-        ) })
-      ]
+      )
     }
-  );
+  ) });
 }
 
 // src/components/Avatar.tsx
-var import_css4 = require("@cerberus/styled-system/css");
-var import_patterns2 = require("@cerberus/styled-system/patterns");
-var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_css5 = require("@cerberus/styled-system/css");
+var import_patterns = require("@cerberus/styled-system/patterns");
+var import_recipes5 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Avatar(props) {
   const {
@@ -194,10 +207,10 @@ function Avatar(props) {
     "div",
     {
       ...nativeProps,
-      className: (0, import_css4.cx)(
+      className: (0, import_css5.cx)(
         nativeProps.className,
-        (0, import_recipes4.avatar)({ gradient, size }),
-        (0, import_patterns2.circle)()
+        (0, import_recipes5.avatar)({ gradient, size }),
+        (0, import_patterns.circle)()
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Show,
@@ -231,7 +244,7 @@ function Avatar(props) {
                 "img",
                 {
                   alt: props.ariaLabel,
-                  className: (0, import_css4.css)({
+                  className: (0, import_css5.css)({
                     h: "full",
                     objectFit: "cover",
                     w: "full"
@@ -263,105 +276,103 @@ var iconSizeMap = {
 };
 
 // src/components/Text.tsx
-var import_jsx = require("@cerberus/styled-system/jsx");
+var import_jsx2 = require("@cerberus/styled-system/jsx");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
   switch (as) {
     case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H1, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H1, { ...pandaJSXProps });
     case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H2, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H2, { ...pandaJSXProps });
     case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H3, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H3, { ...pandaJSXProps });
     case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H4, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H4, { ...pandaJSXProps });
     case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H5, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H5, { ...pandaJSXProps });
     case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.H6, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.H6, { ...pandaJSXProps });
     case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Strong, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Strong, { ...pandaJSXProps });
     case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Em, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Em, { ...pandaJSXProps });
     case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Small, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Small, { ...pandaJSXProps });
     case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.Span, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.Span, { ...pandaJSXProps });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx.P, { ...pandaJSXProps });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx2.P, { ...pandaJSXProps });
   }
 }
 
 // src/components/Dialog.tsx
-var import_react5 = require("@ark-ui/react");
-var import_recipes5 = require("@cerberus/styled-system/recipes");
+var import_react6 = require("@ark-ui/react");
+var import_recipes6 = require("@cerberus/styled-system/recipes");
 
 // src/components/Portal.tsx
-var import_react4 = require("@ark-ui/react");
-var Portal = import_react4.Portal;
+var import_react5 = require("@ark-ui/react");
+var Portal = import_react5.Portal;
 
 // src/components/Dialog.tsx
-var import_css5 = require("@cerberus/styled-system/css");
+var import_css6 = require("@cerberus/styled-system/css");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DialogProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.Dialog.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.Dialog.Root, { ...props });
 }
 function Dialog(props) {
   const { size, ...contentProps } = props;
-  const styles = (0, import_recipes5.dialog)({ size });
+  const styles = (0, import_recipes6.dialog)({ size });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Portal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogBackdrop, { className: styles.backdrop }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogPositioner, { className: styles.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DialogContent, { className: styles.content, ...contentProps }) })
   ] });
 }
 function DialogHeading(props) {
-  const styles = (0, import_recipes5.dialog)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react5.Dialog.Title, { ...props, className: (0, import_css5.cx)(props.className, styles.title) });
+  const styles = (0, import_recipes6.dialog)();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react6.Dialog.Title, { ...props, className: (0, import_css6.cx)(props.className, styles.title) });
 }
 function DialogDescription(props) {
-  const styles = (0, import_recipes5.dialog)();
+  const styles = (0, import_recipes6.dialog)();
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react5.Dialog.Description,
+    import_react6.Dialog.Description,
     {
       ...props,
-      className: (0, import_css5.cx)(props.className, styles.description)
+      className: (0, import_css6.cx)(props.className, styles.description)
     }
   );
 }
-var DialogTrigger = import_react5.Dialog.Trigger;
-var DialogCloseTrigger = import_react5.Dialog.CloseTrigger;
-var DialogBackdrop = import_react5.Dialog.Backdrop;
-var DialogPositioner = import_react5.Dialog.Positioner;
-var DialogContent = import_react5.Dialog.Content;
+var DialogTrigger = import_react6.Dialog.Trigger;
+var DialogCloseTrigger = import_react6.Dialog.CloseTrigger;
+var DialogBackdrop = import_react6.Dialog.Backdrop;
+var DialogPositioner = import_react6.Dialog.Positioner;
+var DialogContent = import_react6.Dialog.Content;
 
 // src/context/prompt-modal.tsx
-var import_jsx2 = require("@cerberus/styled-system/jsx");
-var import_react7 = require("@ark-ui/react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var PromptModalContext = (0, import_react6.createContext)(null);
+var PromptModalContext = (0, import_react7.createContext)(null);
 function PromptModal(props) {
-  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 resolveRef = (0, import_react7.useRef)(null);
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [content, setContent] = (0, import_react7.useState)(null);
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
   const { icons } = useCerberusContext();
   const { promptModal: PromptIcon } = icons;
-  const isValid = (0, import_react6.useMemo)(
+  const isValid = (0, import_react7.useMemo)(
     () => inputValue === (content == null ? void 0 : content.key),
     [inputValue, content]
   );
-  const palette = (0, import_react6.useMemo)(
+  const palette = (0, import_react7.useMemo)(
     () => (content == null ? void 0 : content.kind) === "destructive" ? "danger" : "action",
     [content]
   );
-  const handleChange = (0, import_react6.useCallback)(
+  const handleChange = (0, import_react7.useCallback)(
     (e) => {
       setInputValue(e.currentTarget.value);
     },
     [content]
   );
-  const handleChoice = (0, import_react6.useCallback)(
+  const handleChoice = (0, import_react7.useCallback)(
     (e) => {
       var _a;
       const target = e.currentTarget;
@@ -372,7 +383,7 @@ function PromptModal(props) {
     },
     [inputValue, setOpen]
   );
-  const handleShow = (0, import_react6.useCallback)(
+  const handleShow = (0, import_react7.useCallback)(
     (options) => {
       return new Promise((resolve) => {
         setContent({ ...options, kind: options.kind || "non-destructive" });
@@ -382,7 +393,7 @@ function PromptModal(props) {
     },
     [setOpen]
   );
-  const value = (0, import_react6.useMemo)(
+  const value = (0, import_react7.useMemo)(
     () => ({
       show: handleShow
     }),
@@ -390,10 +401,10 @@ function PromptModal(props) {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(PromptModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx3.VStack, { gap: "xl", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx3.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          import_jsx2.HStack,
+          import_jsx3.HStack,
           {
             alignSelf: "center",
             justify: "center",
@@ -429,47 +440,48 @@ function PromptModal(props) {
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        import_jsx2.VStack,
+        import_jsx3.VStack,
         {
           alignItems: "flex-start",
           marginBlockStart: "md",
           marginBlockEnd: "lg",
           w: "full",
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              Label,
-              {
-                className: (0, import_patterns3.hstack)({
-                  gap: "xs",
-                  justify: "flex-start !important"
-                }),
-                htmlFor: "confirm",
-                size: "md",
-                children: [
-                  "Type",
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
-                  "to confirm"
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Input,
-              {
-                id: "confirm",
-                name: "confirm",
-                onChange: handleChange,
-                type: "text"
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            FieldRoot,
+            {
+              ids: {
+                control: "confirm"
+              },
+              invalid: !isValid,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  FieldLabel,
+                  {
+                    className: (0, import_patterns2.hstack)({
+                      gap: "xs",
+                      justify: "flex-start !important",
+                      marginBlockEnd: "xs",
+                      textStyle: "label-md"
+                    }),
+                    children: [
+                      "Type",
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { as: "strong", textTransform: "uppercase", children: content == null ? void 0 : content.key }),
+                      "to confirm"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Input, { name: "confirm", onChange: handleChange, type: "text" })
+              ]
+            }
+          )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx2.HStack, { gap: "md", justify: "stretch", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx3.HStack, { gap: "md", justify: "stretch", w: "full", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Button,
           {
             autoFocus: true,
-            className: (0, import_css6.css)({
+            className: (0, import_css7.css)({
               w: "1/2"
             }),
             disabled: !isValid,
@@ -480,10 +492,10 @@ function PromptModal(props) {
             children: content == null ? void 0 : content.actionText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react8.DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Button,
           {
-            className: (0, import_css6.css)({
+            className: (0, import_css7.css)({
               w: "1/2"
             }),
             name: "cancel",
@@ -498,7 +510,7 @@ function PromptModal(props) {
   ] });
 }
 function usePromptModal() {
-  const context = (0, import_react6.useContext)(PromptModalContext);
+  const context = (0, import_react7.useContext)(PromptModalContext);
   if (context === null) {
     throw new Error("usePromptModal must be used within a PromptModal Provider");
   }