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

package/build/modern/chunk-RHCTPSKT.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-STLN7BMJ.js

@@ -0,0 +1,22 @@
+import {
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText
+} from "./chunk-5RTNSVYU.js";
+
+// src/components/radio/radio.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Radio(props) {
+  const { size, children, ...groupProps } = props;
+  return /* @__PURE__ */ jsxs(RadioGroupItem, { ...groupProps, children: [
+    /* @__PURE__ */ jsx(RadioGroupItemControl, { size }),
+    /* @__PURE__ */ jsx(RadioGroupItemText, { size, children }),
+    /* @__PURE__ */ jsx(RadioGroupItemHiddenInput, {})
+  ] });
+}
+
+export {
+  Radio
+};
+//# sourceMappingURL=chunk-STLN7BMJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import type { RadioGroupItemProps } from '@ark-ui/react'\nimport { type RadioGroupVariantProps } from '@cerberus/styled-system/recipes'\nimport {\n  RadioGroupItem,\n  RadioGroupItemControl,\n  RadioGroupItemHiddenInput,\n  RadioGroupItemText,\n} from './primitives'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioProps = RadioGroupVariantProps & RadioGroupItemProps\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 * <Radio value=\"option1\">Option 1</Radio>\n * ```\n */\nexport function Radio(props: RadioProps) {\n  const { size, children, ...groupProps } = props\n  return (\n    <RadioGroupItem {...groupProps}>\n      <RadioGroupItemControl size={size} />\n      <RadioGroupItemText size={size}>{children}</RadioGroupItemText>\n      <RadioGroupItemHiddenInput />\n    </RadioGroupItem>\n  )\n}\n"],"mappings":";;;;;;;;AA4BI,SACE,KADF;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,MAAM,UAAU,GAAG,WAAW,IAAI;AAC1C,SACE,qBAAC,kBAAgB,GAAG,YAClB;AAAA,wBAAC,yBAAsB,MAAY;AAAA,IACnC,oBAAC,sBAAmB,MAAa,UAAS;AAAA,IAC1C,oBAAC,6BAA0B;AAAA,KAC7B;AAEJ;","names":[]}

package/build/modern/{chunk-7NN3SJ7W.js → chunk-SWX5JWZR.js}

@@ -1,4 +1,4 @@
-// src/components/ModalHeading.tsx
+// src/components/deprecated/ModalHeading.tsx
 import { cx } from "@cerberus/styled-system/css";
 import { modal } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
@@ -9,4 +9,4 @@ function ModalHeading(props) {
 export {
   ModalHeading
 };
-//# sourceMappingURL=chunk-7NN3SJ7W.js.map
+//# sourceMappingURL=chunk-SWX5JWZR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogHeading` instead\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

package/build/modern/{chunk-GCQMH4QA.js → chunk-SXLPDPOZ.js}

@@ -1,9 +1,9 @@
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 
 // src/components/Avatar.tsx
 import { css, cx } from "@cerberus/styled-system/css";
@@ -102,4 +102,4 @@ var iconSizeMap = {
 export {
   Avatar
 };
-//# sourceMappingURL=chunk-GCQMH4QA.js.map
+//# sourceMappingURL=chunk-SXLPDPOZ.js.map

package/build/modern/chunk-TIJAFPHQ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TIJAFPHQ.js.map

package/build/modern/chunk-TYPULJMJ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TYPULJMJ.js.map

package/build/modern/chunk-UDY6USHW.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-UDY6USHW.js.map

package/build/modern/chunk-V4YYGGMH.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-V4YYGGMH.js.map

package/build/modern/chunk-VSTOSLFS.js

@@ -0,0 +1,100 @@
+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 FieldRequiredIndicator() {
+  return /* @__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,
+  FieldRequiredIndicator,
+  FieldInput,
+  FieldHelperText,
+  FieldErrorText,
+  FieldTextarea,
+  Input,
+  Textarea
+};
+//# sourceMappingURL=chunk-VSTOSLFS.js.map

package/build/modern/chunk-VSTOSLFS.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\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":[]}

package/build/modern/{chunk-ZL6ZITLA.js → chunk-WECB67DC.js}

@@ -1,4 +1,4 @@
-// src/components/ModalDescription.tsx
+// src/components/deprecated/ModalDescription.tsx
 import { cx } from "@cerberus/styled-system/css";
 import { modal } from "@cerberus/styled-system/recipes";
 import { jsx } from "react/jsx-runtime";
@@ -9,4 +9,4 @@ function ModalDescription(props) {
 export {
   ModalDescription
 };
-//# sourceMappingURL=chunk-ZL6ZITLA.js.map
+//# sourceMappingURL=chunk-WECB67DC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogDescription` instead\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

package/build/modern/{chunk-BAWZBF5Q.js → chunk-WN7TJX6J.js}

@@ -5,7 +5,7 @@ import {
   AccordionItem,
   AccordionItemContent,
   AccordionItemTrigger
-} from "./chunk-IGHMP4WA.js";
+} from "./chunk-AZRFYQO7.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -38,4 +38,4 @@ function AccordionItemGroup(props) {
 export {
   AccordionItemGroup
 };
-//# sourceMappingURL=chunk-BAWZBF5Q.js.map
+//# sourceMappingURL=chunk-WN7TJX6J.js.map

package/build/modern/{chunk-RMVJK26W.js → chunk-XJQXHSH7.js}

@@ -11,7 +11,6 @@ function useRootColors(colors = []) {
   useEffect(() => {
     if (Object.keys(state).length === colors.length) return;
     dispatch(formatColors(colors));
-    console.log("updating colors in root hook");
   }, [colors]);
   return useMemo(
     () => ({ colors: state, refetch: handleRefetch }),
@@ -36,4 +35,4 @@ function rootColorsReducer(state, action) {
 export {
   useRootColors
 };
-//# sourceMappingURL=chunk-RMVJK26W.js.map
+//# sourceMappingURL=chunk-XJQXHSH7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useMemo, useReducer } from 'react'\n\n/**\n * This module provides a hook to get Cerberus colors from the document root.\n * @module useRootColors\n */\n\nexport interface RootColorsResult {\n  /**\n   * A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n   */\n  colors: Record<string, string>\n  /**\n   * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.\n   */\n  refetch: () => Promise<void>\n}\n\n/**\n * This hook returns a record of Cerberus colors from the document root.\n * This is useful when you are working with a component that uses the `<canvas>`\n * element.\n * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).\n * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n */\nexport function useRootColors(colors: string[] = []): RootColorsResult {\n  const [state, dispatch] = useReducer(rootColorsReducer, {})\n\n  const handleRefetch = useCallback(() => {\n    return new Promise<void>((resolve) => {\n      dispatch(formatColors(colors))\n      resolve()\n    })\n  }, [])\n\n  useEffect(() => {\n    if (Object.keys(state).length === colors.length) return\n    dispatch(formatColors(colors))\n  }, [colors])\n\n  // reducer is already memoized\n  return useMemo(\n    () => ({ colors: state, refetch: handleRefetch }),\n    [state, handleRefetch],\n  )\n}\n\nfunction formatColors(colors: string[]): Record<string, string> {\n  const rootStyles = getComputedStyle(document.body)\n  return colors.reduce(\n    (acc, color) => {\n      const formattedColor = color\n        .replace(/([a-z])([A-Z])/g, '$1-$2')\n        .toLowerCase()\n        .replaceAll('.', '-')\n      acc[color] = rootStyles\n        .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n        .trim()\n      return acc\n    },\n    {} as Record<string, string>,\n  )\n}\n\nfunction rootColorsReducer(\n  state: Record<string, string>,\n  action: Record<string, string>,\n): Record<string, string> {\n  return { ...state, ...action }\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,SAAS,kBAAkB;AAyBrD,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE1D,QAAM,gBAAgB,YAAY,MAAM;AACtC,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,eAAS,aAAa,MAAM,CAAC;AAC7B,cAAQ;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AACjD,aAAS,aAAa,MAAM,CAAC;AAAA,EAC/B,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AAAA,IACL,OAAO,EAAE,QAAQ,OAAO,SAAS,cAAc;AAAA,IAC/C,CAAC,OAAO,aAAa;AAAA,EACvB;AACF;AAEA,SAAS,aAAa,QAA0C;AAC9D,QAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,SAAO,OAAO;AAAA,IACZ,CAAC,KAAK,UAAU;AACd,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAK,IAAI,WACV,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}

package/build/modern/chunk-XTNGF4D6.js

@@ -0,0 +1,41 @@
+import {
+  SelectClearTrigger,
+  SelectContent,
+  SelectControl,
+  SelectHiddenSelect,
+  SelectIndicator,
+  SelectItem,
+  SelectItemGroup,
+  SelectItemGroupLabel,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectPositioner,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText
+} from "./chunk-QCBLRACK.js";
+
+// src/components/select/parts.ts
+var SelectParts = {
+  Root: SelectRoot,
+  Label: SelectLabel,
+  Control: SelectControl,
+  Trigger: SelectTrigger,
+  ClearTrigger: SelectClearTrigger,
+  ValueText: SelectValueText,
+  Indicator: SelectIndicator,
+  Positioner: SelectPositioner,
+  Content: SelectContent,
+  ItemGroup: SelectItemGroup,
+  ItemGroupLabel: SelectItemGroupLabel,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  ItemIndicator: SelectItemIndicator,
+  HiddenSelect: SelectHiddenSelect
+};
+
+export {
+  SelectParts
+};
+//# sourceMappingURL=chunk-XTNGF4D6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/select/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  SelectClearTrigger,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectLabel,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValueText,\n} from './primitives'\n\n/**\n * This module contains the parts of the Select parts.\n * @module 'select/parts'\n */\n\ninterface SelectPartsValue {\n  /**\n   * The context provider for the Select component.\n   */\n  Root: ElementType\n  /**\n   * The label that appears above the select input.\n   */\n  Label: ElementType\n  /**\n   * The control that wraps the select trigger.\n   */\n  Control: ElementType\n  /**\n   * The trigger that opens the dropdown.\n   */\n  Trigger: ElementType\n  /**\n   * The trigger to clear the select input.\n   */\n  ClearTrigger: ElementType\n  /**\n   * The text that appears in the trigger.\n   */\n  ValueText: ElementType\n  /**\n   * The indicator that appears in the trigger.\n   */\n  Indicator: ElementType\n  /**\n   * The positioner that wraps the content.\n   */\n  Positioner: ElementType\n  /**\n   * The content of the select component.\n   */\n  Content: ElementType\n  /**\n   * A group of items in the select component.\n   */\n  ItemGroup: ElementType\n  /**\n   * The label for a group of items in the select component.\n   */\n  ItemGroupLabel: ElementType\n  /**\n   * An individual item in the select component.\n   */\n  Item: ElementType\n  /**\n   * The text that labels a single radio of the field.\n   */\n  ItemText: ElementType\n  /**\n   * The indicator that appears when the item has been selected.\n   */\n  ItemIndicator: ElementType\n  /**\n   * The native select for use within a field.\n   */\n  HiddenSelect: ElementType\n}\n\n/**\n * An Object containing the parts of the Radio component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the SelectParts object and\n * the entire family of components vs. only what you use.\n */\nexport const SelectParts: SelectPartsValue = {\n  Root: SelectRoot,\n  Label: SelectLabel,\n  Control: SelectControl,\n  Trigger: SelectTrigger,\n  ClearTrigger: SelectClearTrigger,\n  ValueText: SelectValueText,\n  Indicator: SelectIndicator,\n  Positioner: SelectPositioner,\n  Content: SelectContent,\n  ItemGroup: SelectItemGroup,\n  ItemGroupLabel: SelectItemGroupLabel,\n  Item: SelectItem,\n  ItemText: SelectItemText,\n  ItemIndicator: SelectItemIndicator,\n  HiddenSelect: SelectHiddenSelect,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgGO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAc;AAAA,EACd,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAChB;","names":[]}

package/build/modern/chunk-Y4ZEJ2EF.js

@@ -0,0 +1,31 @@
+import {
+  CheckboxIcon
+} from "./chunk-EL4MX2PG.js";
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
+import {
+  CheckboxParts
+} from "./chunk-KWZ3CEG6.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/checkbox/checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox(props) {
+  const { size, children, ...rootProps } = props;
+  return /* @__PURE__ */ jsxs(CheckboxParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(CheckboxParts.Control, { size, children: /* @__PURE__ */ jsx(CheckboxIcon, { indeterminate: rootProps.checked === "indeterminate" }) }),
+    /* @__PURE__ */ jsxs(CheckboxParts.Label, { size, children: [
+      children,
+      /* @__PURE__ */ jsx(Show, { when: props.required, children: /* @__PURE__ */ jsx(Text, { as: "span", "data-part": "required-indicator", children: "(required)" }) })
+    ] }),
+    /* @__PURE__ */ jsx(CheckboxParts.HiddenInput, {})
+  ] });
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-Y4ZEJ2EF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import type { CheckboxRootProps } from '@ark-ui/react'\nimport { type CheckboxVariantProps } from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Text } from '../Text'\nimport { CheckboxParts } from './parts'\nimport { CheckboxIcon } from './checkbox-icon'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps & CheckboxRootProps\n\n/**\n * Checkbox component is an abstraction of the primitives that displays a\n * controlled checkbox with a label.\n * @description [Cerberus Docs] https://cerberus.digitalu.design/react/checkbox\n * @description [Ark Docs] https://ark-ui.com/docs/components/checkbox\n */\nexport function Checkbox(props: CheckboxProps) {\n  const { size, children, ...rootProps } = props\n\n  return (\n    <CheckboxParts.Root {...rootProps}>\n      <CheckboxParts.Control size={size}>\n        <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />\n      </CheckboxParts.Control>\n\n      <CheckboxParts.Label size={size}>\n        {children}\n        <Show when={props.required}>\n          <Text as=\"span\" data-part=\"required-indicator\">\n            (required)\n          </Text>\n        </Show>\n      </CheckboxParts.Label>\n\n      <CheckboxParts.HiddenInput />\n    </CheckboxParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BQ,cAGF,YAHE;AAND,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,MAAM,UAAU,GAAG,UAAU,IAAI;AAEzC,SACE,qBAAC,cAAc,MAAd,EAAoB,GAAG,WACtB;AAAA,wBAAC,cAAc,SAAd,EAAsB,MACrB,8BAAC,gBAAa,eAAe,UAAU,YAAY,iBAAiB,GACtE;AAAA,IAEA,qBAAC,cAAc,OAAd,EAAoB,MAClB;AAAA;AAAA,MACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,aAAU,sBAAqB,wBAE/C,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,cAAc,aAAd,EAA0B;AAAA,KAC7B;AAEJ;","names":[]}

package/build/modern/{chunk-WPVDQRRF.js → chunk-YOTXFCCC.js}

@@ -2,7 +2,7 @@ import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 
-// src/components/NavMenuLink.tsx
+// src/components/deprecated/NavMenuLink.tsx
 import { css, cx } from "@cerberus/styled-system/css";
 import { jsx } from "react/jsx-runtime";
 function NavMenuLink(props) {
@@ -45,4 +45,4 @@ function NavMenuLink(props) {
 export {
   NavMenuLink
 };
-//# sourceMappingURL=chunk-WPVDQRRF.js.map
+//# sourceMappingURL=chunk-YOTXFCCC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from '../Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAkCd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-Z3FDG263.js

@@ -0,0 +1,53 @@
+// src/components/fieldset/primitives.tsx
+import {
+  Fieldset
+} from "@ark-ui/react/fieldset";
+import { cx } from "@cerberus/styled-system/css";
+import {
+  fieldset
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldsetRoot(props) {
+  const styles = fieldset();
+  return /* @__PURE__ */ jsx(Fieldset.Root, { ...props, className: cx(styles.root, props.className) });
+}
+function FieldsetLegend(props) {
+  const { usage, ...legendProps } = props;
+  const styles = fieldset({ usage });
+  return /* @__PURE__ */ jsx(
+    Fieldset.Legend,
+    {
+      ...legendProps,
+      className: cx(styles.legend, legendProps.className)
+    }
+  );
+}
+function FieldsetHelperText(props) {
+  const { usage, ...helperTextProps } = props;
+  const styles = fieldset({ usage });
+  return /* @__PURE__ */ jsx(
+    Fieldset.HelperText,
+    {
+      ...helperTextProps,
+      className: cx(styles.helperText, helperTextProps.className)
+    }
+  );
+}
+function FieldsetErrorText(props) {
+  const styles = fieldset();
+  return /* @__PURE__ */ jsx(
+    Fieldset.ErrorText,
+    {
+      ...props,
+      className: cx(styles.errorText, props.className)
+    }
+  );
+}
+
+export {
+  FieldsetRoot,
+  FieldsetLegend,
+  FieldsetHelperText,
+  FieldsetErrorText
+};
+//# sourceMappingURL=chunk-Z3FDG263.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/fieldset/primitives.tsx"],"sourcesContent":["import {\n  Fieldset,\n  type FieldsetHelperTextProps,\n  type FieldsetLegendProps,\n  type FieldsetRootProps,\n} from '@ark-ui/react/fieldset'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  fieldset,\n  type FieldsetVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains all the primitives of the Fieldset component.\n * @module 'react/fieldset'\n */\n\n/**\n * The context & container for the Fieldset components.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetRoot(props: FieldsetRootProps) {\n  const styles = fieldset()\n  return (\n    <Fieldset.Root {...props} className={cx(styles.root, props.className)} />\n  )\n}\n\n/**\n * The legend element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetLegend(\n  props: FieldsetLegendProps & FieldsetVariantProps,\n) {\n  const { usage, ...legendProps } = props\n  const styles = fieldset({ usage })\n  return (\n    <Fieldset.Legend\n      {...legendProps}\n      className={cx(styles.legend, legendProps.className)}\n    />\n  )\n}\n\n/**\n * The description element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetHelperText(\n  props: FieldsetHelperTextProps & FieldsetVariantProps,\n) {\n  const { usage, ...helperTextProps } = props\n  const styles = fieldset({ usage })\n  return (\n    <Fieldset.HelperText\n      {...helperTextProps}\n      className={cx(styles.helperText, helperTextProps.className)}\n    />\n  )\n}\n\n/**\n * The error text element for the Fieldset group.\n * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)\n * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)\n */\nexport function FieldsetErrorText(props: FieldsetHelperTextProps) {\n  const styles = fieldset()\n  return (\n    <Fieldset.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAeH;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,SAAS,SAAS;AACxB,SACE,oBAAC,SAAS,MAAT,EAAe,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAE3E;AAOO,SAAS,eACd,OACA;AACA,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,QAAM,SAAS,SAAS,EAAE,MAAM,CAAC;AACjC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,QAAQ,YAAY,SAAS;AAAA;AAAA,EACpD;AAEJ;AAOO,SAAS,mBACd,OACA;AACA,QAAM,EAAE,OAAO,GAAG,gBAAgB,IAAI;AACtC,QAAM,SAAS,SAAS,EAAE,MAAM,CAAC;AACjC,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,gBAAgB,SAAS;AAAA;AAAA,EAC5D;AAEJ;AAOO,SAAS,kBAAkB,OAAgC;AAChE,QAAM,SAAS,SAAS;AACxB,SACE;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;","names":[]}

package/build/modern/{chunk-JAROS4Q3.js → chunk-Z4342DRO.js}

@@ -7,15 +7,6 @@ import {
 import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-import {
-  Button
-} from "./chunk-EXGKZGML.js";
 import {
   addNotification,
   clearNotificationState,
@@ -23,6 +14,15 @@ import {
   removeNotification,
   updateNotificationState
 } from "./chunk-V3M3ZOQI.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  Button
+} from "./chunk-6KZVE4HC.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 
 // src/context/notification-center.tsx
 import {
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-JAROS4Q3.js.map
+//# sourceMappingURL=chunk-Z4342DRO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/button/button'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-Z52R6ABJ.js

@@ -0,0 +1,21 @@
+// src/components/field/start-indicator.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { field } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldStartIndicator(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "data-part": "start-indicator",
+      className: cx(props.className, styles.startIndicator)
+    }
+  );
+}
+
+export {
+  FieldStartIndicator
+};
+//# sourceMappingURL=chunk-Z52R6ABJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/start-indicator.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { field } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The start indicator displays an indicator at the start of the Input.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n */\nexport function FieldStartIndicator(props: FieldIndicatorProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <span\n      {...props}\n      data-part=\"start-indicator\"\n      className={cx(props.className, styles.startIndicator)}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAelB;AANG,SAAS,oBAAoB,OAA4B;AAC9D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/build/modern/{chunk-O6LFWUHI.js → chunk-ZFFW5ELD.js}

@@ -1,18 +1,18 @@
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
-import {
-  FieldMessage
-} from "./chunk-JWIJHSI6.js";
-import {
-  Field
-} from "./chunk-UZDVOIW5.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
 import {
   Avatar
-} from "./chunk-GCQMH4QA.js";
+} from "./chunk-SXLPDPOZ.js";
+import {
+  Field
+} from "./chunk-FBS7AX76.js";
+import {
+  FieldHelperText
+} from "./chunk-VSTOSLFS.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.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-O6LFWUHI.js.map
+//# sourceMappingURL=chunk-ZFFW5ELD.js.map