@choco-vanille/ui 1.21.1 → 1.21.2

package/dist/components/forms/date-picker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { memo, useId, useMemo, type MouseEvent } from 'react'\r\nimport { DateField, DateInput, DateSegment } from 'react-aria-components'\r\n\r\nimport { Calendar } from '@components/forms/calendar'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldEndAction } from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\r\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\r\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\r\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A date field with segmented day, month and year inputs and a calendar popover.\r\n *\r\n * Built on React Aria's `DateField`, which provides segment-by-segment typing,\r\n * arrow-key stepping, locale-aware ordering and screen-reader semantics. The\r\n * look comes from the design system's TextField styles.\r\n *\r\n * - Typing a complete, valid date updates the calendar and calls `onChange`.\r\n * - Picking a day in the calendar updates the segments and closes the popover.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [date, setDate] = useState<Date | undefined>()\r\n * <DatePicker label=\"Start date\" value={date} onChange={setDate} />\r\n * ```\r\n */\r\nconst DatePicker = memo(\r\n    ({\r\n        id,\r\n        value,\r\n        defaultValue,\r\n        onChange,\r\n        calendarProps,\r\n        calendarAriaLabel = 'Calendar',\r\n        label,\r\n        error,\r\n        helperText,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        disabled,\r\n        size = 'md',\r\n        fontSize = 'md',\r\n        width,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        'aria-describedby': ariaDescribedBy,\r\n    }: DatePickerProps) => {\r\n        const generatedId = useId()\r\n        const inputId = id ?? generatedId\r\n        const labelId = label ? `${inputId}-label` : undefined\r\n        const helperId = `${inputId}-helper`\r\n        const hasError = Boolean(error)\r\n        const showHelper = Boolean(error || helperText)\r\n\r\n        const {\r\n            selectedDate,\r\n            calendarValue,\r\n            open,\r\n            setOpen,\r\n            handleFieldChange,\r\n            handleCalendarSelect,\r\n        } = useDatePicker({ value, defaultValue, onChange })\r\n\r\n        const calendarDefaultMonth = useMemo(() => selectedDate ?? new Date(), [selectedDate])\r\n\r\n        const { className: calendarClassName, ...restCalendarProps } = calendarProps ?? {}\r\n\r\n        // Keep focus in the date segments when the calendar button is pressed.\r\n        const preventFocusSteal = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault()\r\n\r\n        return (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                gap={'xs'}\r\n                width={'100%'}\r\n                alignItems={'start'}\r\n                style={width !== undefined ? { width } : undefined}\r\n            >\r\n                {label && (\r\n                    <FormLabel\r\n                        id={labelId}\r\n                        disabled={disabled}\r\n                        required={required && showRequiredIndicator}\r\n                        fontSize={fontSize}\r\n                    >\r\n                        {label}\r\n                    </FormLabel>\r\n                )}\r\n\r\n                <Popover\r\n                    open={open}\r\n                    onOpenChange={setOpen}\r\n                >\r\n                    <Flex\r\n                        position={'relative'}\r\n                        width={'100%'}\r\n                        gap={'none'}\r\n                    >\r\n                        <DateField\r\n                            className={DATE_PICKER_STYLES.root}\r\n                            value={calendarValue}\r\n                            onChange={handleFieldChange}\r\n                            isDisabled={disabled}\r\n                            isRequired={required}\r\n                            isInvalid={hasError}\r\n                            aria-label={ariaLabel}\r\n                            aria-labelledby={ariaLabelledBy ?? labelId}\r\n                            aria-describedby={\r\n                                [ariaDescribedBy, showHelper ? helperId : undefined]\r\n                                    .filter(Boolean)\r\n                                    .join(' ') || undefined\r\n                            }\r\n                        >\r\n                            <DateInput\r\n                                className={({ isInvalid }) =>\r\n                                    cn(\r\n                                        TEXT_FIELD_STYLES.recipe({\r\n                                            size,\r\n                                            hasError: isInvalid,\r\n                                            hasStartIcon: false,\r\n                                            hasEndAction: true,\r\n                                        }),\r\n                                        DATE_PICKER_STYLES.input,\r\n                                    )\r\n                                }\r\n                                style={{ fontSize: vars.fontSize[fontSize] }}\r\n                            >\r\n                                {(segment) => (\r\n                                    <DateSegment\r\n                                        segment={segment}\r\n                                        className={DATE_PICKER_STYLES.segment}\r\n                                    />\r\n                                )}\r\n                            </DateInput>\r\n                        </DateField>\r\n\r\n                        <TextFieldEndAction>\r\n                            <Popover.Trigger>\r\n                                <IconButton\r\n                                    icon={CalendarIcon}\r\n                                    aria-label={'Open calendar'}\r\n                                    variant={'ghost'}\r\n                                    color={'primary'}\r\n                                    size={fieldSizeToActionSize[size]}\r\n                                    type={'button'}\r\n                                    disabled={disabled}\r\n                                    onMouseDown={preventFocusSteal}\r\n                                />\r\n                            </Popover.Trigger>\r\n                        </TextFieldEndAction>\r\n                    </Flex>\r\n\r\n                    <Popover.Content\r\n                        side={'bottom'}\r\n                        align={'end'}\r\n                        padding={'none'}\r\n                        aria-label={calendarAriaLabel}\r\n                    >\r\n                        <Calendar\r\n                            mode={'single'}\r\n                            selected={selectedDate}\r\n                            onSelect={handleCalendarSelect}\r\n                            defaultMonth={calendarDefaultMonth}\r\n                            className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\r\n                            {...restCalendarProps}\r\n                        />\r\n                    </Popover.Content>\r\n                </Popover>\r\n\r\n                {showHelper && (\r\n                    <HelperText\r\n                        id={helperId}\r\n                        hasError={hasError}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </HelperText>\r\n                )}\r\n            </Flex>\r\n        )\r\n    },\r\n)\r\n\r\nDatePicker.displayName = 'DatePicker'\r\n\r\nexport default DatePicker\r\n"],"names":["DatePicker","memo","id","value","defaultValue","onChange","calendarProps","calendarAriaLabel","label","error","helperText","required","showRequiredIndicator","disabled","size","fontSize","width","ariaLabel","ariaLabelledBy","ariaDescribedBy","generatedId","useId","inputId","labelId","helperId","hasError","showHelper","selectedDate","calendarValue","open","setOpen","handleFieldChange","handleCalendarSelect","useDatePicker","calendarDefaultMonth","useMemo","calendarClassName","restCalendarProps","preventFocusSteal","event","jsxs","Flex","jsx","FormLabel","Popover","DateField","DATE_PICKER_STYLES","DateInput","isInvalid","cn","TEXT_FIELD_STYLES","vars","segment","DateSegment","TextFieldEndAction","IconButton","CalendarIcon","fieldSizeToActionSize","Calendar","HelperText"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { memo, useId, useMemo, type MouseEvent } from 'react'\r\nimport { DateField, DateInput, DateSegment } from 'react-aria-components'\r\n\r\nimport { Calendar } from '@components/forms/calendar'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldEndAction } from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\r\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\r\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\r\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A date field with segmented day, month and year inputs and a calendar popover.\r\n *\r\n * Built on React Aria's `DateField`, which provides segment-by-segment typing,\r\n * arrow-key stepping, locale-aware ordering and screen-reader semantics. The\r\n * look comes from the design system's TextField styles.\r\n *\r\n * - Typing a complete, valid date updates the calendar and calls `onChange`.\r\n * - Picking a day in the calendar updates the segments and closes the popover.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [date, setDate] = useState<Date | undefined>()\r\n * <DatePicker label=\"Start date\" value={date} onChange={setDate} />\r\n * ```\r\n */\r\nconst DatePicker = memo(\r\n    ({\r\n        id,\r\n        value,\r\n        defaultValue,\r\n        onChange,\r\n        calendarProps,\r\n        calendarAriaLabel = 'Calendar',\r\n        label,\r\n        error,\r\n        helperText,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        disabled,\r\n        size = 'md',\r\n        fontSize = 'md',\r\n        width,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        'aria-describedby': ariaDescribedBy,\r\n        name,\r\n    }: DatePickerProps) => {\r\n        const generatedId = useId()\r\n        const inputId = id ?? generatedId\r\n        const labelId = label ? `${inputId}-label` : undefined\r\n        const helperId = `${inputId}-helper`\r\n        const hasError = Boolean(error)\r\n        const showHelper = Boolean(error || helperText)\r\n\r\n        const {\r\n            selectedDate,\r\n            calendarValue,\r\n            open,\r\n            setOpen,\r\n            handleFieldChange,\r\n            handleCalendarSelect,\r\n        } = useDatePicker({ value, defaultValue, onChange })\r\n\r\n        const calendarDefaultMonth = useMemo(() => selectedDate ?? new Date(), [selectedDate])\r\n\r\n        const { className: calendarClassName, ...restCalendarProps } = calendarProps ?? {}\r\n\r\n        // Keep focus in the date segments when the calendar button is pressed.\r\n        const preventFocusSteal = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault()\r\n\r\n        return (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                gap={'xs'}\r\n                width={'100%'}\r\n                alignItems={'start'}\r\n                style={width !== undefined ? { width } : undefined}\r\n            >\r\n                {label && (\r\n                    <FormLabel\r\n                        id={labelId}\r\n                        disabled={disabled}\r\n                        required={required && showRequiredIndicator}\r\n                        fontSize={fontSize}\r\n                    >\r\n                        {label}\r\n                    </FormLabel>\r\n                )}\r\n\r\n                <Popover\r\n                    open={open}\r\n                    onOpenChange={setOpen}\r\n                >\r\n                    <Flex\r\n                        position={'relative'}\r\n                        width={'100%'}\r\n                        gap={'none'}\r\n                    >\r\n                        <DateField\r\n                            className={DATE_PICKER_STYLES.root}\r\n                            value={calendarValue}\r\n                            onChange={handleFieldChange}\r\n                            isDisabled={disabled}\r\n                            isRequired={required}\r\n                            isInvalid={hasError}\r\n                            name={name}\r\n                            aria-label={ariaLabel}\r\n                            aria-labelledby={ariaLabelledBy ?? labelId}\r\n                            aria-describedby={\r\n                                [ariaDescribedBy, showHelper ? helperId : undefined]\r\n                                    .filter(Boolean)\r\n                                    .join(' ') || undefined\r\n                            }\r\n                        >\r\n                            <DateInput\r\n                                className={({ isInvalid }) =>\r\n                                    cn(\r\n                                        TEXT_FIELD_STYLES.recipe({\r\n                                            size,\r\n                                            hasError: isInvalid,\r\n                                            hasStartIcon: false,\r\n                                            hasEndAction: true,\r\n                                        }),\r\n                                        DATE_PICKER_STYLES.input,\r\n                                    )\r\n                                }\r\n                                style={{ fontSize: vars.fontSize[fontSize] }}\r\n                            >\r\n                                {(segment) => (\r\n                                    <DateSegment\r\n                                        segment={segment}\r\n                                        className={DATE_PICKER_STYLES.segment}\r\n                                    />\r\n                                )}\r\n                            </DateInput>\r\n                        </DateField>\r\n\r\n                        <TextFieldEndAction>\r\n                            <Popover.Trigger>\r\n                                <IconButton\r\n                                    icon={CalendarIcon}\r\n                                    aria-label={'Open calendar'}\r\n                                    variant={'ghost'}\r\n                                    color={'primary'}\r\n                                    size={fieldSizeToActionSize[size]}\r\n                                    type={'button'}\r\n                                    disabled={disabled}\r\n                                    onMouseDown={preventFocusSteal}\r\n                                />\r\n                            </Popover.Trigger>\r\n                        </TextFieldEndAction>\r\n                    </Flex>\r\n\r\n                    <Popover.Content\r\n                        side={'bottom'}\r\n                        align={'end'}\r\n                        padding={'none'}\r\n                        aria-label={calendarAriaLabel}\r\n                    >\r\n                        <Calendar\r\n                            mode={'single'}\r\n                            selected={selectedDate}\r\n                            onSelect={handleCalendarSelect}\r\n                            defaultMonth={calendarDefaultMonth}\r\n                            className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\r\n                            {...restCalendarProps}\r\n                        />\r\n                    </Popover.Content>\r\n                </Popover>\r\n\r\n                {showHelper && (\r\n                    <HelperText\r\n                        id={helperId}\r\n                        hasError={hasError}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </HelperText>\r\n                )}\r\n            </Flex>\r\n        )\r\n    },\r\n)\r\n\r\nDatePicker.displayName = 'DatePicker'\r\n\r\nexport default DatePicker\r\n"],"names":["DatePicker","memo","id","value","defaultValue","onChange","calendarProps","calendarAriaLabel","label","error","helperText","required","showRequiredIndicator","disabled","size","fontSize","width","ariaLabel","ariaLabelledBy","ariaDescribedBy","name","generatedId","useId","inputId","labelId","helperId","hasError","showHelper","selectedDate","calendarValue","open","setOpen","handleFieldChange","handleCalendarSelect","useDatePicker","calendarDefaultMonth","useMemo","calendarClassName","restCalendarProps","preventFocusSteal","event","jsxs","Flex","jsx","FormLabel","Popover","DateField","DATE_PICKER_STYLES","DateInput","isInvalid","cn","TEXT_FIELD_STYLES","vars","segment","DateSegment","TextFieldEndAction","IconButton","CalendarIcon","fieldSizeToActionSize","Calendar","HelperText"],"mappings":"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"}

package/dist/components/forms/date-picker/DatePicker.d.ts

@@ -16,5 +16,5 @@ import { MemoExoticComponent } from 'react';
  * <DatePicker label="Start date" value={date} onChange={setDate} />
  * ```
  */
-declare const DatePicker: MemoExoticComponent<({ id, value, defaultValue, onChange, calendarProps, calendarAriaLabel, label, error, helperText, required, showRequiredIndicator, disabled, size, fontSize, width, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: DatePickerProps) => import("react").JSX.Element>;
+declare const DatePicker: MemoExoticComponent<({ id, value, defaultValue, onChange, calendarProps, calendarAriaLabel, label, error, helperText, required, showRequiredIndicator, disabled, size, fontSize, width, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, name, }: DatePickerProps) => import("react").JSX.Element>;
 export default DatePicker;

package/dist/components/forms/date-picker/DatePicker.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as R, useId as Y, useMemo as $ } from "react";
-import { DateField as q, DateInput as K, DateSegment as V } from "react-aria-components";
-import X from "../calendar/Calendar.js";
-import '../../../ui-kit88.css';import '../../../ui-kit97.css';import '../../../ui-kit2.css';import '../../../ui-kit87.css';import '../../../ui-kit105.css';import '../../../ui-kit45.css';import '../../../ui-kit49.css';import '../../../ui-kit102.css';import '../../../ui-kit36.css';import '../../../ui-kit.css';/* empty css                                         */
+import { memo as Y, useId as $, useMemo as q } from "react";
+import { DateField as K, DateInput as V, DateSegment as X } from "react-aria-components";
+import G from "../calendar/Calendar.js";
+import '../../../ui-kit106.css';import '../../../ui-kit77.css';import '../../../ui-kit2.css';import '../../../ui-kit96.css';import '../../../ui-kit89.css';import '../../../ui-kit53.css';import '../../../ui-kit95.css';import '../../../ui-kit78.css';import '../../../ui-kit63.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                                 */
 /* empty css                                                                                */
 /* empty css                                                 */
@@ -11,25 +11,25 @@ import '../../../ui-kit88.css';import '../../../ui-kit97.css';import '../../../u
 /* empty css                                                                                   */
 import m from "../../overlay/popover/Popover.js";
 import "../../overlay/popover/components/content/styles/PopoverContent.css.js";
-import G from "../../actions/icon-button/IconButton.js";
+import J from "../../actions/icon-button/IconButton.js";
 import "../../actions/icon-button/styles/IconButton.css.js";
 import v from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
-import J from "../_shared/components/form-label/FormLabel.js";
-import Q from "../_shared/components/helper-text/HelperText.js";
+import Q from "../_shared/components/form-label/FormLabel.js";
+import U from "../_shared/components/helper-text/HelperText.js";
 import "../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
 /* empty css                                             */
 /* empty css                                                                                          */
-import U from "../text-field/components/text-field-end-action/TextFieldEndAction.js";
+import W from "../text-field/components/text-field-end-action/TextFieldEndAction.js";
 /* empty css                                                                                          */
-import { TEXT_FIELD_STYLES as W } from "../text-field/styles/TextField.css.js";
-import { fieldSizeToActionSize as Z } from "../text-field/constants/index.js";
-import { useDatePicker as ee } from "./hooks/useDatePicker.hook.js";
+import { TEXT_FIELD_STYLES as Z } from "../text-field/styles/TextField.css.js";
+import { fieldSizeToActionSize as ee } from "../text-field/constants/index.js";
+import { useDatePicker as oe } from "./hooks/useDatePicker.hook.js";
 import { DATE_PICKER_STYLES as r } from "./styles/DatePicker.css.js";
-import oe from "../../../resources/asset/CalendarIcon.svg.js";
-import { vars as re } from "../../../theme/contract.css.js";
+import re from "../../../resources/asset/CalendarIcon.svg.js";
+import { vars as te } from "../../../theme/contract.css.js";
 import { cn as I } from "../../../utils/cn.js";
-const te = R(
+const ae = Y(
   ({
     id: S,
     value: C,
@@ -48,16 +48,17 @@ const te = R(
     width: f,
     "aria-label": N,
     "aria-labelledby": P,
-    "aria-describedby": w
+    "aria-describedby": w,
+    name: A
   }) => {
-    const A = Y(), h = S ?? A, u = t ? `${h}-label` : void 0, g = `${h}-helper`, D = !!a, b = !!(a || d), {
+    const B = $(), h = S ?? B, u = t ? `${h}-label` : void 0, g = `${h}-helper`, D = !!a, b = !!(a || d), {
       selectedDate: n,
-      calendarValue: B,
-      open: L,
-      setOpen: M,
-      handleFieldChange: _,
-      handleCalendarSelect: j
-    } = ee({ value: C, defaultValue: E, onChange: y }), k = $(() => n ?? /* @__PURE__ */ new Date(), [n]), { className: z, ...O } = T ?? {}, H = (o) => o.preventDefault();
+      calendarValue: L,
+      open: M,
+      setOpen: _,
+      handleFieldChange: j,
+      handleCalendarSelect: k
+    } = oe({ value: C, defaultValue: E, onChange: y }), z = q(() => n ?? /* @__PURE__ */ new Date(), [n]), { className: O, ...H } = T ?? {}, R = (o) => o.preventDefault();
     return /* @__PURE__ */ l(
       v,
       {
@@ -68,7 +69,7 @@ const te = R(
         style: f !== void 0 ? { width: f } : void 0,
         children: [
           t && /* @__PURE__ */ e(
-            J,
+            Q,
             {
               id: u,
               disabled: i,
@@ -80,8 +81,8 @@ const te = R(
           /* @__PURE__ */ l(
             m,
             {
-              open: L,
-              onOpenChange: M,
+              open: M,
+              onOpenChange: _,
               children: [
                 /* @__PURE__ */ l(
                   v,
@@ -91,22 +92,23 @@ const te = R(
                     gap: "none",
                     children: [
                       /* @__PURE__ */ e(
-                        q,
+                        K,
                         {
                           className: r.root,
-                          value: B,
-                          onChange: _,
+                          value: L,
+                          onChange: j,
                           isDisabled: i,
                           isRequired: s,
                           isInvalid: D,
+                          name: A,
                           "aria-label": N,
                           "aria-labelledby": P ?? u,
                           "aria-describedby": [w, b ? g : void 0].filter(Boolean).join(" ") || void 0,
                           children: /* @__PURE__ */ e(
-                            K,
+                            V,
                             {
                               className: ({ isInvalid: o }) => I(
-                                W.recipe({
+                                Z.recipe({
                                   size: p,
                                   hasError: o,
                                   hasStartIcon: !1,
@@ -114,9 +116,9 @@ const te = R(
                                 }),
                                 r.input
                               ),
-                              style: { fontSize: re.fontSize[c] },
+                              style: { fontSize: te.fontSize[c] },
                               children: (o) => /* @__PURE__ */ e(
-                                V,
+                                X,
                                 {
                                   segment: o,
                                   className: r.segment
@@ -126,17 +128,17 @@ const te = R(
                           )
                         }
                       ),
-                      /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(m.Trigger, { children: /* @__PURE__ */ e(
-                        G,
+                      /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(m.Trigger, { children: /* @__PURE__ */ e(
+                        J,
                         {
-                          icon: oe,
+                          icon: re,
                           "aria-label": "Open calendar",
                           variant: "ghost",
                           color: "primary",
-                          size: Z[p],
+                          size: ee[p],
                           type: "button",
                           disabled: i,
-                          onMouseDown: H
+                          onMouseDown: R
                         }
                       ) }) })
                     ]
@@ -150,14 +152,14 @@ const te = R(
                     padding: "none",
                     "aria-label": x,
                     children: /* @__PURE__ */ e(
-                      X,
+                      G,
                       {
                         mode: "single",
                         selected: n,
-                        onSelect: j,
-                        defaultMonth: k,
-                        className: I(r.calendar, z),
-                        ...O
+                        onSelect: k,
+                        defaultMonth: z,
+                        className: I(r.calendar, O),
+                        ...H
                       }
                     )
                   }
@@ -166,7 +168,7 @@ const te = R(
             }
           ),
           b && /* @__PURE__ */ e(
-            Q,
+            U,
             {
               id: g,
               hasError: D,
@@ -178,8 +180,8 @@ const te = R(
     );
   }
 );
-te.displayName = "DatePicker";
+ae.displayName = "DatePicker";
 export {
-  te as default
+  ae as default
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/forms/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { memo, useId, useMemo, type MouseEvent } from 'react'\r\nimport { DateField, DateInput, DateSegment } from 'react-aria-components'\r\n\r\nimport { Calendar } from '@components/forms/calendar'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldEndAction } from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\r\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\r\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\r\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A date field with segmented day, month and year inputs and a calendar popover.\r\n *\r\n * Built on React Aria's `DateField`, which provides segment-by-segment typing,\r\n * arrow-key stepping, locale-aware ordering and screen-reader semantics. The\r\n * look comes from the design system's TextField styles.\r\n *\r\n * - Typing a complete, valid date updates the calendar and calls `onChange`.\r\n * - Picking a day in the calendar updates the segments and closes the popover.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [date, setDate] = useState<Date | undefined>()\r\n * <DatePicker label=\"Start date\" value={date} onChange={setDate} />\r\n * ```\r\n */\r\nconst DatePicker = memo(\r\n    ({\r\n        id,\r\n        value,\r\n        defaultValue,\r\n        onChange,\r\n        calendarProps,\r\n        calendarAriaLabel = 'Calendar',\r\n        label,\r\n        error,\r\n        helperText,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        disabled,\r\n        size = 'md',\r\n        fontSize = 'md',\r\n        width,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        'aria-describedby': ariaDescribedBy,\r\n    }: DatePickerProps) => {\r\n        const generatedId = useId()\r\n        const inputId = id ?? generatedId\r\n        const labelId = label ? `${inputId}-label` : undefined\r\n        const helperId = `${inputId}-helper`\r\n        const hasError = Boolean(error)\r\n        const showHelper = Boolean(error || helperText)\r\n\r\n        const {\r\n            selectedDate,\r\n            calendarValue,\r\n            open,\r\n            setOpen,\r\n            handleFieldChange,\r\n            handleCalendarSelect,\r\n        } = useDatePicker({ value, defaultValue, onChange })\r\n\r\n        const calendarDefaultMonth = useMemo(() => selectedDate ?? new Date(), [selectedDate])\r\n\r\n        const { className: calendarClassName, ...restCalendarProps } = calendarProps ?? {}\r\n\r\n        // Keep focus in the date segments when the calendar button is pressed.\r\n        const preventFocusSteal = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault()\r\n\r\n        return (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                gap={'xs'}\r\n                width={'100%'}\r\n                alignItems={'start'}\r\n                style={width !== undefined ? { width } : undefined}\r\n            >\r\n                {label && (\r\n                    <FormLabel\r\n                        id={labelId}\r\n                        disabled={disabled}\r\n                        required={required && showRequiredIndicator}\r\n                        fontSize={fontSize}\r\n                    >\r\n                        {label}\r\n                    </FormLabel>\r\n                )}\r\n\r\n                <Popover\r\n                    open={open}\r\n                    onOpenChange={setOpen}\r\n                >\r\n                    <Flex\r\n                        position={'relative'}\r\n                        width={'100%'}\r\n                        gap={'none'}\r\n                    >\r\n                        <DateField\r\n                            className={DATE_PICKER_STYLES.root}\r\n                            value={calendarValue}\r\n                            onChange={handleFieldChange}\r\n                            isDisabled={disabled}\r\n                            isRequired={required}\r\n                            isInvalid={hasError}\r\n                            aria-label={ariaLabel}\r\n                            aria-labelledby={ariaLabelledBy ?? labelId}\r\n                            aria-describedby={\r\n                                [ariaDescribedBy, showHelper ? helperId : undefined]\r\n                                    .filter(Boolean)\r\n                                    .join(' ') || undefined\r\n                            }\r\n                        >\r\n                            <DateInput\r\n                                className={({ isInvalid }) =>\r\n                                    cn(\r\n                                        TEXT_FIELD_STYLES.recipe({\r\n                                            size,\r\n                                            hasError: isInvalid,\r\n                                            hasStartIcon: false,\r\n                                            hasEndAction: true,\r\n                                        }),\r\n                                        DATE_PICKER_STYLES.input,\r\n                                    )\r\n                                }\r\n                                style={{ fontSize: vars.fontSize[fontSize] }}\r\n                            >\r\n                                {(segment) => (\r\n                                    <DateSegment\r\n                                        segment={segment}\r\n                                        className={DATE_PICKER_STYLES.segment}\r\n                                    />\r\n                                )}\r\n                            </DateInput>\r\n                        </DateField>\r\n\r\n                        <TextFieldEndAction>\r\n                            <Popover.Trigger>\r\n                                <IconButton\r\n                                    icon={CalendarIcon}\r\n                                    aria-label={'Open calendar'}\r\n                                    variant={'ghost'}\r\n                                    color={'primary'}\r\n                                    size={fieldSizeToActionSize[size]}\r\n                                    type={'button'}\r\n                                    disabled={disabled}\r\n                                    onMouseDown={preventFocusSteal}\r\n                                />\r\n                            </Popover.Trigger>\r\n                        </TextFieldEndAction>\r\n                    </Flex>\r\n\r\n                    <Popover.Content\r\n                        side={'bottom'}\r\n                        align={'end'}\r\n                        padding={'none'}\r\n                        aria-label={calendarAriaLabel}\r\n                    >\r\n                        <Calendar\r\n                            mode={'single'}\r\n                            selected={selectedDate}\r\n                            onSelect={handleCalendarSelect}\r\n                            defaultMonth={calendarDefaultMonth}\r\n                            className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\r\n                            {...restCalendarProps}\r\n                        />\r\n                    </Popover.Content>\r\n                </Popover>\r\n\r\n                {showHelper && (\r\n                    <HelperText\r\n                        id={helperId}\r\n                        hasError={hasError}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </HelperText>\r\n                )}\r\n            </Flex>\r\n        )\r\n    },\r\n)\r\n\r\nDatePicker.displayName = 'DatePicker'\r\n\r\nexport default DatePicker\r\n"],"names":["DatePicker","memo","id","value","defaultValue","onChange","calendarProps","calendarAriaLabel","label","error","helperText","required","showRequiredIndicator","disabled","size","fontSize","width","ariaLabel","ariaLabelledBy","ariaDescribedBy","generatedId","useId","inputId","labelId","helperId","hasError","showHelper","selectedDate","calendarValue","open","setOpen","handleFieldChange","handleCalendarSelect","useDatePicker","calendarDefaultMonth","useMemo","calendarClassName","restCalendarProps","preventFocusSteal","event","jsxs","Flex","jsx","FormLabel","Popover","DateField","DATE_PICKER_STYLES","DateInput","isInvalid","cn","TEXT_FIELD_STYLES","vars","segment","DateSegment","TextFieldEndAction","IconButton","CalendarIcon","fieldSizeToActionSize","Calendar","HelperText"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { memo, useId, useMemo, type MouseEvent } from 'react'\r\nimport { DateField, DateInput, DateSegment } from 'react-aria-components'\r\n\r\nimport { Calendar } from '@components/forms/calendar'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldEndAction } from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\r\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\r\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\r\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A date field with segmented day, month and year inputs and a calendar popover.\r\n *\r\n * Built on React Aria's `DateField`, which provides segment-by-segment typing,\r\n * arrow-key stepping, locale-aware ordering and screen-reader semantics. The\r\n * look comes from the design system's TextField styles.\r\n *\r\n * - Typing a complete, valid date updates the calendar and calls `onChange`.\r\n * - Picking a day in the calendar updates the segments and closes the popover.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [date, setDate] = useState<Date | undefined>()\r\n * <DatePicker label=\"Start date\" value={date} onChange={setDate} />\r\n * ```\r\n */\r\nconst DatePicker = memo(\r\n    ({\r\n        id,\r\n        value,\r\n        defaultValue,\r\n        onChange,\r\n        calendarProps,\r\n        calendarAriaLabel = 'Calendar',\r\n        label,\r\n        error,\r\n        helperText,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        disabled,\r\n        size = 'md',\r\n        fontSize = 'md',\r\n        width,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        'aria-describedby': ariaDescribedBy,\r\n        name,\r\n    }: DatePickerProps) => {\r\n        const generatedId = useId()\r\n        const inputId = id ?? generatedId\r\n        const labelId = label ? `${inputId}-label` : undefined\r\n        const helperId = `${inputId}-helper`\r\n        const hasError = Boolean(error)\r\n        const showHelper = Boolean(error || helperText)\r\n\r\n        const {\r\n            selectedDate,\r\n            calendarValue,\r\n            open,\r\n            setOpen,\r\n            handleFieldChange,\r\n            handleCalendarSelect,\r\n        } = useDatePicker({ value, defaultValue, onChange })\r\n\r\n        const calendarDefaultMonth = useMemo(() => selectedDate ?? new Date(), [selectedDate])\r\n\r\n        const { className: calendarClassName, ...restCalendarProps } = calendarProps ?? {}\r\n\r\n        // Keep focus in the date segments when the calendar button is pressed.\r\n        const preventFocusSteal = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault()\r\n\r\n        return (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                gap={'xs'}\r\n                width={'100%'}\r\n                alignItems={'start'}\r\n                style={width !== undefined ? { width } : undefined}\r\n            >\r\n                {label && (\r\n                    <FormLabel\r\n                        id={labelId}\r\n                        disabled={disabled}\r\n                        required={required && showRequiredIndicator}\r\n                        fontSize={fontSize}\r\n                    >\r\n                        {label}\r\n                    </FormLabel>\r\n                )}\r\n\r\n                <Popover\r\n                    open={open}\r\n                    onOpenChange={setOpen}\r\n                >\r\n                    <Flex\r\n                        position={'relative'}\r\n                        width={'100%'}\r\n                        gap={'none'}\r\n                    >\r\n                        <DateField\r\n                            className={DATE_PICKER_STYLES.root}\r\n                            value={calendarValue}\r\n                            onChange={handleFieldChange}\r\n                            isDisabled={disabled}\r\n                            isRequired={required}\r\n                            isInvalid={hasError}\r\n                            name={name}\r\n                            aria-label={ariaLabel}\r\n                            aria-labelledby={ariaLabelledBy ?? labelId}\r\n                            aria-describedby={\r\n                                [ariaDescribedBy, showHelper ? helperId : undefined]\r\n                                    .filter(Boolean)\r\n                                    .join(' ') || undefined\r\n                            }\r\n                        >\r\n                            <DateInput\r\n                                className={({ isInvalid }) =>\r\n                                    cn(\r\n                                        TEXT_FIELD_STYLES.recipe({\r\n                                            size,\r\n                                            hasError: isInvalid,\r\n                                            hasStartIcon: false,\r\n                                            hasEndAction: true,\r\n                                        }),\r\n                                        DATE_PICKER_STYLES.input,\r\n                                    )\r\n                                }\r\n                                style={{ fontSize: vars.fontSize[fontSize] }}\r\n                            >\r\n                                {(segment) => (\r\n                                    <DateSegment\r\n                                        segment={segment}\r\n                                        className={DATE_PICKER_STYLES.segment}\r\n                                    />\r\n                                )}\r\n                            </DateInput>\r\n                        </DateField>\r\n\r\n                        <TextFieldEndAction>\r\n                            <Popover.Trigger>\r\n                                <IconButton\r\n                                    icon={CalendarIcon}\r\n                                    aria-label={'Open calendar'}\r\n                                    variant={'ghost'}\r\n                                    color={'primary'}\r\n                                    size={fieldSizeToActionSize[size]}\r\n                                    type={'button'}\r\n                                    disabled={disabled}\r\n                                    onMouseDown={preventFocusSteal}\r\n                                />\r\n                            </Popover.Trigger>\r\n                        </TextFieldEndAction>\r\n                    </Flex>\r\n\r\n                    <Popover.Content\r\n                        side={'bottom'}\r\n                        align={'end'}\r\n                        padding={'none'}\r\n                        aria-label={calendarAriaLabel}\r\n                    >\r\n                        <Calendar\r\n                            mode={'single'}\r\n                            selected={selectedDate}\r\n                            onSelect={handleCalendarSelect}\r\n                            defaultMonth={calendarDefaultMonth}\r\n                            className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\r\n                            {...restCalendarProps}\r\n                        />\r\n                    </Popover.Content>\r\n                </Popover>\r\n\r\n                {showHelper && (\r\n                    <HelperText\r\n                        id={helperId}\r\n                        hasError={hasError}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </HelperText>\r\n                )}\r\n            </Flex>\r\n        )\r\n    },\r\n)\r\n\r\nDatePicker.displayName = 'DatePicker'\r\n\r\nexport default DatePicker\r\n"],"names":["DatePicker","memo","id","value","defaultValue","onChange","calendarProps","calendarAriaLabel","label","error","helperText","required","showRequiredIndicator","disabled","size","fontSize","width","ariaLabel","ariaLabelledBy","ariaDescribedBy","name","generatedId","useId","inputId","labelId","helperId","hasError","showHelper","selectedDate","calendarValue","open","setOpen","handleFieldChange","handleCalendarSelect","useDatePicker","calendarDefaultMonth","useMemo","calendarClassName","restCalendarProps","preventFocusSteal","event","jsxs","Flex","jsx","FormLabel","Popover","DateField","DATE_PICKER_STYLES","DateInput","isInvalid","cn","TEXT_FIELD_STYLES","vars","segment","DateSegment","TextFieldEndAction","IconButton","CalendarIcon","fieldSizeToActionSize","Calendar","HelperText"],"mappings":"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"}

package/dist/components/forms/date-picker/styles/DatePicker.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit50.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                */var r={root:"_6hs4r90",input:"_6hs4r91",segment:"_6hs4r92",calendar:"_6hs4r93"};exports.DATE_PICKER_STYLES=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit27.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                */var r={root:"_6hs4r90",input:"_6hs4r91",segment:"_6hs4r92",calendar:"_6hs4r93"};exports.DATE_PICKER_STYLES=r;
 //# sourceMappingURL=DatePicker.css.cjs.map

package/dist/components/forms/date-picker/styles/DatePicker.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit50.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit27.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                              */
 var _ = { root: "_6hs4r90", input: "_6hs4r91", segment: "_6hs4r92", calendar: "_6hs4r93" };
 export {

package/dist/components/forms/date-picker/types/DatePicker.props.d.ts

@@ -1,6 +1,8 @@
 import { CalendarProps } from '../../calendar';
 import { TextFieldProps } from '../../text-field';
 export type DatePickerProps = Pick<TextFieldProps, 'id' | 'label' | 'error' | 'helperText' | 'required' | 'showRequiredIndicator' | 'disabled' | 'size' | 'fontSize' | 'width' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** Form field name, forwarded to the underlying date field. */
+    name?: string;
     /** The currently selected date (controlled). */
     value?: Date;
     /** The default selected date (uncontrolled). */

package/dist/components/forms/image-picker/components/image-picker-crop-dialog/ImagePickerCropDialog.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../ui-kit84.css');require('../../../../../ui-kit16.css');require('../../../../../ui-kit15.css');require('../../../../../ui-kit8.css');require('../../../../../ui-kit12.css');require('../../../../../ui-kit3.css');require('../../../../../ui-kit14.css');require('../../../../../ui-kit9.css');require('../../../../../ui-kit13.css');require('../../../../../ui-kit11.css');require('../../../../../ui-kit4.css');require('../../../../../ui-kit10.css');require('../../../../../ui-kit5.css');require('../../../../../ui-kit6.css');require('../../../../../ui-kit7.css');require('../../../../../ui-kit51.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),Z=require("react-easy-crop"),t=require("react"),g=require("../../../../actions/button/Button.cjs");require("../../../../actions/button/styles/Button.css.cjs");const v=require("../../../slider/Slider.cjs");;/* empty css                                                 */;/* empty css                                                 */const z=require("../../../_shared/components/helper-text/HelperText.cjs"),G=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const L=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const q=require("./styles/ImagePickerCropDialog.css.cjs"),O=require("../../hooks/useImagePickerCrop.hook.cjs"),o=require("../../../../overlay/dialog/Dialog.cjs");;/* empty css                                                                   */;/* empty css                                                                    */;/* empty css                                                                            */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                          */;/* empty css                                                                      */;/* empty css                                                            */;/* empty css                                                                                           */const C=require("../../constants/imagePickerShapes.const.cjs"),h=t.memo(({file:x,aspectRatio:i,shape:c,labels:r,onCancel:P,onConfirm:I})=>{const l=t.useId(),u=t.useId(),{imageUrl:d,crop:E,setCrop:S,zoom:p,setZoom:m,croppedAreaPixels:j,handleCropComplete:_,handleMediaLoaded:A,handleMediaError:D,isProcessing:a,cropError:s,handleConfirm:b}=O.useImagePickerCrop({file:x,cropErrorLabel:r.cropError,onConfirm:I}),y=n=>{!n&&!a&&P()},k=typeof i=="number"&&Number.isFinite(i)&&i>0?i:4/3,f=c===C.IMAGE_PICKER_SHAPES.circle?"round":"rect",M=c===C.IMAGE_PICKER_SHAPES.rounded?q.IMAGE_PICKER_CROP_DIALOG_STYLES.roundedCropArea:void 0;return e.jsx(o.Dialog,{open:!0,onOpenChange:y,children:e.jsxs(o.Dialog.Content,{size:"lg","aria-labelledby":l,"aria-describedby":s?u:void 0,children:[e.jsx(o.Dialog.Header,{title:r.crop,titleProps:{id:l},showCloseButton:!1}),e.jsx(o.Dialog.Body,{padding:"lg",children:e.jsxs(L,{flexDirection:"column",gap:"md",children:[e.jsx(G,{className:q.IMAGE_PICKER_CROP_DIALOG_STYLES.viewport,children:d&&e.jsx(Z,{image:d,crop:E,zoom:p,aspect:k,minZoom:1,maxZoom:3,zoomSpeed:.1,cropShape:f,showGrid:!0,roundCropAreaPixels:!0,onCropChange:S,onZoomChange:m,onCropComplete:_,onMediaLoaded:A,mediaProps:{onError:D},cropperProps:{role:"group","aria-label":r.cropArea},classes:{cropAreaClassName:M}})}),e.jsx(v.Slider,{label:r.zoom,value:p,min:1,max:3,step:.1,showValue:!0,onValueChange:n=>{typeof n=="number"&&m(n)}}),s&&e.jsx(z,{id:u,hasError:!0,children:s})]})}),e.jsxs(o.Dialog.Footer,{children:[e.jsx(o.Dialog.Close,{children:e.jsx(g,{type:"button",label:r.cancel,variant:"outlined",color:"primary",disabled:a})}),e.jsx(g,{type:"button",label:r.apply,variant:"contained",color:"primary",disabled:!j||a,onClick:b})]})]})})});h.displayName="ImagePicker.CropDialog";exports.ImagePickerCropDialog=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../ui-kit73.css');require('../../../../../ui-kit30.css');require('../../../../../ui-kit29.css');require('../../../../../ui-kit7.css');require('../../../../../ui-kit5.css');require('../../../../../ui-kit12.css');require('../../../../../ui-kit13.css');require('../../../../../ui-kit4.css');require('../../../../../ui-kit8.css');require('../../../../../ui-kit6.css');require('../../../../../ui-kit14.css');require('../../../../../ui-kit9.css');require('../../../../../ui-kit10.css');require('../../../../../ui-kit11.css');require('../../../../../ui-kit3.css');require('../../../../../ui-kit25.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),Z=require("react-easy-crop"),t=require("react"),g=require("../../../../actions/button/Button.cjs");require("../../../../actions/button/styles/Button.css.cjs");const v=require("../../../slider/Slider.cjs");;/* empty css                                                 */;/* empty css                                                 */const z=require("../../../_shared/components/helper-text/HelperText.cjs"),G=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const L=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const q=require("./styles/ImagePickerCropDialog.css.cjs"),O=require("../../hooks/useImagePickerCrop.hook.cjs"),o=require("../../../../overlay/dialog/Dialog.cjs");;/* empty css                                                                   */;/* empty css                                                                    */;/* empty css                                                                            */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                          */;/* empty css                                                                      */;/* empty css                                                            */;/* empty css                                                                                           */const C=require("../../constants/imagePickerShapes.const.cjs"),h=t.memo(({file:x,aspectRatio:i,shape:c,labels:r,onCancel:P,onConfirm:I})=>{const l=t.useId(),u=t.useId(),{imageUrl:d,crop:E,setCrop:S,zoom:p,setZoom:m,croppedAreaPixels:j,handleCropComplete:_,handleMediaLoaded:A,handleMediaError:D,isProcessing:a,cropError:s,handleConfirm:b}=O.useImagePickerCrop({file:x,cropErrorLabel:r.cropError,onConfirm:I}),y=n=>{!n&&!a&&P()},k=typeof i=="number"&&Number.isFinite(i)&&i>0?i:4/3,f=c===C.IMAGE_PICKER_SHAPES.circle?"round":"rect",M=c===C.IMAGE_PICKER_SHAPES.rounded?q.IMAGE_PICKER_CROP_DIALOG_STYLES.roundedCropArea:void 0;return e.jsx(o.Dialog,{open:!0,onOpenChange:y,children:e.jsxs(o.Dialog.Content,{size:"lg","aria-labelledby":l,"aria-describedby":s?u:void 0,children:[e.jsx(o.Dialog.Header,{title:r.crop,titleProps:{id:l},showCloseButton:!1}),e.jsx(o.Dialog.Body,{padding:"lg",children:e.jsxs(L,{flexDirection:"column",gap:"md",children:[e.jsx(G,{className:q.IMAGE_PICKER_CROP_DIALOG_STYLES.viewport,children:d&&e.jsx(Z,{image:d,crop:E,zoom:p,aspect:k,minZoom:1,maxZoom:3,zoomSpeed:.1,cropShape:f,showGrid:!0,roundCropAreaPixels:!0,onCropChange:S,onZoomChange:m,onCropComplete:_,onMediaLoaded:A,mediaProps:{onError:D},cropperProps:{role:"group","aria-label":r.cropArea},classes:{cropAreaClassName:M}})}),e.jsx(v.Slider,{label:r.zoom,value:p,min:1,max:3,step:.1,showValue:!0,onValueChange:n=>{typeof n=="number"&&m(n)}}),s&&e.jsx(z,{id:u,hasError:!0,children:s})]})}),e.jsxs(o.Dialog.Footer,{children:[e.jsx(o.Dialog.Close,{children:e.jsx(g,{type:"button",label:r.cancel,variant:"outlined",color:"primary",disabled:a})}),e.jsx(g,{type:"button",label:r.apply,variant:"contained",color:"primary",disabled:!j||a,onClick:b})]})]})})});h.displayName="ImagePicker.CropDialog";exports.ImagePickerCropDialog=h;
 //# sourceMappingURL=ImagePickerCropDialog.cjs.map

package/dist/components/forms/image-picker/components/image-picker-crop-dialog/ImagePickerCropDialog.js

@@ -4,7 +4,7 @@ import { memo as k, useId as u } from "react";
 import h from "../../../../actions/button/Button.js";
 import "../../../../actions/button/styles/Button.css.js";
 import { Slider as w } from "../../../slider/Slider.js";
-import '../../../../../ui-kit84.css';import '../../../../../ui-kit16.css';import '../../../../../ui-kit15.css';import '../../../../../ui-kit8.css';import '../../../../../ui-kit12.css';import '../../../../../ui-kit3.css';import '../../../../../ui-kit14.css';import '../../../../../ui-kit9.css';import '../../../../../ui-kit13.css';import '../../../../../ui-kit11.css';import '../../../../../ui-kit4.css';import '../../../../../ui-kit10.css';import '../../../../../ui-kit5.css';import '../../../../../ui-kit6.css';import '../../../../../ui-kit7.css';import '../../../../../ui-kit51.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit73.css';import '../../../../../ui-kit30.css';import '../../../../../ui-kit29.css';import '../../../../../ui-kit7.css';import '../../../../../ui-kit5.css';import '../../../../../ui-kit12.css';import '../../../../../ui-kit13.css';import '../../../../../ui-kit4.css';import '../../../../../ui-kit8.css';import '../../../../../ui-kit6.css';import '../../../../../ui-kit14.css';import '../../../../../ui-kit9.css';import '../../../../../ui-kit10.css';import '../../../../../ui-kit11.css';import '../../../../../ui-kit3.css';import '../../../../../ui-kit25.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                               */
 import B from "../../../_shared/components/helper-text/HelperText.js";
 import G from "../../../../layout/box/Box.js";

package/dist/components/forms/image-picker/styles/ImagePicker.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit74.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={root:"_8x2wlj1",wrapper:"_8x2wlj2",preview:e.createRuntimeFn({defaultClassName:"_8x2wlj3",variantClassNames:{shape:{square:"_8x2wlj4",rounded:"_8x2wlj5",circle:"_8x2wlj6"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),empty:"_8x2wlj7",emptyIcon:"_8x2wlj8",emptyText:"_8x2wlj9",image:"_8x2wlja",scrim:"_8x2wljb",scrimText:"_8x2wljc",removeButton:e.createRuntimeFn({defaultClassName:"_8x2wljd",variantClassNames:{shape:{square:"_8x2wlje",rounded:"_8x2wljf",circle:"_8x2wljg"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),actions:"_8x2wljh",visuallyHidden:"_8x2wlji",input:"_8x2wljj"};exports.IMAGE_PICKER_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit38.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={root:"_8x2wlj1",wrapper:"_8x2wlj2",preview:e.createRuntimeFn({defaultClassName:"_8x2wlj3",variantClassNames:{shape:{square:"_8x2wlj4",rounded:"_8x2wlj5",circle:"_8x2wlj6"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),empty:"_8x2wlj7",emptyIcon:"_8x2wlj8",emptyText:"_8x2wlj9",image:"_8x2wlja",scrim:"_8x2wljb",scrimText:"_8x2wljc",removeButton:e.createRuntimeFn({defaultClassName:"_8x2wljd",variantClassNames:{shape:{square:"_8x2wlje",rounded:"_8x2wljf",circle:"_8x2wljg"}},defaultVariants:{shape:"rounded"},compoundVariants:[]}),actions:"_8x2wljh",visuallyHidden:"_8x2wlji",input:"_8x2wljj"};exports.IMAGE_PICKER_STYLES=a;
 //# sourceMappingURL=ImagePicker.css.cjs.map

package/dist/components/forms/image-picker/styles/ImagePicker.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit74.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit38.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                               */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var t = { root: "_8x2wlj1", wrapper: "_8x2wlj2", preview: a({ defaultClassName: "_8x2wlj3", variantClassNames: { shape: { square: "_8x2wlj4", rounded: "_8x2wlj5", circle: "_8x2wlj6" } }, defaultVariants: { shape: "rounded" }, compoundVariants: [] }), empty: "_8x2wlj7", emptyIcon: "_8x2wlj8", emptyText: "_8x2wlj9", image: "_8x2wlja", scrim: "_8x2wljb", scrimText: "_8x2wljc", removeButton: a({ defaultClassName: "_8x2wljd", variantClassNames: { shape: { square: "_8x2wlje", rounded: "_8x2wljf", circle: "_8x2wljg" } }, defaultVariants: { shape: "rounded" }, compoundVariants: [] }), actions: "_8x2wljh", visuallyHidden: "_8x2wlji", input: "_8x2wljj" };

package/dist/components/forms/number-field/components/number-field-input/styles/NumberFieldInput.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit146.css');;/* empty css                                      */var e={group:"c0w2cl0"};exports.NUMBER_FIELD_INPUT_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit156.css');;/* empty css                                      */var e={group:"c0w2cl0"};exports.NUMBER_FIELD_INPUT_STYLES=e;
 //# sourceMappingURL=NumberFieldInput.css.cjs.map

package/dist/components/forms/number-field/components/number-field-input/styles/NumberFieldInput.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit146.css';/* empty css                                    */
+import '../../../../../../ui-kit156.css';/* empty css                                    */
 var o = { group: "c0w2cl0" };
 export {
   o as NUMBER_FIELD_INPUT_STYLES

package/dist/components/forms/number-field/styles/NumberField.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit47.css');;/* empty css                                 */var e={root:"_1g01svz0"};exports.NUMBER_FIELD_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit61.css');;/* empty css                                 */var e={root:"_1g01svz0"};exports.NUMBER_FIELD_STYLES=e;
 //# sourceMappingURL=NumberField.css.cjs.map

package/dist/components/forms/number-field/styles/NumberField.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit47.css';/* empty css                               */
+import '../../../../ui-kit61.css';/* empty css                               */
 var r = { root: "_1g01svz0" };
 export {
   r as NUMBER_FIELD_STYLES

package/dist/components/forms/radio-group/components/radio-item/styles/RadioItem.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit89.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                               */var e={root:"_57s3sx0",indicator:"_57s3sx1",label:"_57s3sx2"};exports.RADIO_ITEM_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit94.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                               */var e={root:"_57s3sx0",indicator:"_57s3sx1",label:"_57s3sx2"};exports.RADIO_ITEM_STYLES=e;
 //# sourceMappingURL=RadioItem.css.cjs.map

package/dist/components/forms/radio-group/components/radio-item/styles/RadioItem.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit89.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit94.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                             */
 var s = { root: "_57s3sx0", indicator: "_57s3sx1", label: "_57s3sx2" };
 export {

package/dist/components/forms/rich-text-editor/RichTextEditor.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit61.css');require('../../../ui-kit54.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const G=require("react/jsx-runtime"),t=require("react"),k=require("./components/alignment-group/AlignmentGroup.cjs"),y=require("./components/block-format-group/BlockFormatGroup.cjs"),U=require("./components/editor-field/EditorField.cjs"),A=require("./components/helper-text/HelperText.cjs"),F=require("./components/history-group/HistoryGroup.cjs"),H=require("./components/history-group/Undo.cjs"),D=require("./components/history-group/Redo.cjs"),g=require("./components/image-group/ImageGroup.cjs"),C=require("./components/link-group/LinkGroup.cjs"),O=require("./components/link-group/SetLink.cjs"),f=require("./components/link-group/UnsetLink.cjs"),v=require("./components/lists-group/ListsGroup.cjs"),B=require("./components/rich-text-editor-label/RichTextEditorLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                 */;/* empty css                                                                     */const N=require("./components/read-only-field/ReadOnlyField.cjs"),j=require("./components/text-appearance-group/TextAppearanceGroup.cjs"),X=require("./components/text-style-group/TextStyleGroup.cjs"),r=require("./components/text-style-group/TextStyleAction.cjs"),M=require("./components/toolbar/Toolbar.cjs"),P=require("./components/toolbar-groups/ToolbarGroups.cjs"),Y=require("./components/toolbar-group/ToolbarGroup.cjs"),J=require("./components/toolbar-separator/ToolbarSeparator.cjs"),V=require("./context/RichTextEditor.context.cjs"),z=require("../../../utils/cn.cjs"),K=require("./constants/richTextEmptyDocument.const.cjs"),Q=require("./constants/richTextEditorDefaultLabels.const.cjs"),W=require("./styles/RichTextEditor.css.cjs"),Z=require("./hooks/useRichTextEditor.hook.cjs"),e=t.memo(({value:i,defaultValue:n,onValueChange:R,onImageUpload:_,label:s,helperText:c,error:u,placeholder:m,disabled:l=!1,readOnly:T=!1,required:a=!1,width:d,className:I,name:L,labels:S,"aria-label":q,"aria-labelledby":p,children:b})=>{const x=t.useId(),E=t.useId(),o=Z.useRichTextEditor({value:i,defaultValue:n,onValueChange:R,disabled:l,readOnly:T,required:a,label:s,placeholder:m,error:u,helperText:c,labelId:x,helperId:E,ariaLabel:q,ariaLabelledBy:p}),h={editor:o,disabled:l,readOnly:T,onImageUpload:_,label:s,helperText:c,error:u,ariaLabel:q,ariaLabelledBy:p,labelId:x,helperId:E,name:L,required:a,renderedValue:o?.getJSON()??i??n??K.EMPTY_RICH_TEXT_DOCUMENT,labels:{...Q.RICH_TEXT_EDITOR_DEFAULT_LABELS,...S}};return o?G.jsx(V.RichTextEditorContext.Provider,{value:h,children:G.jsx("div",{className:z.cn(W.RICH_TEXT_EDITOR_STYLES.root,I),style:d!==void 0?{width:d}:void 0,children:b})}):null});e.displayName="RichTextEditor";e.Label=B;e.EditorField=U;e.ReadOnlyField=N;e.HelperText=A;e.Toolbar=M;e.ToolbarGroups=P;e.ToolbarGroup=Y;e.ToolbarSeparator=J;e.HistoryGroup=F;e.Undo=H;e.Redo=D;e.TextStyleGroup=X;e.Bold=r.Bold;e.Italic=r.Italic;e.Underline=r.Underline;e.Strike=r.Strike;e.TextAppearanceGroup=j;e.LinkGroup=C;e.SetLink=O;e.UnsetLink=f;e.BlockFormatGroup=y;e.ListsGroup=v;e.AlignmentGroup=k;e.ImageGroup=g;module.exports=e;
+"use strict";require('../../../ui-kit100.css');require('../../../ui-kit24.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const G=require("react/jsx-runtime"),t=require("react"),k=require("./components/alignment-group/AlignmentGroup.cjs"),y=require("./components/block-format-group/BlockFormatGroup.cjs"),U=require("./components/editor-field/EditorField.cjs"),A=require("./components/helper-text/HelperText.cjs"),F=require("./components/history-group/HistoryGroup.cjs"),H=require("./components/history-group/Undo.cjs"),D=require("./components/history-group/Redo.cjs"),g=require("./components/image-group/ImageGroup.cjs"),C=require("./components/link-group/LinkGroup.cjs"),O=require("./components/link-group/SetLink.cjs"),f=require("./components/link-group/UnsetLink.cjs"),v=require("./components/lists-group/ListsGroup.cjs"),B=require("./components/rich-text-editor-label/RichTextEditorLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                 */;/* empty css                                                                     */const N=require("./components/read-only-field/ReadOnlyField.cjs"),j=require("./components/text-appearance-group/TextAppearanceGroup.cjs"),X=require("./components/text-style-group/TextStyleGroup.cjs"),r=require("./components/text-style-group/TextStyleAction.cjs"),M=require("./components/toolbar/Toolbar.cjs"),P=require("./components/toolbar-groups/ToolbarGroups.cjs"),Y=require("./components/toolbar-group/ToolbarGroup.cjs"),J=require("./components/toolbar-separator/ToolbarSeparator.cjs"),V=require("./context/RichTextEditor.context.cjs"),z=require("../../../utils/cn.cjs"),K=require("./constants/richTextEmptyDocument.const.cjs"),Q=require("./constants/richTextEditorDefaultLabels.const.cjs"),W=require("./styles/RichTextEditor.css.cjs"),Z=require("./hooks/useRichTextEditor.hook.cjs"),e=t.memo(({value:i,defaultValue:n,onValueChange:R,onImageUpload:_,label:s,helperText:c,error:u,placeholder:m,disabled:l=!1,readOnly:T=!1,required:a=!1,width:d,className:I,name:L,labels:S,"aria-label":q,"aria-labelledby":p,children:b})=>{const x=t.useId(),E=t.useId(),o=Z.useRichTextEditor({value:i,defaultValue:n,onValueChange:R,disabled:l,readOnly:T,required:a,label:s,placeholder:m,error:u,helperText:c,labelId:x,helperId:E,ariaLabel:q,ariaLabelledBy:p}),h={editor:o,disabled:l,readOnly:T,onImageUpload:_,label:s,helperText:c,error:u,ariaLabel:q,ariaLabelledBy:p,labelId:x,helperId:E,name:L,required:a,renderedValue:o?.getJSON()??i??n??K.EMPTY_RICH_TEXT_DOCUMENT,labels:{...Q.RICH_TEXT_EDITOR_DEFAULT_LABELS,...S}};return o?G.jsx(V.RichTextEditorContext.Provider,{value:h,children:G.jsx("div",{className:z.cn(W.RICH_TEXT_EDITOR_STYLES.root,I),style:d!==void 0?{width:d}:void 0,children:b})}):null});e.displayName="RichTextEditor";e.Label=B;e.EditorField=U;e.ReadOnlyField=N;e.HelperText=A;e.Toolbar=M;e.ToolbarGroups=P;e.ToolbarGroup=Y;e.ToolbarSeparator=J;e.HistoryGroup=F;e.Undo=H;e.Redo=D;e.TextStyleGroup=X;e.Bold=r.Bold;e.Italic=r.Italic;e.Underline=r.Underline;e.Strike=r.Strike;e.TextAppearanceGroup=j;e.LinkGroup=C;e.SetLink=O;e.UnsetLink=f;e.BlockFormatGroup=y;e.ListsGroup=v;e.AlignmentGroup=k;e.ImageGroup=g;module.exports=e;
 //# sourceMappingURL=RichTextEditor.cjs.map

package/dist/components/forms/rich-text-editor/RichTextEditor.js

@@ -13,7 +13,7 @@ import v from "./components/link-group/SetLink.js";
 import B from "./components/link-group/UnsetLink.js";
 import D from "./components/lists-group/ListsGroup.js";
 import N from "./components/rich-text-editor-label/RichTextEditorLabel.js";
-import '../../../ui-kit61.css';import '../../../ui-kit54.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import '../../../ui-kit100.css';import '../../../ui-kit24.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                               */
 /* empty css                                                                   */

package/dist/components/forms/rich-text-editor/RichTextEditorField.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit61.css');require('../../../ui-kit54.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("react"),l=require("./RichTextEditor.cjs"),d=require("./components/rich-text-editor-label/RichTextEditorLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                 */;/* empty css                                                                     */const o=require("./components/editor-field/EditorField.cjs"),a=require("./components/helper-text/HelperText.cjs"),u=require("./components/read-only-field/ReadOnlyField.cjs"),x=require("./components/toolbar/Toolbar.cjs"),q=require("./components/toolbar-groups/ToolbarGroups.cjs"),n=c.memo(r=>{const t=r.label,i=r.readOnly??!1,s=e.jsxs(e.Fragment,{children:[t&&e.jsx(d,{disabled:i?!1:r.disabled,children:t}),i?e.jsx(u,{}):e.jsxs(e.Fragment,{children:[e.jsx(x,{children:e.jsx(q,{})}),e.jsx(o,{})]}),e.jsx(a,{})]});return t!==void 0||r["aria-label"]!==void 0?e.jsx(l,{...r,readOnly:i,children:s}):e.jsx(l,{...r,readOnly:i,children:s})});n.displayName="RichTextEditorField";module.exports=n;
+"use strict";require('../../../ui-kit100.css');require('../../../ui-kit24.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("react"),l=require("./RichTextEditor.cjs"),d=require("./components/rich-text-editor-label/RichTextEditorLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                 */;/* empty css                                                                     */const o=require("./components/editor-field/EditorField.cjs"),a=require("./components/helper-text/HelperText.cjs"),u=require("./components/read-only-field/ReadOnlyField.cjs"),x=require("./components/toolbar/Toolbar.cjs"),q=require("./components/toolbar-groups/ToolbarGroups.cjs"),n=c.memo(r=>{const t=r.label,i=r.readOnly??!1,s=e.jsxs(e.Fragment,{children:[t&&e.jsx(d,{disabled:i?!1:r.disabled,children:t}),i?e.jsx(u,{}):e.jsxs(e.Fragment,{children:[e.jsx(x,{children:e.jsx(q,{})}),e.jsx(o,{})]}),e.jsx(a,{})]});return t!==void 0||r["aria-label"]!==void 0?e.jsx(l,{...r,readOnly:i,children:s}):e.jsx(l,{...r,readOnly:i,children:s})});n.displayName="RichTextEditorField";module.exports=n;
 //# sourceMappingURL=RichTextEditorField.cjs.map

package/dist/components/forms/rich-text-editor/RichTextEditorField.js

@@ -2,7 +2,7 @@ import { jsxs as l, Fragment as m, jsx as r } from "react/jsx-runtime";
 import { memo as a } from "react";
 import d from "./RichTextEditor.js";
 import n from "./components/rich-text-editor-label/RichTextEditorLabel.js";
-import '../../../ui-kit61.css';import '../../../ui-kit54.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import '../../../ui-kit100.css';import '../../../ui-kit24.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                               */
 /* empty css                                                                   */

package/dist/components/forms/rich-text-editor/components/alignment-group/AlignmentGroup.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit17.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),s=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");const l=require("../../../../overlay/tooltip/Tooltip.cjs");require("../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                                 */;/* empty css                                                              */require("../../../../overlay/dropdown-menu/index.cjs");const d=require("react"),g=require("../../../../../resources/asset/AlignCenterIcon.svg.cjs"),p=require("../../../../../resources/asset/AlignJustifyIcon.svg.cjs"),c=require("../../../../../resources/asset/AlignLeftIcon.svg.cjs"),h=require("../../../../../resources/asset/AlignRightIcon.svg.cjs"),j=require("../../context/RichTextEditor.context.cjs"),y=require("./styles/AlignmentGroup.css.cjs"),o=require("../../../../overlay/dropdown-menu/DropdownMenu.cjs"),x=({presentation:f="menu"})=>{const{editor:n,disabled:r,labels:t}=j.useRichTextEditorContext(),[u,m]=d.useState(!1);if(!n)return null;const a=n.getAttributes("paragraph").textAlign??n.getAttributes("heading").textAlign??"left";return e.jsx("div",{className:y.ALIGNMENT_GROUP_STYLES.root,role:"group","aria-label":t.alignmentGroup,children:f==="inline"?e.jsxs(e.Fragment,{children:[e.jsx(l,{content:t.alignLeft,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:c,"aria-label":t.alignLeft,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("left").run()})}),e.jsx(l,{content:t.alignCenter,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:g,"aria-label":t.alignCenter,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("center").run()})}),e.jsx(l,{content:t.alignRight,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:h,"aria-label":t.alignRight,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("right").run()})}),e.jsx(l,{content:t.justify,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:p,"aria-label":t.justify,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("justify").run()})})]}):e.jsxs(o,{modal:!1,open:u,onOpenChange:m,children:[e.jsx(l,{content:t.alignmentTrigger,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(o.Trigger,{children:e.jsx(s,{type:"button",icon:c,"aria-label":t.alignmentTrigger,variant:"ghost",color:"primary",size:"sm",active:u,disabled:r})})}),e.jsxs(o.Content,{"aria-label":t.alignmentOptions,children:[e.jsx(o.Item,{label:t.alignLeft,startIcon:c,active:a==="left",onClick:()=>n.chain().focus().setTextAlign("left").run()}),e.jsx(o.Item,{label:t.alignCenter,startIcon:g,active:a==="center",onClick:()=>n.chain().focus().setTextAlign("center").run()}),e.jsx(o.Item,{label:t.alignRight,startIcon:h,active:a==="right",onClick:()=>n.chain().focus().setTextAlign("right").run()}),e.jsx(o.Item,{label:t.justify,startIcon:p,active:a==="justify",onClick:()=>n.chain().focus().setTextAlign("justify").run()})]})]})})};x.displayName="RichTextEditor.AlignmentGroup";module.exports=x;
+"use strict";require('../../../../../ui-kit28.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),s=require("../../../../actions/icon-button/IconButton.cjs");require("../../../../actions/icon-button/styles/IconButton.css.cjs");const l=require("../../../../overlay/tooltip/Tooltip.cjs");require("../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                                 */;/* empty css                                                              */require("../../../../overlay/dropdown-menu/index.cjs");const d=require("react"),g=require("../../../../../resources/asset/AlignCenterIcon.svg.cjs"),p=require("../../../../../resources/asset/AlignJustifyIcon.svg.cjs"),c=require("../../../../../resources/asset/AlignLeftIcon.svg.cjs"),h=require("../../../../../resources/asset/AlignRightIcon.svg.cjs"),j=require("../../context/RichTextEditor.context.cjs"),y=require("./styles/AlignmentGroup.css.cjs"),o=require("../../../../overlay/dropdown-menu/DropdownMenu.cjs"),x=({presentation:f="menu"})=>{const{editor:n,disabled:r,labels:t}=j.useRichTextEditorContext(),[u,m]=d.useState(!1);if(!n)return null;const a=n.getAttributes("paragraph").textAlign??n.getAttributes("heading").textAlign??"left";return e.jsx("div",{className:y.ALIGNMENT_GROUP_STYLES.root,role:"group","aria-label":t.alignmentGroup,children:f==="inline"?e.jsxs(e.Fragment,{children:[e.jsx(l,{content:t.alignLeft,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:c,"aria-label":t.alignLeft,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("left").run()})}),e.jsx(l,{content:t.alignCenter,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:g,"aria-label":t.alignCenter,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("center").run()})}),e.jsx(l,{content:t.alignRight,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:h,"aria-label":t.alignRight,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("right").run()})}),e.jsx(l,{content:t.justify,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(s,{type:"button",icon:p,"aria-label":t.justify,variant:"ghost",color:"primary",size:"sm",disabled:r,onMouseDown:i=>i.preventDefault(),onClick:()=>n.chain().focus().setTextAlign("justify").run()})})]}):e.jsxs(o,{modal:!1,open:u,onOpenChange:m,children:[e.jsx(l,{content:t.alignmentTrigger,delayDuration:700,openOnFocus:!1,position:"top",children:e.jsx(o.Trigger,{children:e.jsx(s,{type:"button",icon:c,"aria-label":t.alignmentTrigger,variant:"ghost",color:"primary",size:"sm",active:u,disabled:r})})}),e.jsxs(o.Content,{"aria-label":t.alignmentOptions,children:[e.jsx(o.Item,{label:t.alignLeft,startIcon:c,active:a==="left",onClick:()=>n.chain().focus().setTextAlign("left").run()}),e.jsx(o.Item,{label:t.alignCenter,startIcon:g,active:a==="center",onClick:()=>n.chain().focus().setTextAlign("center").run()}),e.jsx(o.Item,{label:t.alignRight,startIcon:h,active:a==="right",onClick:()=>n.chain().focus().setTextAlign("right").run()}),e.jsx(o.Item,{label:t.justify,startIcon:p,active:a==="justify",onClick:()=>n.chain().focus().setTextAlign("justify").run()})]})]})})};x.displayName="RichTextEditor.AlignmentGroup";module.exports=x;
 //# sourceMappingURL=AlignmentGroup.cjs.map

package/dist/components/forms/rich-text-editor/components/alignment-group/AlignmentGroup.js

@@ -3,7 +3,7 @@ import a from "../../../../actions/icon-button/IconButton.js";
 import "../../../../actions/icon-button/styles/IconButton.css.js";
 import l from "../../../../overlay/tooltip/Tooltip.js";
 import "../../../../overlay/tooltip/components/tooltip-provider/TooltipProvider.js";
-import '../../../../../ui-kit17.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit28.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                            */
 import "../../../../overlay/dropdown-menu/index.js";
 import { useState as b } from "react";

package/dist/components/forms/rich-text-editor/components/alignment-group/styles/AlignmentGroup.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit122.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                    */var e={root:"_1hfg1yn0"};exports.ALIGNMENT_GROUP_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit141.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                    */var e={root:"_1hfg1yn0"};exports.ALIGNMENT_GROUP_STYLES=e;
 //# sourceMappingURL=AlignmentGroup.css.cjs.map

package/dist/components/forms/rich-text-editor/components/alignment-group/styles/AlignmentGroup.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit122.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit141.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                  */
 var t = { root: "_1hfg1yn0" };
 export {