@cerberus-design/react 0.13.2-next-46f23d2 → 0.13.2-next-b5a889e

package/build/legacy/components/Checkbox.cjs

@@ -190,6 +190,9 @@ function AnimatingUploadIcon(props) {
 // src/config/cerbIcons.ts
 var defaultIcons = {
   avatar: import_icons.UserFilled,
+  calendar: import_icons.Calendar,
+  calendarPrev: import_icons.ChevronLeft,
+  calendarNext: import_icons.ChevronRight,
   checkbox: CheckmarkIcon,
   close: import_icons.Close,
   confirmModal: import_icons.Information,

package/build/legacy/components/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Checkbox.tsx","../../../src/components/Show.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"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    /**\n     * The id of the FieldMessage element describing the Checkbox.\n     */\n    describedBy?: string\n    /**\n     * The unique identifier for the checkbox. Required for accessibility.\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 { 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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","IndeterminateIcon"]}
+{"version":3,"sources":["../../../src/components/Checkbox.tsx","../../../src/components/Show.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"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    /**\n     * The id of the FieldMessage element describing the Checkbox.\n     */\n    describedBy?: string\n    /**\n     * The unique identifier for the checkbox. Required for accessibility.\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 { 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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  Calendar,\n  Checkmark,\n  CheckmarkOutline,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  Close,\n  CloudUpload,\n  Information,\n  Restart,\n  TrashCan,\n  UserFilled,\n  Warning,\n  WarningAlt,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  avatar?: IconType\n  calendar?: IconType\n  calendarPrev?: IconType\n  calendarNext?: IconType\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  waitingFileUploader?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  avatar: UserFilled,\n  calendar: Calendar,\n  calendarPrev: ChevronLeft,\n  calendarNext: ChevronRight,\n  checkbox: CheckmarkIcon,\n  close: Close,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  waitingFileUploader: CloudUpload,\n  fileUploader: AnimatingUploadIcon,\n  indeterminate: IndeterminateIcon,\n  infoNotification: Information,\n  successNotification: CheckmarkOutline,\n  warningNotification: WarningAlt,\n  dangerNotification: WarningFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      role=\"img\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n      />\n    </svg>\n  )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      {...props}\n    >\n      <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n    </svg>\n  )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={props.size ?? '1em'}\n      height={props.size ?? '1em'}\n      viewBox=\"0 0 24 24\"\n    >\n      <g\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"square\"\n        strokeLinejoin=\"round\"\n        strokeWidth={1.5}\n      >\n        <path\n          data-name=\"animating-trail\"\n          strokeDasharray=\"2 4\"\n          strokeDashoffset={6}\n          d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n        >\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            dur=\"0.45s\"\n            repeatCount=\"indefinite\"\n            values=\"6;0\"\n          ></animate>\n        </path>\n\n        <path\n          data-name=\"half-circle\"\n          strokeDasharray={32}\n          strokeDashoffset={32}\n          d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n        >\n          <animate\n            fill=\"freeze\"\n            attributeName=\"stroke-dashoffset\"\n            begin=\"0.075s\"\n            dur=\"0.3s\"\n            values=\"32;0\"\n          ></animate>\n        </path>\n\n        <svg\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"0.8em\"\n          height=\"0.8em\"\n          x=\"27%\"\n          y=\"27%\"\n          viewBox=\"0 0 24 24\"\n        >\n          <polygon\n            fill=\"currentColor\"\n            stroke=\"currentColor\"\n            strokeWidth={0.8}\n            opacity=\"1\"\n            points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n          >\n            <animate\n              fill=\"freeze\"\n              attributeName=\"opacity\"\n              values=\"1;0;1\"\n              dur=\"2s\"\n              repeatCount=\"indefinite\"\n            ></animate>\n          </polygon>\n        </svg>\n      </g>\n    </svg>\n  )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n  if (!icons.invalid) {\n    throw new Error(\n      'The an invalid property must be defined in your custom icons library.',\n    )\n  }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n  _validateIconsProperties(icons)\n  $cerberusIcons = {\n    ...defaultIcons,\n    ...icons,\n  } as Required<DefinedIcons>\n  return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":"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","names":["import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","IndeterminateIcon"]}

package/build/legacy/components/DatePicker.client.cjs

@@ -0,0 +1,525 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/DatePicker.client.tsx
+var DatePicker_client_exports = {};
+__export(DatePicker_client_exports, {
+  DatePicker: () => DatePicker,
+  DatePickerCalendar: () => DatePickerCalendar,
+  DatePickerContent: () => DatePickerContent,
+  DatePickerDayView: () => DatePickerDayView,
+  DatePickerInput: () => DatePickerInput,
+  DatePickerMonthView: () => DatePickerMonthView,
+  DatePickerYearView: () => DatePickerYearView,
+  RangePickerInput: () => RangePickerInput
+});
+module.exports = __toCommonJS(DatePicker_client_exports);
+var import_react5 = require("@ark-ui/react");
+
+// src/components/Portal.tsx
+var import_react = require("@ark-ui/react");
+var Portal = import_react.Portal;
+
+// src/components/DatePicker.client.tsx
+var import_react6 = require("react");
+var import_recipes4 = require("@cerberus/styled-system/recipes");
+var import_css4 = require("@cerberus/styled-system/css");
+
+// src/context/field.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FieldContext = (0, import_react2.createContext)(null);
+function useFieldContext() {
+  const context = (0, import_react2.useContext)(FieldContext);
+  if (!context) {
+    throw new Error("useFieldContext must be used within a Field Provider.");
+  }
+  return context;
+}
+
+// src/components/DatePicker.server.tsx
+var import_react3 = require("@ark-ui/react");
+var import_css3 = require("@cerberus/styled-system/css");
+var import_recipes3 = require("@cerberus/styled-system/recipes");
+
+// src/config/cerbIcons.ts
+var import_icons = require("@cerberus/icons");
+
+// src/config/icons/checkbox.icons.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      role: "img",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+        }
+      )
+    }
+  );
+}
+function IndeterminateIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+
+// src/components/AnimatingUploadIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AnimatingUploadIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: props.size ?? "1em",
+      height: props.size ?? "1em",
+      viewBox: "0 0 24 24",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "g",
+        {
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "square",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "animating-trail",
+                strokeDasharray: "2 4",
+                strokeDashoffset: 6,
+                d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    attributeName: "stroke-dashoffset",
+                    dur: "0.45s",
+                    repeatCount: "indefinite",
+                    values: "6;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "path",
+              {
+                "data-name": "half-circle",
+                strokeDasharray: 32,
+                strokeDashoffset: 32,
+                d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "animate",
+                  {
+                    fill: "freeze",
+                    attributeName: "stroke-dashoffset",
+                    begin: "0.075s",
+                    dur: "0.3s",
+                    values: "32;0"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "svg",
+              {
+                "aria-hidden": "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "0.8em",
+                height: "0.8em",
+                x: "27%",
+                y: "27%",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "polygon",
+                  {
+                    fill: "currentColor",
+                    stroke: "currentColor",
+                    strokeWidth: 0.8,
+                    opacity: "1",
+                    points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "animate",
+                      {
+                        fill: "freeze",
+                        attributeName: "opacity",
+                        values: "1;0;1",
+                        dur: "2s",
+                        repeatCount: "indefinite"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/config/cerbIcons.ts
+var defaultIcons = {
+  avatar: import_icons.UserFilled,
+  calendar: import_icons.Calendar,
+  calendarPrev: import_icons.ChevronLeft,
+  calendarNext: import_icons.ChevronRight,
+  checkbox: CheckmarkIcon,
+  close: import_icons.Close,
+  confirmModal: import_icons.Information,
+  delete: import_icons.TrashCan,
+  promptModal: import_icons.Information,
+  waitingFileUploader: import_icons.CloudUpload,
+  fileUploader: AnimatingUploadIcon,
+  indeterminate: IndeterminateIcon,
+  infoNotification: import_icons.Information,
+  successNotification: import_icons.CheckmarkOutline,
+  warningNotification: import_icons.WarningAlt,
+  dangerNotification: import_icons.WarningFilled,
+  invalid: import_icons.WarningFilled,
+  invalidAlt: import_icons.Warning,
+  redo: import_icons.Restart,
+  selectArrow: import_icons.ChevronDown,
+  toggleChecked: import_icons.Checkmark
+};
+
+// src/config/defineIcons.ts
+var $cerberusIcons = defaultIcons;
+
+// src/components/IconButton.tsx
+var import_css = require("@cerberus/styled-system/css");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function IconButton(props) {
+  const { ariaLabel, palette, usage, size, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      "aria-label": ariaLabel ?? "Icon Button",
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.iconButton)({
+          palette,
+          usage,
+          size
+        })
+      )
+    }
+  );
+}
+
+// src/components/Button.tsx
+var import_css2 = require("@cerberus/styled-system/css");
+var import_recipes2 = require("@cerberus/styled-system/recipes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Button(props) {
+  const { palette, usage, shape, ...nativeProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      ...nativeProps,
+      className: (0, import_css2.cx)(
+        nativeProps.className,
+        (0, import_recipes2.button)({
+          palette,
+          usage,
+          shape
+        })
+      )
+    }
+  );
+}
+
+// src/components/DatePicker.server.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var datePickerStyles = (0, import_recipes3.datePicker)();
+function DatePickerTrigger(props) {
+  const { calendar: CalendarIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Trigger,
+    {
+      ...props,
+      className: (0, import_css3.cx)(
+        props.className,
+        (0, import_recipes3.iconButton)({
+          size: "sm",
+          usage: "ghost"
+        }),
+        datePickerStyles.trigger
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarIcon, {})
+    }
+  );
+}
+function DatePickerViewControl(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Control,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.viewControl)
+    }
+  );
+}
+function DatePickerViewControlGroup(props) {
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.PrevTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PrevIcon, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.ViewTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        className: (0, import_css3.css)({
+          h: "2rem",
+          paddingInline: "md"
+        }),
+        shape: "rounded",
+        size: "sm",
+        usage: "ghost",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.RangeText, {})
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.DatePicker.NextTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NextIcon, {}) }) })
+  ] });
+}
+function DatePickerTable(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.Table,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.table)
+    }
+  );
+}
+function DatePickerTableHeader(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableHeader,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableHeader)
+    }
+  );
+}
+function DatePickerTableCell(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableCell,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCell)
+    }
+  );
+}
+function DatePickerTableCellTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_react3.DatePicker.TableCellTrigger,
+    {
+      ...props,
+      className: (0, import_css3.cx)(props.className, datePickerStyles.tableCellTrigger)
+    }
+  );
+}
+var DatePickerView = import_react3.DatePicker.View;
+var DatePickerContext = import_react3.DatePicker.Context;
+
+// src/hooks/useDate.ts
+var import_react4 = require("react");
+function formatISOToMilitary(date) {
+  const [year, month, day] = date.split("-");
+  const monthIndex = parseInt(month, 10) - 1;
+  const monthStr = MONTHS[monthIndex];
+  return `${day} ${monthStr} ${year}`;
+}
+var MONTHS = [
+  "JAN",
+  "FEB",
+  "MAR",
+  "APR",
+  "MAY",
+  "JUN",
+  "JUL",
+  "AUG",
+  "SEP",
+  "OCT",
+  "NOV",
+  "DEC"
+];
+
+// src/components/DatePicker.client.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var datePickerStyles2 = (0, import_recipes4.datePicker)();
+function DatePicker(props) {
+  const states = useFieldContext();
+  const handleFormat = (0, import_react6.useCallback)((value) => {
+    return formatISOToMilitary(value.toString());
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react5.DatePicker.Root,
+    {
+      ...props,
+      ...states,
+      format: handleFormat,
+      positioning: {
+        placement: "bottom-start"
+      }
+    }
+  );
+}
+function DatePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react5.DatePicker.Control, { className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react5.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11
+      }
+    )
+  ] });
+}
+function RangePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react5.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTrigger, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react5.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react5.DatePicker.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        "data-range-end-input": true,
+        className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 1
+      }
+    )
+  ] });
+}
+function DatePickerContent(props) {
+  const { children, ...contentProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.Positioner, { className: datePickerStyles2.positioner, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react5.DatePicker.Content,
+    {
+      ...contentProps,
+      className: (0, import_css4.cx)(contentProps.className, datePickerStyles2.content),
+      children
+    }
+  ) }) });
+}
+function DatePickerDayView(props) {
+  function isToday(date) {
+    const today = /* @__PURE__ */ new Date();
+    const formatted = today.toISOString().split("T")[0];
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return formatted === arkDate;
+  }
+  function isPastDay(date) {
+    const today = /* @__PURE__ */ new Date();
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return new Date(arkDate) < today;
+  }
+  function getDayValue(date) {
+    if (isToday(date)) return "today";
+    if (isPastDay(date)) return "past";
+    return "future";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerContext, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerTable, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableRow, { children: datePicker3.weekDays.map((weekDay, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.weeks.map((week, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: day, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        DatePickerTableCellTrigger,
+        {
+          "data-date": getDayValue(day),
+          children: day.day
+        }
+      ) }, id2)) }, id)) })
+    ] })
+  ] }) }) });
+}
+function DatePickerMonthView(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.View, { ...props, view: "month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerYearView(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.View, { ...props, view: "year", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.Context, { children: (datePicker3) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTable, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableBody, { children: datePicker3.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react5.DatePicker.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerCalendar() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DatePickerContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerDayView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerMonthView, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerYearView, {})
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker,
+  DatePickerCalendar,
+  DatePickerContent,
+  DatePickerDayView,
+  DatePickerInput,
+  DatePickerMonthView,
+  DatePickerYearView,
+  RangePickerInput
+});
+//# sourceMappingURL=DatePicker.client.cjs.map