@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-739c492

package/build/modern/{chunk-MER66QUY.js → chunk-6KZVE4HC.js}

@@ -49,4 +49,4 @@ export {
   Button,
   ButtonIcon
 };
-//# sourceMappingURL=chunk-MER66QUY.js.map
+//# sourceMappingURL=chunk-6KZVE4HC.js.map

package/build/modern/{chunk-MER66QUY.js.map → chunk-6KZVE4HC.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button/button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,WAAW;AA8Bd,SAwB6B,UAxB7B;AAnBN,IAAM,gBAAgB,cAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,oBAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,SACE,oBAAC,QAAK,MAAM,SAAS,UAAU,gCAAG,gBAAM,UAAS,GAC/C,8BAAC,OAAI,GAAE,KACL,8BAAC,WAAQ,GACX,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/button/button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ButtonHTMLAttributes,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Box } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n  pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n  pending: false,\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps & {\n    pending?: boolean\n  }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n  const value = useMemo(() => ({ pending }), [pending])\n\n  return (\n    <ButtonContext.Provider value={value}>\n      <button\n        {...nativeProps}\n        disabled={pending || nativeProps.disabled}\n        className={cx(\n          nativeProps.className,\n          button({\n            palette,\n            usage,\n            shape,\n            size,\n          }),\n        )}\n      />\n    </ButtonContext.Provider>\n  )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n  const { pending } = useContext(ButtonContext)\n  return (\n    <Show when={pending} fallback={<>{props.children}</>}>\n      <Box w=\"4\">\n        <Spinner />\n      </Box>\n    </Show>\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,WAAW;AAgCd,SAwB6B,UAxB7B;AAnBN,IAAM,gBAAgB,cAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,oBAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,SACE,oBAAC,QAAK,MAAM,SAAS,UAAU,gCAAG,gBAAM,UAAS,GAC/C,8BAAC,OAAI,GAAE,KACL,8BAAC,WAAQ,GACX,GACF;AAEJ;","names":[]}

package/build/modern/{chunk-FTPZHG6J.js → chunk-6WOJAMZV.js}

@@ -1,15 +1,11 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
-
 // src/components/Radio.tsx
+import { Field } from "@ark-ui/react/field";
 import { cx } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
 import { radio } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Radio(props) {
   const { children, size, ...nativeProps } = props;
-  const { invalid, ...state } = useFieldContext();
   const styles = radio({ size });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -24,11 +20,9 @@ function Radio(props) {
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsx(
-          "input",
+          Field.Input,
           {
             ...nativeProps,
-            ...state,
-            ...invalid && { "aria-invalid": true },
             className: cx(nativeProps.className, styles.input),
             tabIndex: -1,
             type: "radio"
@@ -43,4 +37,4 @@ function Radio(props) {
 export {
   Radio
 };
-//# sourceMappingURL=chunk-FTPZHG6J.js.map
+//# sourceMappingURL=chunk-6WOJAMZV.js.map

package/build/modern/chunk-6WOJAMZV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import { Field } from '@ark-ui/react/field'\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * A unique identifier for the radio button. Required for accessibility.\n   */\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n *  <fieldset name=\"fruit\">\n *    <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n *     Option 1\n *    </Radio>\n *    <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n *     Option 2\n *    </Radio>\n *    <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n *     Option 3\n *    </Radio>\n *   </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const styles = radio({ size })\n\n  return (\n    <div\n      className={cx(\n        'group',\n        hstack({\n          gap: 'sm',\n        }),\n        styles.root,\n      )}\n      tabIndex={0}\n    >\n      <Field.Input\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n"],"mappings":";AAAA,SAAS,aAAa;AACtB,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AA6ClB,SAUE,KAVF;AALG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC,MAAM;AAAA,UAAN;AAAA,YACE,GAAG;AAAA,YACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,YACjD,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/build/modern/chunk-7VA5SXTY.js

@@ -0,0 +1,31 @@
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRoot,
+  FieldTextarea
+} from "./chunk-C5NL3X7W.js";
+import {
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
+
+// src/components/field/parts.ts
+var FieldParts = {
+  Root: FieldRoot,
+  Label: FieldLabel,
+  Input: FieldInput,
+  Textarea: FieldTextarea,
+  HelperText: FieldHelperText,
+  ErrorText: FieldErrorText,
+  StartIndicator: FieldStartIndicator,
+  StatusIndicator: FieldStatusIndicator
+};
+
+export {
+  FieldParts
+};
+//# sourceMappingURL=chunk-7VA5SXTY.js.map

package/build/modern/chunk-7VA5SXTY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldInput,\n  FieldLabel,\n  FieldRoot,\n  FieldTextarea,\n} from './primitives'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface FieldPartsValue {\n  /**\n   * The container of the field.\n   */\n  Root: ElementType\n  /**\n   * The label of the field.\n   */\n  Label: ElementType\n  /**\n   * The input of the field.\n   */\n  Input: ElementType\n  /**\n   * The textarea of the field.\n   */\n  Textarea: ElementType\n  /**\n   * The text that displays when the field is valid.\n   */\n  HelperText: ElementType\n  /**\n   * The text that displays when the field is invalid.\n   */\n  ErrorText: ElementType\n  /**\n   * The indicator that appears at the start of the field.\n   */\n  StartIndicator: ElementType\n  /**\n   * The status indicator of the field.\n   */\n  StatusIndicator: ElementType\n}\n\n/**\n * An Object containing the parts of the Field component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the FieldParts object and\n * the entire family of components vs. only what you use.\n */\nexport const FieldParts: FieldPartsValue = {\n  Root: FieldRoot,\n  Label: FieldLabel,\n  Input: FieldInput,\n  Textarea: FieldTextarea,\n  HelperText: FieldHelperText,\n  ErrorText: FieldErrorText,\n  StartIndicator: FieldStartIndicator,\n  StatusIndicator: FieldStatusIndicator,\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA6DO,IAAM,aAA8B;AAAA,EACzC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,iBAAiB;AACnB;","names":[]}

package/build/modern/chunk-7YVOZULL.js

@@ -0,0 +1,23 @@
+import {
+  FieldLabel
+} from "./chunk-C5NL3X7W.js";
+
+// src/components/deprecated/Label.tsx
+import { label } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Label(props) {
+  const { size, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    FieldLabel,
+    {
+      ...nativeProps,
+      className: cx(label({ size }), props.className)
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-7YVOZULL.js.map

package/build/modern/chunk-7YVOZULL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/Label.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { FieldLabel } from '../field'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport type LabelBaseProps = HTMLAttributes<HTMLLabelElement>\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * @deprecated Use FieldLabel or FieldParts.Label instead.\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { size, ...nativeProps } = props\n  return (\n    <FieldLabel\n      {...nativeProps}\n      className={cx(label({ size }), props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAgBf;AAHG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/build/modern/{chunk-KU2AWAK3.js → chunk-B2A6QFKT.js}

@@ -1,6 +1,6 @@
 import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   DatePickerContext,
   DatePickerTable,
@@ -13,15 +13,12 @@ import {
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 
 // src/components/DatePicker.client.tsx
 import {
@@ -33,12 +30,10 @@ import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var datePickerStyles = datePicker();
 function DatePicker(props) {
-  const states = useFieldContext();
   return /* @__PURE__ */ jsx(
     ArkDP.Root,
     {
       ...props,
-      ...states,
       positioning: {
         placement: "bottom-start"
       }
@@ -86,15 +81,12 @@ function DatePickerTrigger(props) {
   );
 }
 function DatePickerInput(props) {
-  const { invalid, ...fieldStates } = useFieldContext();
   return /* @__PURE__ */ jsxs(ArkDP.Control, { className: datePickerStyles.control, children: [
     /* @__PURE__ */ jsx(DatePickerTrigger, {}),
     /* @__PURE__ */ jsx(
       ArkDP.Input,
       {
         ...props,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         className: cx(props.className, datePickerStyles.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11
@@ -103,7 +95,6 @@ function DatePickerInput(props) {
   ] });
 }
 function RangePickerInput(props) {
-  const { invalid, ...fieldStates } = useFieldContext();
   const { defaultValue, ...nativeProps } = props;
   const startDate = useMemo(() => defaultValue?.[0], [defaultValue]);
   const endDate = useMemo(() => defaultValue?.[1], [defaultValue]);
@@ -113,8 +104,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: startDate,
         className: cx(props.className, datePickerStyles.input),
@@ -127,8 +116,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: endDate,
         "data-range-end-input": true,
@@ -214,4 +201,4 @@ export {
   DatePickerYearView,
   DatePickerCalendar
 };
-//# sourceMappingURL=chunk-KU2AWAK3.js.map
+//# sourceMappingURL=chunk-B2A6QFKT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n  DatePicker as ArkDP,\n  type DatePickerContentProps,\n  type DatePickerInputProps,\n  type DatePickerRootProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n  type DatePickerViewProps,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\nimport { datePicker, iconButton } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n  DatePickerView,\n  DatePickerContext,\n  DatePickerTable,\n  DatePickerTableHeader,\n  DatePickerTableCellTrigger,\n  DatePickerTableCell,\n  DatePickerViewControl,\n} from './DatePicker.server'\nimport { IconButton } from './IconButton'\nimport { Button } from './button/button'\nimport { useCerberusContext } from '../context/cerberus'\nimport { useMemo, type InputHTMLAttributes } from 'react'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n  // There is a bug with the Root component that causes random date selection\n  // onBlur after the first selection if the format prop is used.\n  // ref: https://github.com/chakra-ui/ark/issues/3112#event-16047829195\n\n  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <ArkDP.Root\n      {...props}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n  const { icons } = useCerberusContext()\n  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons\n  return (\n    <DatePickerViewControl {...props}>\n      <ArkDP.PrevTrigger asChild>\n        <IconButton ariaLabel=\"Previous\" size=\"sm\">\n          <PrevIcon />\n        </IconButton>\n      </ArkDP.PrevTrigger>\n\n      <ArkDP.ViewTrigger asChild>\n        <Button\n          className={css({\n            h: '2rem',\n            paddingInline: 'md',\n          })}\n          shape=\"rounded\"\n          size=\"sm\"\n          usage=\"ghost\"\n        >\n          <ArkDP.RangeText />\n        </Button>\n      </ArkDP.ViewTrigger>\n\n      <ArkDP.NextTrigger asChild>\n        <IconButton ariaLabel=\"Next\" size=\"sm\">\n          <NextIcon />\n        </IconButton>\n      </ArkDP.NextTrigger>\n    </DatePickerViewControl>\n  )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { calendar: CalendarIcon } = icons\n  return (\n    <ArkDP.Trigger\n      {...props}\n      className={cx(\n        props.className,\n        iconButton({\n          size: 'sm',\n          usage: 'ghost',\n        }),\n        datePickerStyles.trigger,\n      )}\n    >\n      <CalendarIcon />\n    </ArkDP.Trigger>\n  )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  return (\n    <ArkDP.Control className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </ArkDP.Control>\n  )\n}\n\nexport interface RangePickerInputProps\n  extends Omit<DatePickerInputProps, 'defaultValue'> {\n  /**\n   * The defaultValue to add for the inputs. The first item is the start date\n   * and the second item is the end date.\n   */\n  defaultValue?: [\n    InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n    InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n  ]\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\" selection=\"range\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <RangePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n  const { defaultValue, ...nativeProps } = props\n\n  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])\n  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])\n\n  return (\n    <ArkDP.Control data-range className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...nativeProps}\n        data-range-input\n        defaultValue={startDate}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <ArkDP.Input\n        {...nativeProps}\n        data-range-input\n        defaultValue={endDate}\n        data-range-end-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(\n  props: DatePickerContentProps & {\n    withModal?: boolean\n  },\n) {\n  const { children, withModal, ...contentProps } = props\n  return (\n    <Portal disabled={withModal ?? false}>\n      <ArkDP.Positioner className={datePickerStyles.positioner}>\n        <ArkDP.Content\n          {...contentProps}\n          className={cx(contentProps.className, datePickerStyles.content)}\n        >\n          {children}\n        </ArkDP.Content>\n      </ArkDP.Positioner>\n    </Portal>\n  )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n  function isToday(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const formatted = today.toISOString().split('T')[0]\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return formatted === arkDate\n  }\n\n  function isPastDay(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return new Date(arkDate) < today\n  }\n\n  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n    if (isToday(date)) return 'today'\n    if (isPastDay(date)) return 'past'\n    return 'future'\n  }\n\n  return (\n    <DatePickerView {...props} view=\"day\">\n      <DatePickerContext>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableHead>\n                <ArkDP.TableRow>\n                  {datePicker.weekDays.map((weekDay, id) => (\n                    <DatePickerTableHeader key={id}>\n                      {weekDay.narrow}\n                    </DatePickerTableHeader>\n                  ))}\n                </ArkDP.TableRow>\n              </ArkDP.TableHead>\n\n              <ArkDP.TableBody>\n                {datePicker.weeks.map((week, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {week.map((day, id) => (\n                      <DatePickerTableCell key={id} value={day}>\n                        <DatePickerTableCellTrigger\n                          data-date={getDayValue(day)}\n                        >\n                          {day.day}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </DatePickerContext>\n    </DatePickerView>\n  )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"month\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker\n                  .getMonthsGrid({ columns: 4, format: 'short' })\n                  .map((months, id) => (\n                    <ArkDP.TableRow key={id}>\n                      {months.map((month, id) => (\n                        <DatePickerTableCell key={id} value={month.value}>\n                          <DatePickerTableCellTrigger>\n                            {month.label}\n                          </DatePickerTableCellTrigger>\n                        </DatePickerTableCell>\n                      ))}\n                    </ArkDP.TableRow>\n                  ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"year\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerTableCell key={id} value={year.value}>\n                        <DatePickerTableCellTrigger>\n                          {year.label}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar(props: { withModal?: boolean }) {\n  return (\n    <DatePickerContent withModal={props.withModal}>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n"],"mappings":"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","names":["datePicker","id"]}

package/build/modern/chunk-BL7G3577.js

@@ -0,0 +1,29 @@
+// src/utils/index.ts
+function formatNotifyCount(count) {
+  if (count > 99) return "99+";
+  return count.toString();
+}
+function splitProps(props, ...keyGroups) {
+  const result = keyGroups.map(() => ({}));
+  const rest = {};
+  for (const key in props) {
+    let assigned = false;
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key)) {
+        result[i][key] = props[key];
+        assigned = true;
+        break;
+      }
+    }
+    if (!assigned) {
+      rest[key] = props[key];
+    }
+  }
+  return [...result, rest];
+}
+
+export {
+  formatNotifyCount,
+  splitProps
+};
+//# sourceMappingURL=chunk-BL7G3577.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.ts"],"sourcesContent":["/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n"],"mappings":";AAeO,SAAS,kBAAkB,OAAuB;AACvD,MAAI,QAAQ,GAAI,QAAO;AACvB,SAAO,MAAM,SAAS;AACxB;AAQO,SAAS,WACd,UACG,WAC0B;AAC7B,QAAM,SAAS,UAAU,IAAI,OAAO,CAAC,EAA+B;AACpE,QAAM,OAAO,CAAC;AAEd,aAAW,OAAO,OAAO;AACvB,QAAI,WAAW;AACf,aAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,UAAI,UAAU,CAAC,EAAE,SAAS,GAAc,GAAG;AACzC,eAAO,CAAC,EAAE,GAAc,IAAI,MAAM,GAAG;AACrC,mBAAW;AACX;AAAA,MACF;AAAA,IACF;AACA,QAAI,CAAC,UAAU;AACb,WAAK,GAAc,IAAI,MAAM,GAAG;AAAA,IAClC;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,QAAQ,IAAI;AACzB;","names":[]}

package/build/modern/chunk-C5NL3X7W.js

@@ -0,0 +1,96 @@
+import {
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
+
+// src/components/field/primitives.tsx
+import {
+  Field
+} from "@ark-ui/react/field";
+import { cx } from "@cerberus/styled-system/css";
+import { field } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldRoot(props) {
+  const { size, ...fieldProps } = props;
+  const styles = field({ size });
+  return /* @__PURE__ */ jsx(
+    Field.Root,
+    {
+      ...fieldProps,
+      className: cx(styles.root, fieldProps.className)
+    }
+  );
+}
+function FieldLabel(props) {
+  const { children, ...nativeProps } = props;
+  const styles = field();
+  return /* @__PURE__ */ jsxs(Field.Label, { ...nativeProps, className: cx(styles.label, props.className), children: [
+    children,
+    /* @__PURE__ */ jsx(Field.RequiredIndicator, { children: "(required)" })
+  ] });
+}
+function FieldInput(props) {
+  const { size, startIcon, endIcon, ...fieldProps } = props;
+  const styles = field({ size });
+  const hasStartIcon = Boolean(startIcon);
+  return /* @__PURE__ */ jsxs("div", { className: styles.inputRoot, children: [
+    /* @__PURE__ */ jsx(FieldStartIndicator, { children: startIcon }),
+    /* @__PURE__ */ jsx(
+      Field.Input,
+      {
+        ...fieldProps,
+        ...hasStartIcon && { "data-has": "start-indicator" },
+        className: cx(styles.input, fieldProps.className)
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldStatusIndicator, { fallback: endIcon })
+  ] });
+}
+function FieldHelperText(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    Field.HelperText,
+    {
+      ...props,
+      className: cx(styles.helperText, props.className)
+    }
+  );
+}
+function FieldErrorText(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    Field.ErrorText,
+    {
+      ...props,
+      className: cx(styles.errorText, props.className)
+    }
+  );
+}
+function FieldTextarea(props) {
+  const styles = field();
+  return /* @__PURE__ */ jsx(
+    Field.Textarea,
+    {
+      ...props,
+      className: cx(styles.textarea, props.className)
+    }
+  );
+}
+var Input = FieldInput;
+var Textarea = FieldTextarea;
+
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldInput,
+  FieldHelperText,
+  FieldErrorText,
+  FieldTextarea,
+  Input,
+  Textarea
+};
+//# sourceMappingURL=chunk-C5NL3X7W.js.map

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

@@ -0,0 +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 '@cerberus/styled-system/css'\nimport { field, type FieldVariantProps } from '@cerberus/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\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;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":[]}

package/build/modern/chunk-CNA2VKAH.js

@@ -0,0 +1,43 @@
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+
+// src/components/field/status-indicator.tsx
+import { useFieldContext } from "@ark-ui/react";
+import { cx } from "@cerberus/styled-system/css";
+import { field } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldStatusIndicator(props) {
+  const { fallback, ...nativeProps } = props;
+  const styles = field();
+  const fieldContext = useFieldContext();
+  const { icons } = useCerberusContext();
+  const { invalid: InvalidIcon } = icons;
+  if (fieldContext.invalid) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...nativeProps,
+        "aria-hidden": "true",
+        "data-invalid": true,
+        className: cx(nativeProps.className, styles.statusIndicator),
+        children: /* @__PURE__ */ jsx(InvalidIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...nativeProps,
+      "aria-hidden": "true",
+      "data-part": "end-indicator",
+      className: cx(nativeProps.className, styles.endIndicator),
+      children: fallback
+    }
+  );
+}
+
+export {
+  FieldStatusIndicator
+};
+//# sourceMappingURL=chunk-CNA2VKAH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/status-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { field } from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface FieldStatusIndicatorProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The fallback content to display when the field is valid.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * The invalid status indicator for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldStatusIndicator />\n * </FieldRoot>\n * ```\n */\nexport function FieldStatusIndicator(props: FieldStatusIndicatorProps) {\n  const { fallback, ...nativeProps } = props\n  const styles = field()\n  const fieldContext = useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  if (fieldContext.invalid) {\n    return (\n      <span\n        {...nativeProps}\n        aria-hidden=\"true\"\n        data-invalid\n        className={cx(nativeProps.className, styles.statusIndicator)}\n      >\n        <InvalidIcon />\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...nativeProps}\n      aria-hidden=\"true\"\n      data-part=\"end-indicator\"\n      className={cx(nativeProps.className, styles.endIndicator)}\n    >\n      {fallback}\n    </span>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,uBAAuB;AAChC,SAAS,UAAU;AACnB,SAAS,aAAa;AAsCd;AAhBD,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,SAAS,MAAM;AACrB,QAAM,eAAe,gBAAgB;AAErC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,MAAI,aAAa,SAAS;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAY;AAAA,QACZ,gBAAY;AAAA,QACZ,WAAW,GAAG,YAAY,WAAW,OAAO,eAAe;AAAA,QAE3D,8BAAC,eAAY;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,WAAW,OAAO,YAAY;AAAA,MAEvD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/build/modern/{chunk-Z7FGXAND.js → chunk-FMRWRVUS.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk-V3M3ZOQI.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-Z7FGXAND.js.map
+//# sourceMappingURL=chunk-FMRWRVUS.js.map

package/build/modern/{chunk-NGOLRISW.js → chunk-FVE4GBB7.js}

@@ -1,6 +1,3 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -14,10 +11,11 @@ import {
 } from "@cerberus/styled-system/recipes";
 import { vstack } from "@cerberus/styled-system/patterns";
 import { cx } from "@cerberus/styled-system/css";
+import { useFieldContext } from "@ark-ui/react/field";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Checkbox(props) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props;
-  const { invalid, ...fieldStates } = useFieldContext();
+  const { size, checked, mixed, ...nativeProps } = props;
+  const { invalid, disabled, readOnly, required, ariaDescribedby, ids } = useFieldContext();
   const styles = checkbox({ size });
   const { icons } = useCerberusContext();
   const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
@@ -42,10 +40,13 @@ function Checkbox(props) {
           "input",
           {
             ...nativeProps,
-            ...fieldStates,
-            ...describedBy && { "aria-describedby": describedBy },
+            ...disabled && { disabled: true },
+            ...readOnly && { readOnly: true },
+            ...required && { required: true },
+            ...ariaDescribedby && { "aria-describedby": ariaDescribedby },
             ...invalid && { "aria-invalid": true },
             ...mixed && { "aria-checked": "mixed" },
+            id: ids.control,
             className: cx("peer", nativeProps.className, styles.input),
             type: "checkbox"
           }
@@ -60,4 +61,4 @@ function Checkbox(props) {
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-NGOLRISW.js.map
+//# sourceMappingURL=chunk-FVE4GBB7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\nimport { useFieldContext } from '@ark-ui/react/field'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n    /**\n     * @deprecated\n     */\n    describedBy?: string\n    /**\n     * @deprecated use the Field.ids.control instead\n     */\n    id?: string\n    /**\n     * Used to display a mixed checked state.\n     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n     */\n    mixed?: boolean\n  }\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n *   <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n  const { size, checked, mixed, ...nativeProps } = props\n  const { invalid, disabled, readOnly, required, ariaDescribedby, ids } =\n    useFieldContext()\n  const styles = checkbox({ size })\n  const { icons } = useCerberusContext()\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n  if (!CheckIcon) {\n    throw new Error('The CerberusProvider is missing the checkbox icon.')\n  }\n  if (!IndeterminateIcon) {\n    throw new Error('The CerberusProvider is missing the indeterminate icon.')\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.root,\n        vstack({\n          gap: '0',\n          justify: 'center',\n        }),\n      )}\n    >\n      <input\n        {...nativeProps}\n        {...(disabled && { disabled: true })}\n        {...(readOnly && { readOnly: true })}\n        {...(required && { required: true })}\n        {...(ariaDescribedby && { 'aria-describedby': ariaDescribedby })}\n        {...(invalid && { 'aria-invalid': true })}\n        {...(mixed && { 'aria-checked': 'mixed' })}\n        id={ids.control}\n        className={cx('peer', nativeProps.className, styles.input)}\n        type=\"checkbox\"\n      />\n      <Show when={checked && !mixed}>\n        <span className={styles.icon}>\n          <CheckIcon />\n        </span>\n      </Show>\n      <Show when={mixed}>\n        <span className={styles.icon}>\n          <IndeterminateIcon />\n        </span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAInB,SAAS,uBAAuB;AAoD5B,SASE,KATF;AAhBG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AACjD,QAAM,EAAE,SAAS,UAAU,UAAU,UAAU,iBAAiB,IAAI,IAClE,gBAAgB;AAClB,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,MAAI,CAAC,WAAW;AACd,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,MAAI,CAAC,mBAAmB;AACtB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,mBAAmB,EAAE,oBAAoB,gBAAgB;AAAA,YAC7D,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,IAAI,IAAI;AAAA,YACR,WAAW,GAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,QAAK,MAAM,WAAW,CAAC,OACtB,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,aAAU,GACb,GACF;AAAA,QACA,oBAAC,QAAK,MAAM,OACV,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-7P7OWBGV.js → chunk-G2VFEBY4.js}

@@ -2,14 +2,14 @@ import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
 import {
-  FieldMessage
-} from "./chunk-JWIJHSI6.js";
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Field
-} from "./chunk-UZDVOIW5.js";
+} from "./chunk-IGSC4IEA.js";
 import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  FieldHelperText
+} from "./chunk-C5NL3X7W.js";
 import {
   Avatar
 } from "./chunk-SXLPDPOZ.js";
@@ -106,8 +106,8 @@ function FileStatus(props) {
                   size: "sm"
                 }
               ),
-              /* @__PURE__ */ jsx(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
-                FieldMessage,
+              /* @__PURE__ */ jsx(Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
+                FieldHelperText,
                 {
                   className: css({
                     color: "page.text.100"
@@ -227,4 +227,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-7P7OWBGV.js.map
+//# sourceMappingURL=chunk-G2VFEBY4.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FileStatus.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useMemo,\n  type HTMLAttributes,\n  type MouseEvent,\n} from 'react'\nimport {\n  fileStatus,\n  type FileStatusVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { useCerberusContext } from '../context/cerberus'\nimport { ProgressBar, type ProgressBarProps } from './ProgressBar'\nimport { IconButton } from './IconButton'\nimport { Avatar } from './Avatar'\nimport { Field, FieldHelperText } from './field/index'\n\n/**\n * This module contains the FileStatus component.\n * @module\n */\n\n/**\n * The available values of the fileStatus helper Object.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport type FileStatusKey = (typeof processStatus)[keyof typeof processStatus]\n\n/**\n * The actions that can be performed on a file.\n */\nexport type FileStatusActions = 'cancel' | 'retry' | 'delete'\nexport interface FileBaseStatusProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * A unique identifier for the file status. Required for accessibility.\n   */\n  id: string\n  /**\n   * The name of the file.\n   */\n  file: string\n  /**\n   * The percentage of the file that has been processed.\n   */\n  now: ProgressBarProps['now']\n  /**\n   * The status of the file.\n   */\n  status: processStatus\n  /**\n   * The action to perform on the file when a user clicks the\n   * button located at the end of the status card.\n   * @param status - The status of the file.\n   * @param e - The event object.\n   * @example\n   * ```tsx\n   * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n   * ```\n   * @default () => {}\n   */\n  onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps\n\n/**\n * A helper object to represent the status of a file.\n * @example\n * ```tsx\n * import { fileStatus } from '@cerberus/react'\n * processStatus.TODO // 'todo'\n * ```\n */\nexport const enum processStatus {\n  TODO = 'todo',\n  PROCESSING = 'processing',\n  DONE = 'done',\n  ERROR = 'error',\n}\n\n/**\n * A component that displays the status of a file during file processing.\n * @see https://cerberus.digitalu.design/react/file-uploader\n * @example\n * ```tsx\n * <FileStatus file=\"file.txt\" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />\n * ```\n */\nexport function FileStatus(props: FileStatusProps) {\n  const { file, now, status, onClick, ...nativeProps } = props\n  const actionLabel = useMemo(() => getStatusActionLabel(status), [status])\n  const palette = useMemo(() => getPalette(status), [status])\n  const modalIconPalette = useMemo(() => getModalIconPalette(status), [status])\n  const styles = useMemo(() => {\n    switch (status) {\n      case processStatus.TODO:\n        return fileStatus({ status: 'todo' })\n      case processStatus.PROCESSING:\n        return fileStatus({ status: 'processing' })\n      case processStatus.DONE:\n        return fileStatus({ status: 'done' })\n      case processStatus.ERROR:\n        return fileStatus({ status: 'error' })\n      default:\n        return fileStatus()\n    }\n  }, [status])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const actionStatus = getStatusActionLabel(\n        status,\n      ).toLocaleLowerCase() as FileStatusActions\n      onClick(actionStatus, e)\n    },\n    [onClick],\n  )\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(nativeProps.className, styles.root, hstack())}\n    >\n      <Avatar\n        ariaLabel=\"\"\n        gradient={modalIconPalette}\n        icon={<MatchFileStatusIcon size={24} status={status} />}\n        src=\"\"\n      />\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0.12rem',\n          w: 'full',\n        })}\n      >\n        <small\n          className={css({\n            color: 'page.text.initial',\n            textStyle: 'label-sm',\n          })}\n        >\n          {file}\n        </small>\n        <ProgressBar\n          id={props.id}\n          label=\"File upload status\"\n          now={now}\n          size=\"sm\"\n        />\n        <Field label=\"\" invalid={modalIconPalette === 'hades-dark'}>\n          <FieldHelperText\n            className={css({\n              color: 'page.text.100',\n            })}\n            id={`help:${file}`}\n          >\n            <MatchFileStatusText status={status} now={now} />\n          </FieldHelperText>\n        </Field>\n      </div>\n\n      <IconButton\n        ariaLabel={actionLabel}\n        onClick={handleClick}\n        palette={palette}\n        size=\"sm\"\n      >\n        <MatchStatusAction status={status} />\n      </IconButton>\n    </div>\n  )\n}\n\ninterface FileStatusElProps {\n  status: FileStatusProps['status']\n  size?: 16 | 20 | 24 | 32\n  now?: number\n}\n\nfunction MatchFileStatusIcon(props: FileStatusElProps) {\n  const { icons } = useCerberusContext()\n  const {\n    waitingFileUploader: TodoIcon,\n    fileUploader: FileUploaderIcon,\n    invalidAlt: InvalidIcon,\n    successNotification: DoneIcon,\n  } = icons\n\n  switch (props.status) {\n    case processStatus.TODO:\n      return <TodoIcon size={props.size} />\n    case processStatus.PROCESSING:\n      return <FileUploaderIcon size={props.size} />\n    case processStatus.DONE:\n      return <DoneIcon size={props.size} />\n    case processStatus.ERROR:\n      return <InvalidIcon size={props.size} />\n    default:\n      throw new Error('Unknown status')\n  }\n}\n\nfunction MatchFileStatusText(props: FileStatusElProps) {\n  switch (props.status) {\n    case processStatus.TODO:\n      return 'Waiting to upload'\n    case processStatus.PROCESSING:\n      return `${props.now}% Complete`\n    case processStatus.DONE:\n      return 'File uploaded successfully'\n    case processStatus.ERROR:\n      return 'There was an error uploading the file'\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction MatchStatusAction(props: FileStatusElProps) {\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons\n  switch (props.status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return <CloseIcon />\n    case processStatus.ERROR:\n      return <RedoIcon />\n    case processStatus.DONE:\n      return <TrashIcon />\n    default:\n      throw new Error('Invalid status')\n  }\n}\n\nfunction getStatusActionLabel(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'Cancel'\n    case processStatus.ERROR:\n      return 'Retry'\n    case processStatus.DONE:\n      return 'Delete'\n    default:\n      return ''\n  }\n}\n\nfunction getPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'danger'\n    case processStatus.ERROR:\n      return 'action'\n    case processStatus.DONE:\n      return 'danger'\n    default:\n      return 'action'\n  }\n}\n\nfunction getModalIconPalette(status: FileStatusKey) {\n  switch (status) {\n    case processStatus.TODO:\n    case processStatus.PROCESSING:\n      return 'charon-light'\n    case processStatus.ERROR:\n      return 'hades-dark'\n    case processStatus.DONE:\n      return 'thanatos-light'\n    default:\n      return 'charon-light'\n  }\n}\n"],"mappings":"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","names":["processStatus"]}