@cerberus-design/react 0.18.3 → 0.18.4

package/build/modern/chunk-2U2JYN3D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/helper-text.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { FieldHelperText } from './primitives'\n\ninterface HelperTextProps {\n  invalid?: boolean\n}\n\n/**\n * The HelperText component is an abstraction for hiding the helper text\n * when the field is invalid. Ark UI assumes people want the helper text\n * to always be visible, so this is a workaround for that.\n */\nexport function HelperText(props: PropsWithChildren<HelperTextProps>) {\n  if (props.invalid) return null\n  return (\n    <FieldHelperText data-has-content={Boolean(props.children)}>\n      {props.children}\n    </FieldHelperText>\n  )\n}\n"],"mappings":";;;;;AAeI;AAHG,SAAS,WAAW,OAA2C;AACpE,MAAI,MAAM,QAAS,QAAO;AAC1B,SACE,oBAAC,mBAAgB,oBAAkB,QAAQ,MAAM,QAAQ,GACtD,gBAAM,UACT;AAEJ;","names":[]}

package/build/modern/chunk-ADI4DOEW.js

@@ -0,0 +1,17 @@
+// src/components/date-picker/index.ts
+import { parseDate } from "@ark-ui/react/date-picker";
+import {
+  CalendarDate,
+  today,
+  getLocalTimeZone,
+  DateFormatter
+} from "@internationalized/date";
+
+export {
+  parseDate,
+  CalendarDate,
+  today,
+  getLocalTimeZone,
+  DateFormatter
+};
+//# sourceMappingURL=chunk-ADI4DOEW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/index.ts"],"sourcesContent":["export * from './parts'\nexport * from './primitives'\nexport * from './date-picker'\nexport * from './input'\nexport * from './range-input'\nexport * from './calendar'\n\n// external dependencies\n\nexport { parseDate, type DateValue } from '@ark-ui/react/date-picker'\nexport {\n  CalendarDate,\n  today,\n  getLocalTimeZone,\n  DateFormatter,\n} from '@internationalized/date'\n"],"mappings":";AASA,SAAS,iBAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}

package/build/modern/{chunk-GBCF6DOS.js → chunk-AN65HXHS.js}

@@ -1,6 +1,6 @@
 import {
   FieldLabel
-} from "./chunk-WEL43I6Y.js";
+} from "./chunk-OK3VJFQL.js";
 
 // src/components/deprecated/Label.tsx
 import { label } from "styled-system/recipes";
@@ -20,4 +20,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-GBCF6DOS.js.map
+//# sourceMappingURL=chunk-AN65HXHS.js.map

package/build/modern/{chunk-Z2KBUTCO.js → chunk-BMDNCJUB.js}

@@ -2,7 +2,7 @@ import {
   DialogBackdrop,
   DialogContent,
   DialogPositioner
-} from "./chunk-SSR3CWJZ.js";
+} from "./chunk-LUGOJGMO.js";
 import {
   Portal
 } from "./chunk-53YVHIGJ.js";
@@ -19,4 +19,4 @@ function Dialog(props) {
 export {
   Dialog
 };
-//# sourceMappingURL=chunk-Z2KBUTCO.js.map
+//# sourceMappingURL=chunk-BMDNCJUB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size' | 'style'>,\n    DialogVariantProps,\n    WithCss {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n"],"mappings":";;;;;;;;;;AAmCI,SACE,KADF;AAFG,SAAS,OAAO,OAAoB;AACzC,SACE,qBAAC,UACC;AAAA,wBAAC,kBAAe;AAAA,IAChB,oBAAC,oBACC,8BAAC,iBAAe,GAAG,OAAO,GAC5B;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-F3XFJHGR.js → chunk-D7PY357P.js}

@@ -1,6 +1,6 @@
 import {
   DialogCloseTrigger
-} from "./chunk-SSR3CWJZ.js";
+} from "./chunk-LUGOJGMO.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -39,4 +39,4 @@ function DialogCloseIconTrigger(props) {
 export {
   DialogCloseIconTrigger
 };
-//# sourceMappingURL=chunk-F3XFJHGR.js.map
+//# sourceMappingURL=chunk-D7PY357P.js.map

package/build/modern/{chunk-ILROS7ST.js → chunk-DVCTN3GN.js}

@@ -6,7 +6,7 @@ import {
   FieldRequiredIndicator,
   FieldRoot,
   FieldTextarea
-} from "./chunk-WEL43I6Y.js";
+} from "./chunk-OK3VJFQL.js";
 import {
   FieldStartIndicator
 } from "./chunk-EMDNETC7.js";
@@ -30,4 +30,4 @@ var FieldParts = {
 export {
   FieldParts
 };
-//# sourceMappingURL=chunk-ILROS7ST.js.map
+//# sourceMappingURL=chunk-DVCTN3GN.js.map

package/build/modern/{chunk-NP73HOHI.js → chunk-GJBUGESH.js}

@@ -14,8 +14,8 @@ function DatePickerInput(props) {
       DatePickerParts.Input,
       {
         ...props,
-        placeholder: props.placeholder ?? "DD MMM YYYY",
-        maxLength: 11
+        maxLength: 11,
+        placeholder: props.placeholder ?? "DD MMM YYYY"
       }
     )
   ] });
@@ -24,4 +24,4 @@ function DatePickerInput(props) {
 export {
   DatePickerInput
 };
-//# sourceMappingURL=chunk-NP73HOHI.js.map
+//# sourceMappingURL=chunk-GJBUGESH.js.map

package/build/modern/{chunk-NP73HOHI.js.map → chunk-GJBUGESH.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-picker/input.tsx"],"sourcesContent":["import type { DatePickerInputProps } from '@ark-ui/react/date-picker'\nimport { DatePickerTrigger } from './trigger'\nimport { DatePickerParts } from './parts'\n\n/**\n * This module contains an abstraction of the DatePickerInputEl primitive.\n * @module 'date-picker/input'\n */\n\n/**\n * An abstraction of the DatePicker input that wraps the input and the\n * triggers to open the DatePicker and clear the value.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  return (\n    <DatePickerParts.Control>\n      <DatePickerTrigger />\n      <DatePickerParts.Input\n        {...props}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </DatePickerParts.Control>\n  )\n}\n"],"mappings":";;;;;;;;AAgBI,SACE,KADF;AAFG,SAAS,gBAAgB,OAA6B;AAC3D,SACE,qBAAC,gBAAgB,SAAhB,EACC;AAAA,wBAAC,qBAAkB;AAAA,IACnB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/date-picker/input.tsx"],"sourcesContent":["import type { DatePickerInputProps } from '@ark-ui/react/date-picker'\nimport { DatePickerTrigger } from './trigger'\nimport { DatePickerParts } from './parts'\n\n/**\n * This module contains an abstraction of the DatePickerInputEl primitive.\n * @module 'date-picker/input'\n */\n\n/**\n * An abstraction of the DatePicker input that wraps the input and the\n * triggers to open the DatePicker and clear the value.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  return (\n    <DatePickerParts.Control>\n      <DatePickerTrigger />\n      <DatePickerParts.Input\n        {...props}\n        maxLength={11}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n      />\n    </DatePickerParts.Control>\n  )\n}\n"],"mappings":";;;;;;;;AAgBI,SACE,KADF;AAFG,SAAS,gBAAgB,OAA6B;AAC3D,SACE,qBAAC,gBAAgB,SAAhB,EACC;AAAA,wBAAC,qBAAkB;AAAA,IACnB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,aAAa,MAAM,eAAe;AAAA;AAAA,IACpC;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-KABRV6TB.js → chunk-JXWNDJJW.js}

@@ -1,9 +1,9 @@
 import {
   Field
-} from "./chunk-LEBDLXJE.js";
+} from "./chunk-RTLS6K4E.js";
 import {
   FieldHelperText
-} from "./chunk-WEL43I6Y.js";
+} from "./chunk-OK3VJFQL.js";
 import {
   Avatar
 } from "./chunk-CF4TCMJI.js";
@@ -223,4 +223,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-KABRV6TB.js.map
+//# sourceMappingURL=chunk-JXWNDJJW.js.map

package/build/modern/{chunk-SSR3CWJZ.js → chunk-LUGOJGMO.js}

@@ -2,7 +2,7 @@
 import {
   Dialog
 } from "@ark-ui/react/dialog";
-import { cx } from "styled-system/css";
+import { css, cx } from "styled-system/css";
 import { dialog } from "styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
 function DialogRoot(props) {
@@ -39,13 +39,13 @@ function DialogPositioner(props) {
   );
 }
 function DialogContent(props) {
-  const { size, ...contentProps } = props;
+  const { size, css: customStyles, ...contentProps } = props;
   const styles = dialog({ size });
   return /* @__PURE__ */ jsx(
     Dialog.Content,
     {
       ...contentProps,
-      className: cx(styles.content, contentProps.className)
+      className: cx(styles.content, css(customStyles), contentProps.className)
     }
   );
 }
@@ -79,4 +79,4 @@ export {
   DialogCloseTrigger,
   DialogProvider
 };
-//# sourceMappingURL=chunk-SSR3CWJZ.js.map
+//# sourceMappingURL=chunk-LUGOJGMO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/dialog/primitives.tsx"],"sourcesContent":["import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n  props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n  const { size, css: customStyles, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, css(customStyles), contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAQK;AACP,SAAS,KAAK,UAAU;AACxB,SAAS,cAAuC;AAYvC;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,oBAAC,OAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,KAAK,cAAc,GAAG,aAAa,IAAI;AACrD,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,IAAI,YAAY,GAAG,aAAa,SAAS;AAAA;AAAA,EACzE;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,SAAS,OAAO;AACtB,SACE,oBAAC,OAAO,OAAP,EAAc,GAAG,OAAO,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,oBAAC,OAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAMO,IAAM,iBAAiB;","names":[]}

package/build/modern/{chunk-3IT3V3YA.js → chunk-M3TZCQ7J.js}

@@ -1,9 +1,9 @@
-import {
-  MatchAvatar
-} from "./chunk-NJ37QRAI.js";
 import {
   AdmonitionParts
 } from "./chunk-JQYW4IOC.js";
+import {
+  MatchAvatar
+} from "./chunk-NJ37QRAI.js";
 import {
   splitProps
 } from "./chunk-BL7G3577.js";
@@ -38,4 +38,4 @@ function Admonition(props) {
 export {
   Admonition
 };
-//# sourceMappingURL=chunk-3IT3V3YA.js.map
+//# sourceMappingURL=chunk-M3TZCQ7J.js.map

package/build/modern/{chunk-WEL43I6Y.js → chunk-OK3VJFQL.js}

@@ -53,7 +53,6 @@ function FieldInput(props) {
 }
 function FieldHelperText(props) {
   const styles = field();
-  if (!props.children) return null;
   return /* @__PURE__ */ jsx(
     Field.HelperText,
     {
@@ -97,4 +96,4 @@ export {
   Input,
   Textarea
 };
-//# sourceMappingURL=chunk-WEL43I6Y.js.map
+//# sourceMappingURL=chunk-OK3VJFQL.js.map

package/build/modern/{chunk-WEL43I6Y.js.map → chunk-OK3VJFQL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field/primitives.tsx"],"sourcesContent":["import {\n  Field,\n  type FieldHelperTextProps,\n  type FieldInputProps as ArkFieldInputProps,\n  type FieldLabelProps,\n  type FieldRootProps as ArkFieldRootProps,\n  type FieldTextareaProps,\n} from '@ark-ui/react/field'\nimport type { ReactNode } from 'react'\nimport { cx } from 'styled-system/css'\nimport { field, type FieldVariantProps } from 'styled-system/recipes'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains all the primitives of the Field component.\n * @module 'field'\n */\n\nexport type FieldRootProps = ArkFieldRootProps & FieldVariantProps\n\n/**\n * The context & container for the Field components.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot required ids={{ input: 'exampleId' }}>\n *  <FieldLabel>Label</FieldLabel>\n *  <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldRoot(props: FieldRootProps) {\n  const { size, ...fieldProps } = props\n  const styles = field({ size })\n  return (\n    <Field.Root\n      {...fieldProps}\n      className={cx(styles.root, fieldProps.className)}\n    />\n  )\n}\n\n/**\n * The label for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldLabel>Label</FieldLabel>\n * </FieldRoot>\n * ```\n */\nexport function FieldLabel(props: FieldLabelProps) {\n  const { children, ...nativeProps } = props\n  const styles = field()\n  return (\n    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>\n      {children}\n      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n    </Field.Label>\n  )\n}\n\n/**\n * The required indicator for the Field component.\n */\nexport function FieldRequiredIndicator() {\n  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n}\n\nexport interface FieldInputProps\n  extends Omit<ArkFieldInputProps, 'size'>,\n    FieldVariantProps {\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\n\n/**\n * The input for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldInput(props: FieldInputProps) {\n  const { size, startIcon, endIcon, ...fieldProps } = props\n  const styles = field({ size })\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <div className={styles.inputRoot}>\n      <FieldStartIndicator>{startIcon}</FieldStartIndicator>\n      <Field.Input\n        {...fieldProps}\n        {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        className={cx(styles.input, fieldProps.className)}\n      />\n      <FieldStatusIndicator fallback={endIcon} />\n    </div>\n  )\n}\n\n/**\n * The helper text for the Field component that is shown when the field is\n * valid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldHelperText>Helper text</FieldHelperText>\n * </FieldRoot>\n * ```\n */\nexport function FieldHelperText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.HelperText\n      {...props}\n      className={cx(styles.helperText, props.className)}\n    />\n  )\n}\n\n/**\n * The error text for the Field component that is shown when the field is\n * invalid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldErrorText>Error text</FieldErrorText>\n * </FieldRoot>\n * ```\n */\nexport function FieldErrorText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n\n/**\n * The textarea for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldTextarea />\n * </FieldRoot>\n * ```\n */\nexport function FieldTextarea(props: FieldTextareaProps) {\n  const styles = field()\n  return (\n    <Field.Textarea\n      {...props}\n      className={cx(styles.textarea, props.className)}\n    />\n  )\n}\n\n/**\n * A named export for the FieldInput component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * import { Input } from '@cerberus/react'\n *\n * <Field\n *   ids={{\n *    control: 'email',\n *   }}\n *   label=\"Enter your email\"\n *   helperText=\"We'll never share your email with anyone else.\"\n *   errorText=\"Email is required.\"\n *   required\n * >\n *   <Input type=\"email\" />\n * </Field>\n * ```\n */\nexport const Input = FieldInput\nexport const Textarea = FieldTextarea\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,UAAU;AACnB,SAAS,aAAqC;AA0B1C,cAqBA,YArBA;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,WAAW,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,SAAS,MAAM;AACrB,SACE,qBAAC,MAAM,OAAN,EAAa,GAAG,aAAa,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GACtE;AAAA;AAAA,IACD,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAAA,KACrC;AAEJ;AAKO,SAAS,yBAAyB;AACvC,SAAO,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAC5C;AAyBO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,MAAM,WAAW,SAAS,GAAG,WAAW,IAAI;AACpD,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,QAAM,eAAe,QAAQ,SAAS;AAEtC,SACE,qBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,wBAAC,uBAAqB,qBAAU;AAAA,IAChC;AAAA,MAAC,MAAM;AAAA,MAAN;AAAA,QACE,GAAG;AAAA,QACH,GAAI,gBAAgB,EAAE,YAAY,kBAAkB;AAAA,QACrD,WAAW,GAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,IAClD;AAAA,IACA,oBAAC,wBAAqB,UAAU,SAAS;AAAA,KAC3C;AAEJ;AAcO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAcO,SAAS,eAAe,OAA6B;AAC1D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAsBO,IAAM,QAAQ;AACd,IAAM,WAAW;","names":[]}
+{"version":3,"sources":["../../src/components/field/primitives.tsx"],"sourcesContent":["import {\n  Field,\n  type FieldHelperTextProps,\n  type FieldInputProps as ArkFieldInputProps,\n  type FieldLabelProps,\n  type FieldRootProps as ArkFieldRootProps,\n  type FieldTextareaProps,\n} from '@ark-ui/react/field'\nimport type { ReactNode } from 'react'\nimport { cx } from 'styled-system/css'\nimport { field, type FieldVariantProps } from 'styled-system/recipes'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains all the primitives of the Field component.\n * @module 'field'\n */\n\nexport type FieldRootProps = ArkFieldRootProps & FieldVariantProps\n\n/**\n * The context & container for the Field components.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot required ids={{ input: 'exampleId' }}>\n *  <FieldLabel>Label</FieldLabel>\n *  <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldRoot(props: FieldRootProps) {\n  const { size, ...fieldProps } = props\n  const styles = field({ size })\n  return (\n    <Field.Root\n      {...fieldProps}\n      className={cx(styles.root, fieldProps.className)}\n    />\n  )\n}\n\n/**\n * The label for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldLabel>Label</FieldLabel>\n * </FieldRoot>\n * ```\n */\nexport function FieldLabel(props: FieldLabelProps) {\n  const { children, ...nativeProps } = props\n  const styles = field()\n  return (\n    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>\n      {children}\n      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n    </Field.Label>\n  )\n}\n\n/**\n * The required indicator for the Field component.\n */\nexport function FieldRequiredIndicator() {\n  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n}\n\nexport interface FieldInputProps\n  extends Omit<ArkFieldInputProps, 'size'>,\n    FieldVariantProps {\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\n\n/**\n * The input for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldInput(props: FieldInputProps) {\n  const { size, startIcon, endIcon, ...fieldProps } = props\n  const styles = field({ size })\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <div className={styles.inputRoot}>\n      <FieldStartIndicator>{startIcon}</FieldStartIndicator>\n      <Field.Input\n        {...fieldProps}\n        {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        className={cx(styles.input, fieldProps.className)}\n      />\n      <FieldStatusIndicator fallback={endIcon} />\n    </div>\n  )\n}\n\n/**\n * The helper text for the Field component that is shown when the field is\n * valid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldHelperText>Helper text</FieldHelperText>\n * </FieldRoot>\n * ```\n */\nexport function FieldHelperText(props: FieldHelperTextProps) {\n  const styles = field()\n  return (\n    <Field.HelperText\n      {...props}\n      className={cx(styles.helperText, props.className)}\n    />\n  )\n}\n\n/**\n * The error text for the Field component that is shown when the field is\n * invalid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldErrorText>Error text</FieldErrorText>\n * </FieldRoot>\n * ```\n */\nexport function FieldErrorText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n\n/**\n * The textarea for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldTextarea />\n * </FieldRoot>\n * ```\n */\nexport function FieldTextarea(props: FieldTextareaProps) {\n  const styles = field()\n  return (\n    <Field.Textarea\n      {...props}\n      className={cx(styles.textarea, props.className)}\n    />\n  )\n}\n\n/**\n * A named export for the FieldInput component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * import { Input } from '@cerberus/react'\n *\n * <Field\n *   ids={{\n *    control: 'email',\n *   }}\n *   label=\"Enter your email\"\n *   helperText=\"We'll never share your email with anyone else.\"\n *   errorText=\"Email is required.\"\n *   required\n * >\n *   <Input type=\"email\" />\n * </Field>\n * ```\n */\nexport const Input = FieldInput\nexport const Textarea = FieldTextarea\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,UAAU;AACnB,SAAS,aAAqC;AA0B1C,cAqBA,YArBA;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,WAAW,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,SAAS,MAAM;AACrB,SACE,qBAAC,MAAM,OAAN,EAAa,GAAG,aAAa,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GACtE;AAAA;AAAA,IACD,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAAA,KACrC;AAEJ;AAKO,SAAS,yBAAyB;AACvC,SAAO,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAC5C;AAyBO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,MAAM,WAAW,SAAS,GAAG,WAAW,IAAI;AACpD,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,QAAM,eAAe,QAAQ,SAAS;AAEtC,SACE,qBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,wBAAC,uBAAqB,qBAAU;AAAA,IAChC;AAAA,MAAC,MAAM;AAAA,MAAN;AAAA,QACE,GAAG;AAAA,QACH,GAAI,gBAAgB,EAAE,YAAY,kBAAkB;AAAA,QACrD,WAAW,GAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,IAClD;AAAA,IACA,oBAAC,wBAAqB,UAAU,SAAS;AAAA,KAC3C;AAEJ;AAcO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAcO,SAAS,eAAe,OAA6B;AAC1D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAsBO,IAAM,QAAQ;AACd,IAAM,WAAW;","names":[]}

package/build/modern/{chunk-ADZRQNW3.js → chunk-P7FPAUWN.js}

@@ -6,20 +6,15 @@ import {
 } from "./chunk-J76SGDYP.js";
 
 // src/components/date-picker/range-input.tsx
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function RangePickerInput(props) {
-  const { defaultValue, ...nativeProps } = props;
-  const startDate = useMemo(() => defaultValue?.[0], [defaultValue]);
-  const endDate = useMemo(() => defaultValue?.[1], [defaultValue]);
   return /* @__PURE__ */ jsxs(DatePickerParts.Control, { "data-range": true, children: [
     /* @__PURE__ */ jsx(DatePickerTrigger, {}),
     /* @__PURE__ */ jsx(
       DatePickerParts.Input,
       {
-        ...nativeProps,
+        ...props,
         "data-range-input": true,
-        defaultValue: startDate,
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
         index: 0
@@ -28,9 +23,8 @@ function RangePickerInput(props) {
     /* @__PURE__ */ jsx(
       DatePickerParts.Input,
       {
-        ...nativeProps,
+        ...props,
         "data-range-input": true,
-        defaultValue: endDate,
         "data-range-end-input": true,
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
@@ -43,4 +37,4 @@ function RangePickerInput(props) {
 export {
   RangePickerInput
 };
-//# sourceMappingURL=chunk-ADZRQNW3.js.map
+//# sourceMappingURL=chunk-P7FPAUWN.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/range-input.tsx"],"sourcesContent":["import { type DatePickerInputProps } from '@ark-ui/react/date-picker'\nimport { DatePickerParts } from './parts'\nimport { DatePickerTrigger } from './trigger'\n\n/**\n * This private module contains the RangePickerInput component.\n * @module RangePickerInput\n */\n\nexport type RangePickerInputProps = DatePickerInputProps\n\n/**\n * An abstraction of the DatePicker input that wraps the input and the\n * triggers to open the DatePicker and clear the value.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n  return (\n    <DatePickerParts.Control data-range>\n      <DatePickerTrigger />\n      <DatePickerParts.Input\n        {...props}\n        data-range-input\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <DatePickerParts.Input\n        {...props}\n        data-range-input\n        data-range-end-input\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </DatePickerParts.Control>\n  )\n}\n"],"mappings":";;;;;;;;AAkBI,SACE,KADF;AAFG,SAAS,iBAAiB,OAA8B;AAC7D,SACE,qBAAC,gBAAgB,SAAhB,EAAwB,cAAU,MACjC;AAAA,wBAAC,qBAAkB;AAAA,IACnB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,oBAAgB;AAAA,QAChB,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,oBAAgB;AAAA,QAChB,wBAAoB;AAAA,QACpB,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-OY7BOKWW.js → chunk-QBA6KLL7.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-52ZQ26IV.js";
 import {
   Text
-} from "./chunk-L64HQGLQ.js";
+} from "./chunk-ZPHPCKAG.js";
 import {
   Show
 } from "./chunk-VEAC4I3F.js";
@@ -28,4 +28,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-OY7BOKWW.js.map
+//# sourceMappingURL=chunk-QBA6KLL7.js.map

package/build/modern/chunk-RMSM3XPV.js

@@ -0,0 +1,218 @@
+import {
+  Dialog
+} from "./chunk-BMDNCJUB.js";
+import {
+  DialogDescription,
+  DialogHeading,
+  DialogProvider
+} from "./chunk-LUGOJGMO.js";
+import {
+  Button
+} from "./chunk-GB7W3YNU.js";
+import {
+  Text
+} from "./chunk-ZPHPCKAG.js";
+import {
+  FieldLabel,
+  FieldRoot,
+  Input
+} from "./chunk-OK3VJFQL.js";
+import {
+  Avatar
+} from "./chunk-CF4TCMJI.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-VEAC4I3F.js";
+
+// src/context/prompt-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { DialogCloseTrigger } from "@ark-ui/react/dialog";
+import { HStack, VStack } from "styled-system/jsx";
+import { css } from "styled-system/css";
+import { hstack } from "styled-system/patterns";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PromptModalContext = createContext(null);
+function PromptModal(props) {
+  const resolveRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const { icons } = useCerberusContext();
+  const { promptModal: PromptIcon } = icons;
+  const isValid = useMemo(
+    () => inputValue === content?.key,
+    [inputValue, content]
+  );
+  const palette = useMemo(
+    () => content?.kind === "destructive" ? "danger" : "action",
+    [content]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      setInputValue(e.currentTarget.value);
+    },
+    [content]
+  );
+  const handleChoice = useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      if (target.value === "true") {
+        resolveRef.current?.(inputValue);
+      }
+      setOpen(false);
+    },
+    [inputValue, setOpen]
+  );
+  const handleShow = useCallback(
+    (options) => {
+      return new Promise((resolve) => {
+        setContent({ ...options, kind: options.kind || "non-destructive" });
+        setOpen(true);
+        resolveRef.current = resolve;
+      });
+    },
+    [setOpen]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: /* @__PURE__ */ jsxs(
+          VStack,
+          {
+            alignItems: "flex-start",
+            h: "full",
+            justify: "space-between",
+            w: "full",
+            children: [
+              /* @__PURE__ */ jsx(
+                HStack,
+                {
+                  alignSelf: "center",
+                  justify: "center",
+                  paddingBlockEnd: "md",
+                  w: "full",
+                  children: /* @__PURE__ */ jsx(
+                    Show,
+                    {
+                      when: palette === "danger",
+                      fallback: /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          gradient: "charon-light",
+                          fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+                        }
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          gradient: "hades-dark",
+                          fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: content?.description }),
+              /* @__PURE__ */ jsx(
+                VStack,
+                {
+                  alignItems: "flex-start",
+                  marginBlockStart: "md",
+                  marginBlockEnd: "lg",
+                  w: "full",
+                  children: /* @__PURE__ */ jsxs(FieldRoot, { invalid: !isValid, children: [
+                    /* @__PURE__ */ jsxs(
+                      FieldLabel,
+                      {
+                        className: hstack({
+                          gap: "xs",
+                          justify: "flex-start",
+                          marginBlockEnd: "xs",
+                          textStyle: "label-md",
+                          w: "initial"
+                        }),
+                        children: [
+                          "Type",
+                          /* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
+                          "to confirm"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Input, { name: "confirm", onChange: handleChange, type: "text" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "stretch", w: "full", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    autoFocus: true,
+                    className: css({
+                      w: "1/2"
+                    }),
+                    disabled: !isValid,
+                    name: "confirm",
+                    onClick: handleChoice,
+                    palette,
+                    value: "true",
+                    children: content?.actionText
+                  }
+                ),
+                /* @__PURE__ */ jsx(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: css({
+                      w: "1/2"
+                    }),
+                    name: "cancel",
+                    onClick: handleChoice,
+                    usage: "outlined",
+                    value: "false",
+                    children: content?.cancelText
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+function usePromptModal() {
+  const context = useContext(PromptModalContext);
+  if (context === null) {
+    throw new Error("usePromptModal must be used within a PromptModal Provider");
+  }
+  return context;
+}
+
+export {
+  PromptModal,
+  usePromptModal
+};
+//# sourceMappingURL=chunk-RMSM3XPV.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { DialogCloseTrigger } from '@ark-ui/react/dialog'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { css } from 'styled-system/css'\nimport { hstack } from 'styled-system/patterns'\nimport { FieldLabel, FieldRoot, Input } from '../components/field/index'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/avatar/avatar'\nimport { Text } from '../components/Text'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/dialog'\nimport { useCerberusContext } from './cerberus'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\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?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog\n          size=\"sm\"\n          style={{\n            '--dialog-content-min-h': 'auto',\n          }}\n        >\n          <VStack\n            alignItems=\"flex-start\"\n            h=\"full\"\n            justify=\"space-between\"\n            w=\"full\"\n          >\n            <HStack\n              alignSelf=\"center\"\n              justify=\"center\"\n              paddingBlockEnd=\"md\"\n              w=\"full\"\n            >\n              <Show\n                when={palette === 'danger'}\n                fallback={\n                  <Avatar\n                    gradient=\"charon-light\"\n                    fallback={<PromptIcon size={24} />}\n                  />\n                }\n              >\n                <Avatar\n                  gradient=\"hades-dark\"\n                  fallback={<PromptIcon size={24} />}\n                />\n              </Show>\n            </HStack>\n\n            <DialogHeading>{content?.heading}</DialogHeading>\n            <DialogDescription>{content?.description}</DialogDescription>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot invalid={!isValid}>\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                    w: 'initial',\n                  })}\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </FieldLabel>\n                <Input name=\"confirm\" onChange={handleChange} type=\"text\" />\n              </FieldRoot>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\n              <DialogCloseTrigger asChild>\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              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,0BAA0B;AACnC,SAAS,QAAQ,cAAc;AAC/B,SAAS,WAAW;AACpB,SAAS,cAAc;AAyLO,cAqBd,YArBc;AApH9B,IAAM,qBAAqB,cAAuC,IAAI;AA+B/D,SAAS,YACd,OACA;AACA,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AAEvD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,QAAM,UAAU;AAAA,IACd,MAAM,eAAe,SAAS;AAAA,IAC9B,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,UAAU;AAAA,MACjC;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoC;AACnC,aAAO,IAAI,QAAgB,CAAC,YAAY;AACtC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,gBAAQ,IAAI;AACZ,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAC1B;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,0BAA0B;AAAA,QAC5B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,GAAE;AAAA,YACF,SAAQ;AAAA,YACR,GAAE;AAAA,YAEF;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAQ;AAAA,kBACR,iBAAgB;AAAA,kBAChB,GAAE;AAAA,kBAEF;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM,YAAY;AAAA,sBAClB,UACE;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAS;AAAA,0BACT,UAAU,oBAAC,cAAW,MAAM,IAAI;AAAA;AAAA,sBAClC;AAAA,sBAGF;AAAA,wBAAC;AAAA;AAAA,0BACC,UAAS;AAAA,0BACT,UAAU,oBAAC,cAAW,MAAM,IAAI;AAAA;AAAA,sBAClC;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cAEA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,cACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,cAEzC;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,kBAAiB;AAAA,kBACjB,gBAAe;AAAA,kBACf,GAAE;AAAA,kBAEF,+BAAC,aAAU,SAAS,CAAC,SACnB;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAW,OAAO;AAAA,0BAChB,KAAK;AAAA,0BACL,SAAS;AAAA,0BACT,gBAAgB;AAAA,0BAChB,WAAW;AAAA,0BACX,GAAG;AAAA,wBACL,CAAC;AAAA,wBACF;AAAA;AAAA,0BAEC,oBAAC,QAAK,IAAG,UAAS,eAAc,aAC7B,mBAAS,KACZ;AAAA,0BAAO;AAAA;AAAA;AAAA,oBAET;AAAA,oBACA,oBAAC,SAAM,MAAK,WAAU,UAAU,cAAc,MAAK,QAAO;AAAA,qBAC5D;AAAA;AAAA,cACF;AAAA,cAEA,qBAAC,UAAO,KAAI,MAAK,SAAQ,WAAU,GAAE,QACnC;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAS;AAAA,oBACT,WAAW,IAAI;AAAA,sBACb,GAAG;AAAA,oBACL,CAAC;AAAA,oBACD,UAAU,CAAC;AAAA,oBACX,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT;AAAA,oBACA,OAAM;AAAA,oBAEL,mBAAS;AAAA;AAAA,gBACZ;AAAA,gBAEA,oBAAC,sBAAmB,SAAO,MACzB;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,IAAI;AAAA,sBACb,GAAG;AAAA,oBACL,CAAC;AAAA,oBACD,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,OAAM;AAAA,oBACN,OAAM;AAAA,oBAEL,mBAAS;AAAA;AAAA,gBACZ,GACF;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAKO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-LEBDLXJE.js → chunk-RTLS6K4E.js}

@@ -1,9 +1,12 @@
+import {
+  HelperText
+} from "./chunk-2U2JYN3D.js";
 import {
   FieldErrorText,
   FieldHelperText,
   FieldLabel,
   FieldRoot
-} from "./chunk-WEL43I6Y.js";
+} from "./chunk-OK3VJFQL.js";
 import {
   splitProps
 } from "./chunk-BL7G3577.js";
@@ -23,15 +26,15 @@ function Field(props) {
   return /* @__PURE__ */ jsxs(FieldRoot, { ...statusProps, ...rootProps, children: [
     /* @__PURE__ */ jsx(Show, { when: fieldProps.label, children: /* @__PURE__ */ jsx(FieldLabel, { children: fieldProps.label }) }),
     fieldProps.children,
-    /* @__PURE__ */ jsx(Show, { when: fieldProps.helperText && !statusProps.invalid, children: /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
-      /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.helperText }),
+    /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
+      /* @__PURE__ */ jsx(HelperText, { invalid: statusProps.invalid, children: fieldProps.helperText }),
+      /* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText }),
       /* @__PURE__ */ jsx(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText })
+    ] })
   ] });
 }
 
 export {
   Field
 };
-//# sourceMappingURL=chunk-LEBDLXJE.js.map
+//# sourceMappingURL=chunk-RTLS6K4E.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { type FieldRootProps } from '@ark-ui/react/field'\nimport { splitProps } from '../../utils/index'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldLabel,\n  FieldRoot,\n} from './primitives'\nimport { HStack } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { HelperText } from './helper-text'\n\nexport interface FieldProps extends FieldRootProps {\n  /**\n   * The label of the field.\n   */\n  label?: string\n  /**\n   * The helper text of the field.\n   */\n  helperText?: string\n  /**\n   * A helper text positioned at the end of the field. Good for Textarea fields.\n   */\n  secondaryHelperText?: string\n  /**\n   * The error text of the field. Shown when the field is invalid.\n   */\n  errorText?: string\n}\n\n/**\n * The Field component is the context provider for all FieldParts and displays\n * the label, helperText, and ErrorText.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <Field\n *  ids={{\n *   control: 'firstName',\n *  }}\n *  label=\"Label\"\n *  helperText=\"This is what people will see on your profile.\"\n *  errorText=\"A first name is required to create an account.\"\n *  required\n * >\n *   <Input name=\"firstName\" type=\"text\" />\n * </Field>\n * ```\n */\nexport function Field(props: FieldProps) {\n  const [statusProps, fieldProps, rootProps] = splitProps(\n    props,\n    ['disabled', 'required', 'readOnly', 'invalid'],\n    ['label', 'helperText', 'secondaryHelperText', 'errorText', 'children'],\n  )\n\n  return (\n    <FieldRoot {...statusProps} {...rootProps}>\n      <Show when={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <HStack justifyContent=\"space-between\" w=\"full\">\n        <HelperText invalid={statusProps.invalid}>\n          {fieldProps.helperText}\n        </HelperText>\n\n        <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n\n        <Show when={fieldProps.secondaryHelperText}>\n          <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n        </Show>\n      </HStack>\n    </FieldRoot>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAQA,SAAS,cAAc;AAoDf,cAKF,YALE;AAVD,SAAS,MAAM,OAAmB;AACvC,QAAM,CAAC,aAAa,YAAY,SAAS,IAAI;AAAA,IAC3C;AAAA,IACA,CAAC,YAAY,YAAY,YAAY,SAAS;AAAA,IAC9C,CAAC,SAAS,cAAc,uBAAuB,aAAa,UAAU;AAAA,EACxE;AAEA,SACE,qBAAC,aAAW,GAAG,aAAc,GAAG,WAC9B;AAAA,wBAAC,QAAK,MAAM,WAAW,OACrB,8BAAC,cAAY,qBAAW,OAAM,GAChC;AAAA,IAEC,WAAW;AAAA,IAEZ,qBAAC,UAAO,gBAAe,iBAAgB,GAAE,QACvC;AAAA,0BAAC,cAAW,SAAS,YAAY,SAC9B,qBAAW,YACd;AAAA,MAEA,oBAAC,kBAAgB,qBAAW,WAAU;AAAA,MAEtC,oBAAC,QAAK,MAAM,WAAW,qBACrB,8BAAC,mBAAiB,qBAAW,qBAAoB,GACnD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}