@cerberus-design/react 0.8.0 → 0.8.1

package/build/modern/_tsup-dts-rollup.d.ts

@@ -11,6 +11,7 @@ import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
 import { CarbonIconType } from '@cerberus/icons';
 import { ChangeEvent } from 'react';
+import { CheckboxVariantProps } from '@cerberus/styled-system/recipes';
 import { ClientRect as ClientRect_2 } from '@dnd-kit/core';
 import { closestCenter } from '@dnd-kit/core';
 import { closestCorners } from '@dnd-kit/core';
@@ -53,6 +54,7 @@ import { DroppableContainers } from '@dnd-kit/core';
 import { DroppableMeasuring } from '@dnd-kit/core';
 import { ElementType } from 'react';
 import { fieldMessage } from '@cerberus/styled-system/recipes';
+import { FileStatusVariantProps } from '@cerberus/styled-system/recipes';
 import { ForwardRefExoticComponent } from 'react';
 import { getClientRect } from '@dnd-kit/core';
 import { getFirstCollision } from '@dnd-kit/core';
@@ -82,6 +84,7 @@ import { MouseSensor } from '@dnd-kit/core';
 import { MouseSensorOptions } from '@dnd-kit/core';
 import { MutableRefObject } from 'react';
 import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
+import type { OptionHTMLAttributes } from 'react';
 import { Over } from '@dnd-kit/core';
 import { PointerActivationConstraint } from '@dnd-kit/core';
 import { PointerEventHandlers } from '@dnd-kit/core';
@@ -90,6 +93,7 @@ import { PointerSensorOptions } from '@dnd-kit/core';
 import { PointerSensorProps } from '@dnd-kit/core';
 import { pointerWithin } from '@dnd-kit/core';
 import type { Pretty } from '@cerberus/styled-system/types';
+import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
 import { PropsWithChildren } from 'react';
 import { radio } from '@cerberus/styled-system/recipes';
 import { ReactNode } from 'react';
@@ -100,6 +104,8 @@ import { rectIntersection } from '@dnd-kit/core';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { ScreenReaderInstructions } from '@dnd-kit/core';
+import type { SelectHTMLAttributes } from 'react';
+import { SelectVariantProps } from '@cerberus/styled-system/recipes';
 import { Sensor } from '@dnd-kit/core';
 import { SensorContext } from '@dnd-kit/core';
 import { SensorDescriptor } from '@dnd-kit/core';
@@ -109,6 +115,7 @@ import { SensorOptions } from '@dnd-kit/core';
 import { SensorProps } from '@dnd-kit/core';
 import { SensorResponse } from '@dnd-kit/core';
 import { Sensors } from '@dnd-kit/core';
+import type { SVGProps } from 'react';
 import type { TableHTMLAttributes } from 'react';
 import { TabsVariantProps } from '@cerberus/styled-system/recipes';
 import { tag } from '@cerberus/styled-system/recipes';
@@ -178,6 +185,46 @@ export { ButtonProps as ButtonProps_alias_1 }
 
 export { CancelDrop }
 
+/**
+ * Checkbox component
+ * @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)
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Checkbox docs](https://cerberus.digitalu.design/react/checkbox)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
+ * </Field>
+ * ```
+ */
+declare function Checkbox(props: CheckboxProps): JSX_2.Element;
+export { Checkbox }
+export { Checkbox as Checkbox_alias_1 }
+
+/**
+ * This module contains substitute icons for the Checkbox component.
+ * @module
+ */
+declare interface CheckboxIconProps extends SVGProps<SVGSVGElement> {
+}
+
+/**
+ * This module contains the Checkbox component.
+ * @module
+ */
+declare type CheckboxProps = CheckboxVariantProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+    describedBy?: string;
+    id: string;
+    mixed?: boolean;
+};
+export { CheckboxProps }
+export { CheckboxProps as CheckboxProps_alias_1 }
+
+/**
+ * Checkmark icon for Checkbox component
+ */
+export declare function CheckmarkIcon(props: CheckboxIconProps): JSX_2.Element;
+
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
     gradient?: never;
     palette?: never;
@@ -272,14 +319,21 @@ export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
 export declare interface DefinedIcons {
+    checkbox?: IconType;
+    close?: IconType;
     confirmModal?: IconType;
+    delete?: IconType;
     promptModal?: IconType;
     fileUploader?: IconType;
+    indeterminate?: IconType;
     infoNotification?: IconType;
     successNotification?: IconType;
     warningNotification?: IconType;
     dangerNotification?: IconType;
     invalid: IconType;
+    invalidAlt?: IconType;
+    redo?: IconType;
+    selectArrow?: IconType;
     toggleChecked?: IconType;
 }
 
@@ -448,6 +502,48 @@ declare type FieldMessageRecipe = RecipeVariantProps<typeof fieldMessage>;
 export { FieldMessageRecipe }
 export { FieldMessageRecipe as FieldMessageRecipe_alias_1 }
 
+declare interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    file: string;
+    now: number;
+    status: processStatus;
+    onClick: (status: FileStatusActions, e: MouseEvent_2<HTMLButtonElement>) => void;
+}
+export { FileBaseStatusProps }
+export { FileBaseStatusProps as FileBaseStatusProps_alias_1 }
+
+/**
+ * This component displays the status of a file.
+ * @param props - {
+ *  file: string,
+ *  now: number,
+ *  status: keyof typeof fileStatus,
+ *  action: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void
+ * }.
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+declare function FileStatus(props: FileStatusProps): JSX_2.Element;
+export { FileStatus }
+export { FileStatus as FileStatus_alias_1 }
+
+declare type FileStatusActions = 'cancel' | 'retry' | 'delete';
+export { FileStatusActions }
+export { FileStatusActions as FileStatusActions_alias_1 }
+
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+declare type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
+export { FileStatusKey }
+export { FileStatusKey as FileStatusKey_alias_1 }
+
+declare type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+export { FileStatusProps }
+export { FileStatusProps as FileStatusProps_alias_1 }
+
 declare function FileUploader(props: FileUploaderProps): JSX_2.Element;
 export { FileUploader }
 export { FileUploader as FileUploader_alias_1 }
@@ -505,6 +601,21 @@ export { IconButtonRecipeProps as IconButtonRecipeProps_alias_1 }
 
 export declare type IconType = CarbonIconType | ElementType;
 
+/**
+ * Indeterminate icon for Checkbox component
+ */
+export declare function IndeterminateIcon(props: IndeterminateIconProps): JSX_2.Element;
+
+declare interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {
+}
+
+declare type IndeterminateProgressBarProps = {
+    indeterminate: true;
+    now?: never;
+};
+export { IndeterminateProgressBarProps }
+export { IndeterminateProgressBarProps as IndeterminateProgressBarProps_alias_1 }
+
 declare function Input(props: InputProps): JSX_2.Element;
 export { Input }
 export { Input as Input_alias_1 }
@@ -664,11 +775,7 @@ declare function ModalIcon(props: PropsWithChildren<ModalIconProps>): JSX_2.Elem
 export { ModalIcon }
 export { ModalIcon as ModalIcon_alias_1 }
 
-declare type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>;
-export { ModalIconBaseProps }
-export { ModalIconBaseProps as ModalIconBaseProps_alias_1 }
-
-declare type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps;
+declare type ModalIconProps = HTMLAttributes<HTMLDivElement> & ModalIconVariantProps;
 export { ModalIconProps }
 export { ModalIconProps as ModalIconProps_alias_1 }
 
@@ -781,6 +888,13 @@ declare type NavTriggerRef = RefObject<HTMLButtonElement>;
 export { NavTriggerRef }
 export { NavTriggerRef as NavTriggerRef_alias_1 }
 
+declare type NonIndeterminateProgressBarProps = {
+    indeterminate?: never;
+    now: number;
+};
+export { NonIndeterminateProgressBarProps }
+export { NonIndeterminateProgressBarProps as NonIndeterminateProgressBarProps_alias_1 }
+
 /**
  * The info notification component.
  * @param props - The component props.
@@ -884,6 +998,22 @@ declare interface NotifyOptions {
 export { NotifyOptions }
 export { NotifyOptions as NotifyOptions_alias_1 }
 
+/**
+ * Option component
+ * props: OptionHTMLAttributes<HTMLOptionElement>
+ * @example
+ * ```tsx
+ * <Option value="one">Option 1</Option>
+ * ```
+ */
+declare function Option_2(props: OptionProps): JSX_2.Element;
+export { Option_2 as Option }
+export { Option_2 as Option_alias_1 }
+
+declare type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;
+export { OptionProps }
+export { OptionProps as OptionProps_alias_1 }
+
 export { Over }
 
 export { PointerActivationConstraint }
@@ -922,6 +1052,50 @@ declare type Positions = 'top' | 'right' | 'bottom' | 'left';
 export { Positions }
 export { Positions as Positions_alias_1 }
 
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+declare const enum processStatus {
+    TODO = "todo",
+    PROCESSING = "processing",
+    DONE = "done",
+    ERROR = "error"
+}
+export { processStatus }
+export { processStatus as processStatus_alias_1 }
+
+/**
+ * The ProgressBar component is used to display the progress of a task.
+ * @param props - HTML div element attributes
+ * @param props.now - The current value of the progress bar
+ * @param props.indeterminate - Whether the progress bar is indeterminate
+ * @example
+ * ```tsx
+ * <ProgressBar value={75} />
+ * ```
+ */
+declare function ProgressBar(props: ProgressBarProps): JSX_2.Element;
+export { ProgressBar }
+export { ProgressBar as ProgressBar_alias_1 }
+
+/**
+ * This module contains the ProgressBar component.
+ * @module
+ */
+declare interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {
+}
+export { ProgressBarBaseProps }
+export { ProgressBarBaseProps as ProgressBarBaseProps_alias_1 }
+
+declare type ProgressBarProps = ProgressBarBaseProps & ProgressBarVariantProps & (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps);
+export { ProgressBarProps }
+export { ProgressBarProps as ProgressBarProps_alias_1 }
+
 /**
  * Provides a prompt modal to the app.
  * @example
@@ -989,6 +1163,34 @@ export { rectIntersection }
 
 export { ScreenReaderInstructions }
 
+/**
+ * Select component
+ * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }
+ * @example
+ * ```tsx
+ * <Select describedby="help:fruit" id="fruit">
+ *  <Option value="">Choose option</Option>
+ *  <Option value="one">Option 1</Option>
+ *  <Option value="two">Option 2</Option>
+ *  <Option value="three">Option 3</Option>
+ * </Select>
+ * ```
+ */
+declare function Select(props: SelectProps): JSX_2.Element;
+export { Select }
+export { Select as Select_alias_1 }
+
+/**
+ * This module contains the select components.
+ * @module
+ */
+declare type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & SelectVariantProps & {
+    id: string;
+    describedBy?: string;
+};
+export { SelectProps }
+export { SelectProps as SelectProps_alias_1 }
+
 export { Sensor }
 
 export { SensorContext }

package/build/{legacy/chunk-JJGZRBIR.js → modern/chunk-2FK7NR7Y.js}

@@ -1,9 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -18,12 +18,13 @@ function Label(props) {
     "label",
     {
       ...nativeProps,
-      "data-disabled": disabled,
+      ...disabled && { "data-disabled": true },
       className: cx(
         nativeProps.className,
         label({ size, usage }),
         hstack({
-          justify: "space-between"
+          justify: "space-between",
+          w: "full"
         })
       ),
       children: [
@@ -32,7 +33,7 @@ function Label(props) {
           "span",
           {
             className: css({
-              color: "page.text.100",
+              color: "inherit",
               fontSize: "inherit"
             }),
             children: "(required)"
@@ -46,4 +47,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JJGZRBIR.js.map
+//# sourceMappingURL=chunk-2FK7NR7Y.js.map

package/build/{legacy/chunk-JJGZRBIR.js.map → modern/chunk-2FK7NR7Y.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      data-disabled={disabled}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      {...(disabled && { 'data-disabled': true })}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n          w: 'full',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'inherit',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAcI,KAdJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,iBAAiB,KAAK;AAAA,MACzC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-4FD33RTW.js

@@ -0,0 +1,56 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+import {
+  $cerberusIcons
+} from "./chunk-5WVXIAG2.js";
+
+// src/components/Checkbox.tsx
+import {
+  checkbox
+} from "@cerberus/styled-system/recipes";
+import { vstack } from "@cerberus/styled-system/patterns";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox(props) {
+  const { describedBy, size, checked, mixed, ...nativeProps } = props;
+  const { invalid, ...fieldStates } = useFieldContext();
+  const styles = checkbox({ size });
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = $cerberusIcons;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        styles.root,
+        vstack({
+          gap: "0",
+          justify: "center"
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...nativeProps,
+            ...fieldStates,
+            ...describedBy && { "aria-describedby": describedBy },
+            ...invalid && { "aria-invalid": true },
+            ...mixed && { "aria-checked": "mixed" },
+            className: cx("peer", nativeProps.className, styles.input),
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx(Show, { when: checked && !mixed, children: /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
+        /* @__PURE__ */ jsx(Show, { when: mixed, children: /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(IndeterminateIcon, {}) }) })
+      ]
+    }
+  );
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-4FD33RTW.js.map

package/build/modern/chunk-4FD33RTW.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 { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n    describedBy?: string\n    id: string\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 * @definition [Checkbox docs](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 { describedBy, size, checked, mixed, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const styles = checkbox({ size })\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =\n    $cerberusIcons\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        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        {...(mixed && { 'aria-checked': 'mixed' })}\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;AAsCf,SASE,KATF;AARG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAC5D;AAEF,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,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,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-XB4ZRAH4.js → chunk-53QBTZZF.js}

@@ -1,12 +1,12 @@
-import {
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-BEYPMC73.js";
+} from "./chunk-5WVXIAG2.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-XB4ZRAH4.js.map
+//# sourceMappingURL=chunk-53QBTZZF.js.map

package/build/modern/{chunk-BEYPMC73.js → chunk-5WVXIAG2.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-GVNPFXKL.js";
+} from "./chunk-GUECLKHY.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-BEYPMC73.js.map
+//# sourceMappingURL=chunk-5WVXIAG2.js.map