@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/forms/calendar/Calendar.js

@@ -166,12 +166,16 @@ function MappedCalendar(props, forwardedRef) {
     onChange: validationOnChange,
     onBlur,
     onInvalid
-  } = useFormFieldValidation(ref, {
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp,
-    "aria-describedby": ariaDescribedByProp,
-    "aria-details": ariaDetailsProp
-  });
+  } = useFormFieldValidation(
+    ref,
+    { contextRequired },
+    {
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      "aria-describedby": ariaDescribedByProp,
+      "aria-details": ariaDetailsProp
+    }
+  );
   const isValueMissing = internalValue === void 0 || internalValue === null;
   useEffect(() => {
     if (messageState.showError) {

package/esm/forms/calendar/Calendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Dispatch,\n  type Ref,\n} from 'react';\n\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from './Calendar.types.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { mapToTimeframe } from '../forms-core/time/timeParser.js';\nimport { isTimeframe } from '../forms-core/time/types.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport {\n  calendarBodyCSS,\n  calendarCSS,\n  calendarDisabledCSS,\n} from './Calendar.sty.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport { validateCalendarSelection } from './state/calendar-validation.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport type { CalendarState, CalendarViewType } from './types/shared-types.js';\nimport { isCompleteSelection } from './utils/helpers.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\nfunction getControllableStateProps<T extends CalendarType>({\n  defaultValue,\n  value,\n  onChange,\n  type,\n}: {\n  defaultValue: CalendarProps<T>['defaultValue'];\n  value: CalendarProps<T>['value'];\n  onChange: CalendarProps<T>['onChange'];\n  type: CalendarType;\n}) {\n  if (isTimeframe(defaultValue, type) && isTimeframe(value, type)) {\n    const mappedDefaultValue = defaultValue\n      ? mapToTimeframe(defaultValue)\n      : defaultValue;\n    const mappedValue = value ? mapToTimeframe(value) : value;\n\n    return { defaultValue: mappedDefaultValue, value: mappedValue, onChange };\n  }\n\n  return {\n    defaultValue:\n      defaultValue instanceof Date\n        ? (defaultValue.toISOString() as CalendarStrictValueType<T>)\n        : defaultValue,\n    value:\n      value instanceof Date\n        ? (value.toISOString() as CalendarStrictValueType<T>)\n        : value,\n    onChange,\n  };\n}\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction validate(\n  state: CalendarState,\n  dispatch?: Dispatch<FormFieldMessagesReducerAction>,\n) {\n  validateCalendarSelection(\n    state.selectedDate,\n    state,\n    (args: FormFieldMessagesReducerAction) => {\n      // Delay the ErrorMessage update by a tick to not update the calendar state and the message state at the same time.\n      window.setTimeout(() => {\n        dispatch?.(args);\n      });\n    },\n    true,\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nfunction MappedCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value,\n    onChange,\n    defaultValue,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id: propId,\n    disabled: propDisabled,\n    'aria-disabled': ariaDisabledProp,\n    required: propRequired,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    precision,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: CalendarProps<Type> = props;\n\n  const [internalValue, setInternalValue] = useControllableState(\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    getControllableStateProps<typeof type>({\n      defaultValue,\n      value,\n      onChange,\n      type,\n    }),\n  );\n\n  // Imperative Handle Construction\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    value: internalValue,\n    onChange: setInternalValue,\n    type,\n    precision,\n    ...remainingProps,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { state: messageState, dispatch: formMessageDispatch } =\n    useFormFieldMessagesContext();\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate() {\n            validate(state, formMessageDispatch);\n            formMessageDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          },\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: {\n          from: ref?.current,\n          to: refTo?.current,\n        },\n        validate() {\n          validate(state, formMessageDispatch);\n        },\n      };\n    },\n    [formMessageDispatch, state, type],\n  );\n\n  const {\n    disabled: contextDisabled,\n    required: contextRequired,\n    id: controlId,\n    ariaDisabled,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(ref, {\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  });\n  const isValueMissing = internalValue === undefined || internalValue === null;\n\n  // cleans up the required error when the value changed\n  useEffect(() => {\n    if (messageState.showError) {\n      validationOnChange();\n    }\n\n    // eventListeners is excluded since it is changed every render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isValueMissing, messageState.showError]);\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabled = propDisabled || contextDisabled;\n  const required = propRequired || contextRequired;\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id: controlId,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(calendarCSS({ readOnly }), consumerClassName, {\n          [calendarDisabledCSS]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={calendarBodyCSS({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n      </div>\n      <VisuallyHidden>\n        {isTimeframe(state.selectedDate, state.type) ? (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isCompleteSelection(type, state.selectedDate)\n                  ? state.selectedDate?.from?.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={state.selectedDate?.to?.value ?? ''}\n              id={`${controlId}-to`}\n              type=\"hidden\"\n            />\n          </>\n        ) : (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={state.selectedDate?.value ?? ''}\n            tabIndex={-1}\n          />\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nMappedCalendar['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar Component\n * @internal\n */\nexport const Calendar = forwardRef(MappedCalendar);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Dispatch,\n  type Ref,\n} from 'react';\n\nimport type {\n  CalendarProps,\n  CalendarStrictValueType,\n} from './Calendar.types.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { mapToTimeframe } from '../forms-core/time/timeParser.js';\nimport { isTimeframe } from '../forms-core/time/types.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport {\n  calendarBodyCSS,\n  calendarCSS,\n  calendarDisabledCSS,\n} from './Calendar.sty.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport { validateCalendarSelection } from './state/calendar-validation.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport type { CalendarState, CalendarViewType } from './types/shared-types.js';\nimport { isCompleteSelection } from './utils/helpers.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\nfunction getControllableStateProps<T extends CalendarType>({\n  defaultValue,\n  value,\n  onChange,\n  type,\n}: {\n  defaultValue: CalendarProps<T>['defaultValue'];\n  value: CalendarProps<T>['value'];\n  onChange: CalendarProps<T>['onChange'];\n  type: CalendarType;\n}) {\n  if (isTimeframe(defaultValue, type) && isTimeframe(value, type)) {\n    const mappedDefaultValue = defaultValue\n      ? mapToTimeframe(defaultValue)\n      : defaultValue;\n    const mappedValue = value ? mapToTimeframe(value) : value;\n\n    return { defaultValue: mappedDefaultValue, value: mappedValue, onChange };\n  }\n\n  return {\n    defaultValue:\n      defaultValue instanceof Date\n        ? (defaultValue.toISOString() as CalendarStrictValueType<T>)\n        : defaultValue,\n    value:\n      value instanceof Date\n        ? (value.toISOString() as CalendarStrictValueType<T>)\n        : value,\n    onChange,\n  };\n}\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction validate(\n  state: CalendarState,\n  dispatch?: Dispatch<FormFieldMessagesReducerAction>,\n) {\n  validateCalendarSelection(\n    state.selectedDate,\n    state,\n    (args: FormFieldMessagesReducerAction) => {\n      // Delay the ErrorMessage update by a tick to not update the calendar state and the message state at the same time.\n      window.setTimeout(() => {\n        dispatch?.(args);\n      });\n    },\n    true,\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nfunction MappedCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value,\n    onChange,\n    defaultValue,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id: propId,\n    disabled: propDisabled,\n    'aria-disabled': ariaDisabledProp,\n    required: propRequired,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    precision,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: CalendarProps<Type> = props;\n\n  const [internalValue, setInternalValue] = useControllableState(\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    getControllableStateProps<typeof type>({\n      defaultValue,\n      value,\n      onChange,\n      type,\n    }),\n  );\n\n  // Imperative Handle Construction\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    value: internalValue,\n    onChange: setInternalValue,\n    type,\n    precision,\n    ...remainingProps,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { state: messageState, dispatch: formMessageDispatch } =\n    useFormFieldMessagesContext();\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate() {\n            validate(state, formMessageDispatch);\n            formMessageDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          },\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: {\n          from: ref?.current,\n          to: refTo?.current,\n        },\n        validate() {\n          validate(state, formMessageDispatch);\n        },\n      };\n    },\n    [formMessageDispatch, state, type],\n  );\n\n  const {\n    disabled: contextDisabled,\n    required: contextRequired,\n    id: controlId,\n    ariaDisabled,\n  } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(\n    ref,\n    { contextRequired },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n  const isValueMissing = internalValue === undefined || internalValue === null;\n\n  // cleans up the required error when the value changed\n  useEffect(() => {\n    if (messageState.showError) {\n      validationOnChange();\n    }\n\n    // eventListeners is excluded since it is changed every render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isValueMissing, messageState.showError]);\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabled = propDisabled || contextDisabled;\n  const required = propRequired || contextRequired;\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id: controlId,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(calendarCSS({ readOnly }), consumerClassName, {\n          [calendarDisabledCSS]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={calendarBodyCSS({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n      </div>\n      <VisuallyHidden>\n        {isTimeframe(state.selectedDate, state.type) ? (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isCompleteSelection(type, state.selectedDate)\n                  ? state.selectedDate?.from?.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={state.selectedDate?.to?.value ?? ''}\n              id={`${controlId}-to`}\n              type=\"hidden\"\n            />\n          </>\n        ) : (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={state.selectedDate?.value ?? ''}\n            tabIndex={-1}\n          />\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nMappedCalendar['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar Component\n * @internal\n */\nexport const Calendar = forwardRef(MappedCalendar);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/calendar/Calendar.sty.js

@@ -1,16 +1,16 @@
 import "./Calendar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var calendarBodyCSS = _7a468({ defaultClassName: "_xm8mdk3-3-0-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarCSS = _7a468({ defaultClassName: "_xm8mdk0-3-0-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarClearBgCSS = "_xm8mdkm-3-0-1";
-var calendarDayRowCSS = "_xm8mdk6-3-0-1";
-var calendarDisabledCSS = "_xm8mdk2-3-0-1";
-var calendarFieldCSS = _7a468({ defaultClassName: "_xm8mdk9-3-0-1", variantClassNames: { color: { primary: "_xm8mdka-3-0-1", neutral: "_xm8mdkb-3-0-1", critical: "_xm8mdkc-3-0-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-0-1" }, isDisabled: { true: "_xm8mdke-3-0-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-0-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-0-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-0-1"]] });
-var calendarMonthRowCSS = "_xm8mdk7-3-0-1";
-var calendarRangeFieldCSS = _7a468({ defaultClassName: "_xm8mdki-3-0-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-0-1", last: "_xm8mdkk-3-0-1", inbetween: "_xm8mdkl-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarRowCSS = "_xm8mdk5-3-0-1";
-var calendarWeekdaysCSS = "_xm8mdkn-3-0-1";
-var calendarYearRowCSS = "_xm8mdk8-3-0-1";
+var calendarBodyCSS = _7a468({ defaultClassName: "_xm8mdk3-3-1-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarCSS = _7a468({ defaultClassName: "_xm8mdk0-3-1-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarClearBgCSS = "_xm8mdkm-3-1-1";
+var calendarDayRowCSS = "_xm8mdk6-3-1-1";
+var calendarDisabledCSS = "_xm8mdk2-3-1-1";
+var calendarFieldCSS = _7a468({ defaultClassName: "_xm8mdk9-3-1-1", variantClassNames: { color: { primary: "_xm8mdka-3-1-1", neutral: "_xm8mdkb-3-1-1", critical: "_xm8mdkc-3-1-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-1-1" }, isDisabled: { true: "_xm8mdke-3-1-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-1-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-1-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-1-1"]] });
+var calendarMonthRowCSS = "_xm8mdk7-3-1-1";
+var calendarRangeFieldCSS = _7a468({ defaultClassName: "_xm8mdki-3-1-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-1-1", last: "_xm8mdkk-3-1-1", inbetween: "_xm8mdkl-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var calendarRowCSS = "_xm8mdk5-3-1-1";
+var calendarWeekdaysCSS = "_xm8mdkn-3-1-1";
+var calendarYearRowCSS = "_xm8mdk8-3-1-1";
 export {
   calendarBodyCSS,
   calendarCSS,

package/esm/forms/calendar/Calendar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.css.ts"],
-  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var calendarBodyCSS = _7a468({defaultClassName:'_xm8mdk3-3-0-1',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarCSS = _7a468({defaultClassName:'_xm8mdk0-3-0-1',variantClassNames:{readOnly:{true:'_xm8mdk1-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarClearBgCSS = '_xm8mdkm-3-0-1';\nexport var calendarDayRowCSS = '_xm8mdk6-3-0-1';\nexport var calendarDisabledCSS = '_xm8mdk2-3-0-1';\nexport var calendarFieldCSS = _7a468({defaultClassName:'_xm8mdk9-3-0-1',variantClassNames:{color:{primary:'_xm8mdka-3-0-1',neutral:'_xm8mdkb-3-0-1',critical:'_xm8mdkc-3-0-1'},isIncompleteSelection:{true:'_xm8mdkd-3-0-1'},isDisabled:{true:'_xm8mdke-3-0-1'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-0-1'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-0-1'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-0-1']]});\nexport var calendarMonthRowCSS = '_xm8mdk7-3-0-1';\nexport var calendarRangeFieldCSS = _7a468({defaultClassName:'_xm8mdki-3-0-1',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-0-1',last:'_xm8mdkk-3-0-1',inbetween:'_xm8mdkl-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarRowCSS = '_xm8mdk5-3-0-1';\nexport var calendarWeekdaysCSS = '_xm8mdkn-3-0-1';\nexport var calendarYearRowCSS = '_xm8mdk8-3-0-1';"],
+  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var calendarBodyCSS = _7a468({defaultClassName:'_xm8mdk3-3-1-1',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarCSS = _7a468({defaultClassName:'_xm8mdk0-3-1-1',variantClassNames:{readOnly:{true:'_xm8mdk1-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarClearBgCSS = '_xm8mdkm-3-1-1';\nexport var calendarDayRowCSS = '_xm8mdk6-3-1-1';\nexport var calendarDisabledCSS = '_xm8mdk2-3-1-1';\nexport var calendarFieldCSS = _7a468({defaultClassName:'_xm8mdk9-3-1-1',variantClassNames:{color:{primary:'_xm8mdka-3-1-1',neutral:'_xm8mdkb-3-1-1',critical:'_xm8mdkc-3-1-1'},isIncompleteSelection:{true:'_xm8mdkd-3-1-1'},isDisabled:{true:'_xm8mdke-3-1-1'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-1-1'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-1-1'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-1-1']]});\nexport var calendarMonthRowCSS = '_xm8mdk7-3-1-1';\nexport var calendarRangeFieldCSS = _7a468({defaultClassName:'_xm8mdki-3-1-1',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-1-1',last:'_xm8mdkk-3-1-1',inbetween:'_xm8mdkl-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarRowCSS = '_xm8mdk5-3-1-1';\nexport var calendarWeekdaysCSS = '_xm8mdkn-3-1-1';\nexport var calendarYearRowCSS = '_xm8mdk8-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9J,IAAI,cAAc,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxJ,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,sBAAsB;AAC1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,GAAE,uBAAsB,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,OAAM,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,YAAW,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChe,IAAI,sBAAsB;AAC1B,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,OAAM,kBAAiB,MAAK,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-0-1 {
+._1basjc0-3-1-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-0-1::after,._1basjc1-3-0-1::before {
+._1basjc1-3-1-1::after,._1basjc1-3-1-1::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-0-1::before {
+._1basjc1-3-1-1::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-0-1 {
+._1basjc2-3-1-1 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-0-1::after {
-  background: var(--_1jljrbf1-3-0-1);
+._1basjc2-3-1-1::after {
+  background: var(--_1jljrbf1-3-1-1);
 }
-._1basjc3-3-0-1 {
+._1basjc3-3-1-1 {
   flex-grow: 1;
 }

package/esm/forms/calendar/components/CalendarItem.sty.js

@@ -1,8 +1,8 @@
 import "./CalendarItem.css";
-var calendarButtonCSS = "_1basjc2-3-0-1";
-var calendarHeaderButtonCSS = "_1basjc3-3-0-1";
-var currentIndicator = "_1basjc1-3-0-1";
-var outOfScopeDay = "_1basjc0-3-0-1";
+var calendarButtonCSS = "_1basjc2-3-1-1";
+var calendarHeaderButtonCSS = "_1basjc3-3-1-1";
+var currentIndicator = "_1basjc1-3-1-1";
+var outOfScopeDay = "_1basjc0-3-1-1";
 export {
   calendarButtonCSS,
   calendarHeaderButtonCSS,

package/esm/forms/calendar/components/CalendarItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarItem.css.ts"],
-  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButtonCSS = '_1basjc2-3-0-1';\nexport var calendarHeaderButtonCSS = '_1basjc3-3-0-1';\nexport var currentIndicator = '_1basjc1-3-0-1';\nexport var outOfScopeDay = '_1basjc0-3-0-1';"],
+  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButtonCSS = '_1basjc2-3-1-1';\nexport var calendarHeaderButtonCSS = '_1basjc3-3-1-1';\nexport var currentIndicator = '_1basjc1-3-1-1';\nexport var outOfScopeDay = '_1basjc0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-0-1 {
+._1uazq660-3-1-1 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-0-1);
+  fill: var(--_1jljrbf1-3-1-1);
 }
-._1uazq661-3-0-1 {
-  fill: var(--_1jljrbf1-3-0-1);
+._1uazq661-3-1-1 {
+  fill: var(--_1jljrbf1-3-1-1);
 }
-._1uazq662-3-0-1 {
+._1uazq662-3-1-1 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-0-1 {
-  fill: var(--_1jljrbf0-3-0-1);
+._1uazq663-3-1-1 {
+  fill: var(--_1jljrbf0-3-1-1);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-0-1 {
+._1uazq664-3-1-1 {
   opacity: 1;
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -1,9 +1,9 @@
 import "./CalendarOutlineIcon.css";
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-0-1";
-var calendarIndicatorCSS = "_1uazq661-3-0-1";
-var calendarOutlineCSS = "_1uazq660-3-0-1";
-var calendarRangeCornersCSS = "_1uazq663-3-0-1";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-0-1";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-1-1";
+var calendarIndicatorCSS = "_1uazq661-3-1-1";
+var calendarOutlineCSS = "_1uazq660-3-1-1";
+var calendarRangeCornersCSS = "_1uazq663-3-1-1";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-1-1";
 export {
   calendarIndicatorBackgroundCSS,
   calendarIndicatorCSS,

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarOutlineIcon.css.ts"],
-  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-0-1';\nexport var calendarIndicatorCSS = '_1uazq661-3-0-1';\nexport var calendarOutlineCSS = '_1uazq660-3-0-1';\nexport var calendarRangeCornersCSS = '_1uazq663-3-0-1';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-0-1';"],
+  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-1-1';\nexport var calendarIndicatorCSS = '_1uazq661-3-1-1';\nexport var calendarOutlineCSS = '_1uazq660-3-1-1';\nexport var calendarRangeCornersCSS = '_1uazq663-3-1-1';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,uBAAuB;AAC3B,IAAI,qBAAqB;AACzB,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;",
   "names": []
 }

package/esm/forms/calendar/variables.sty.js

@@ -1,5 +1,5 @@
-var borderColor = "var(--_1jljrbf1-3-0-1)";
-var rangeColor = "var(--_1jljrbf0-3-0-1)";
+var borderColor = "var(--_1jljrbf1-3-1-1)";
+var rangeColor = "var(--_1jljrbf0-3-1-1)";
 export {
   borderColor,
   rangeColor

package/esm/forms/calendar/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/variables.css.ts"],
-  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-0-1)';\nexport var rangeColor = 'var(--_1jljrbf0-3-0-1)';"],
+  "sourcesContent": ["export var borderColor = 'var(--_1jljrbf1-3-1-1)';\nexport var rangeColor = 'var(--_1jljrbf0-3-1-1)';"],
   "mappings": "AAAO,IAAI,cAAc;AAClB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.css

@@ -1,52 +1,52 @@
-._qmw7sp0-3-0-1 {
+._qmw7sp0-3-1-1 {
   display: flex;
   cursor: pointer;
 }
-._qmw7sp1-3-0-1 {
+._qmw7sp1-3-1-1 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._qmw7sp2-3-0-1:after {
+._qmw7sp2-3-1-1:after {
   content: "*";
 }
-._qmw7sp3-3-0-1 {
+._qmw7sp3-3-1-1 {
   cursor: not-allowed;
 }
-._qmw7sp4-3-0-1 {
+._qmw7sp4-3-1-1 {
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
-  background-color: var(--_bx32h3-3-0-1);
+  background-color: var(--_bx32h3-3-1-1);
   flex-shrink: 0;
   box-sizing: border-box;
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._qmw7sp5-3-0-1 {
+._qmw7sp5-3-1-1 {
   margin-right: var(--dt-spacings-size-8, 8px);
 }
-._qmw7sp6-3-0-1 {
+._qmw7sp6-3-1-1 {
   margin-right: 0;
 }
-._qmw7spf-3-0-1 {
-  background-color: var(--_bx32h2-3-0-1);
+._qmw7spf-3-1-1 {
+  background-color: var(--_bx32h2-3-1-1);
 }
-._qmw7spg-3-0-1:not(:has(:focus-visible)) {
+._qmw7spg-3-1-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._qmw7sph-3-0-1:not(:has(:focus-visible)) {
+._qmw7sph-3-1-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._qmw7spi-3-0-1:not(:has(:focus-visible)) {
+._qmw7spi-3-1-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._qmw7spj-3-0-1:not(:has(:focus-visible)) {
+._qmw7spj-3-1-1:not(:has(:focus-visible)) {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._qmw7spk-3-0-1 {
+._qmw7spk-3-1-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  color: var(--_bx32h1-3-0-1);
+  color: var(--_bx32h1-3-1-1);
 }

package/esm/forms/checkbox/Checkbox.js

@@ -57,6 +57,12 @@ const Checkbox = forwardRef(
       ariaLabelingProps
     );
     const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
+    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({
+      propDisabled,
+      propRequired,
+      propId,
+      propAriaDisabled: ariaDisabledProp
+    });
     const rootRef = useRef(null);
     const inputRef = useRef(null);
     const {
@@ -64,7 +70,7 @@ const Checkbox = forwardRef(
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = useFormFieldValidation(inputRef, ariaLabelingProps);
+    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);
     useImperativeHandle(forwardedRef, () => {
       return {
         element: rootRef.current,
@@ -87,12 +93,6 @@ const Checkbox = forwardRef(
       defaultValue,
       value
     });
-    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({
-      propDisabled,
-      propRequired,
-      propId,
-      propAriaDisabled: ariaDisabledProp
-    });
     const disabledOrAriaDisabled = disabled || ariaDisabled || false;
     const [hasError, hint] = useFormControlState(controlState);
     const { inputProps, hintProps } = useInputHint({

package/esm/forms/checkbox/Checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  memo,\n} from 'react';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly = false,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onChange,\n      children,\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const ariaLabelingProps = _useAriaLabelingProps(remainingProps);\n    const forwardProps = _useSafeForwardProps(\n      remainingProps,\n      ariaLabelingProps,\n    );\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, ariaLabelingProps);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          }\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n    });\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const [hasError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError,\n    });\n\n    const showError = hasError || messagesContextState.showError;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!disabled && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n\n      if (!messagesContextState.isTouched) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  memo,\n} from 'react';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly = false,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onChange,\n      children,\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const ariaLabelingProps = _useAriaLabelingProps(remainingProps);\n    const forwardProps = _useSafeForwardProps(\n      remainingProps,\n      ariaLabelingProps,\n    );\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n    });\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          }\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const [hasError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError,\n    });\n\n    const showError = hasError || messagesContextState.showError;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!disabled && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n\n      if (!messagesContextState.isTouched) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
+  "mappings": "AA8NU,SAsBI,KAtBJ;AA9NV,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB,iBAAiB;AAE9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB,4BAA4B;AAC5D,SAAS,uBAAuB;AAOhC,SAAS,YAAY;AACrB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,aAAa,oBAAoB;AAC1C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAG7B,MAAM,iBAAiB;AA4BhB,MAAM,WAAW;AAAA,EACtB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW;AAAA,MACX,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAmB;AAEnB,UAAM,oBAAoB,sBAAsB,cAAc;AAC9D,UAAM,eAAe;AAAA,MACnB;AAAA,MACA;AAAA,IACF;AAEA,UAAM,EAAE,OAAO,sBAAsB,UAAU,wBAAwB,IACrE,4BAA4B;AAE9B,UAAM,EAAE,UAAU,UAAU,IAAI,aAAa,IAAI,0BAA0B;AAAA,MACzE;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,IACpB,CAAC;AAGD,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,WAAW,OAAyB,IAAI;AAC9C,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAW;AAAA,MACX;AAAA,IACF,IAAI,uBAAuB,UAAU,EAAE,SAAS,GAAG,iBAAiB;AAEpE,wBAAoB,cAAc,MAAsB;AACtD,aAAO;AAAA,QACL,SAAS,QAAQ;AAAA,QACjB,UAAU,SAAS;AAAA,QACnB,QAAQ;AACN,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAW;AACT,cAAI,sBAAsB;AACxB,qBAAS,SAAS,cAAc;AAChC,sCAA0B;AAAA,cACxB,MAAM,wBAAwB;AAAA,cAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,YAC7B,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,MAC7C;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,yBAAyB,YAAY,gBAAgB;AAE3D,UAAM,CAAC,UAAU,IAAI,IAAI,oBAAoB,YAAY;AAGzD,UAAM,EAAE,YAAY,UAAU,IAAI,aAAa;AAAA,MAC7C;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,YAAY,YAAY,qBAAqB;AAEnD,QAAI,iBAAqD;AACzD,QAAI,WAAW;AACb,uBAAiB;AAAA,IACnB,WAAW,CAAC,YAAY,OAAO;AAC7B,uBAAiB;AAAA,IACnB;AAEA,UAAM,iBAAiB,CAAC,MAA2C;AACjE,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,YAAM,WAAW,EAAE,OAAO,gBAAgB,OAAO,EAAE,OAAO;AAC1D,eAAS,QAAQ;AACjB,iBAAW,UAAU,CAAC;AACtB,yBAAmB;AAEnB,UAAI,CAAC,qBAAqB,WAAW;AACnC,kCAA0B;AAAA,UACxB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AAAA,IACF;AAEA,cAAU,MAAM;AACd,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,gBAAgB,UAAU;AAAA,MAC7C;AAAA,IACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAI,oBAAyD;AAC7D,QAAI,UAAU,QAAQ,UAAU,iBAAiB;AAC/C,0BAAoB;AAAA,IACtB,WAAW,aAAa,wBAAwB;AAC9C,0BAAoB;AAAA,IACtB;AAEA,QAAI,kBAAsD;AAC1D,QAAI,WAAW;AACb,wBAAkB;AAAA,IACpB,WAAW,UAAU,OAAO;AAC1B,wBAAkB;AAAA,IACpB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,eAAc;AAAA,QACd,KAAK;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAW;AAAA,gBACT,iBAAiB;AAAA,kBACf,UAAU,OAAO,aAAa,YAAY;AAAA,kBAC1C,UAAU;AAAA,kBACV;AAAA,gBACF,CAAC;AAAA,gBACD,aAAa,EAAE,WAAW,QAAQ,WAAW,OAAO,CAAC;AAAA,cACvD;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT,gBAAgB;AAAA,wBACd,UAAU;AAAA,wBACV,aAAa,CAAC,CAAC;AAAA,wBACf,UAAU;AAAA,wBACV,SAAS,UAAU,QAAQ,UAAU;AAAA,wBACrC;AAAA,sBACF,CAAC;AAAA,sBACD,eAAe;AAAA,wBACb,SAAS;AAAA,wBACT,UAAU;AAAA,wBACV,OAAO;AAAA,sBACT,CAAC;AAAA,sBACD,gBAAgB;AAAA,wBACd,MAAM;AAAA,wBACN,OAAO;AAAA,wBACP;AAAA,sBACF,CAAC;AAAA,oBACH;AAAA,oBAEA;AAAA,0CAAC,kBACC;AAAA,wBAAC;AAAA;AAAA,0BACC;AAAA,0BACA,KAAK;AAAA,0BACL,MAAK;AAAA,0BACL,gBAAc,UAAU,kBAAkB,UAAU;AAAA,0BACpD,iBAAe;AAAA,0BACf,iBAAe;AAAA,0BACf;AAAA,0BACA;AAAA,0BACA,OAAO;AAAA,0BACP;AAAA,0BACA;AAAA,0BACA,SAAS,UAAU;AAAA,0BACnB,UAAU;AAAA,0BACV,QAAQ,CAAC,UAAU;AACjB,6CAAiB,KAAK;AAAA,0BACxB;AAAA,0BACA,WAAW;AAAA,0BACV,GAAI,eAAe,aAAa;AAAA;AAAA,sBACnC,GACF;AAAA,sBACA,oBAAC,SAAI,WAAW,iBACd,8BAAC,mBAAgB,OAAc,GACjC;AAAA;AAAA;AAAA,gBACF;AAAA,gBACC;AAAA;AAAA;AAAA,UACH;AAAA,UACC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,YAAY,UAAU;AAAA,cAC/B,UAAU;AAAA,cACT,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,SAAuD,cACtD;AAOF,MAAM,kBAAkB,KAAK,CAAC,UAA6B;AACzD,UAAQ,MAAM,OAAO;AAAA,IACnB,KAAK;AACH,aAAO,oBAAC,sBAAmB;AAAA,IAC7B,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF,CAAC;",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.sty.js

@@ -1,9 +1,9 @@
 import "../../styles/field.css";
 import "./Checkbox.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checkboxIconCSS = "_qmw7spk-3-0-1";
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-0-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-0-1", false: "_qmw7sp6-3-0-1" }, disabled: { true: "_qmw7sp7-3-0-1", false: "_qmw7sp8-3-0-1" }, hasError: { true: "_qmw7sp9-3-0-1", false: "_qmw7spa-3-0-1" }, checked: { true: "_qmw7spb-3-0-1", false: "_qmw7spc-3-0-1", indeterminate: "_qmw7spd-3-0-1", undefined: "_qmw7spe-3-0-1" }, readOnly: { true: "_qmw7spf-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, hasError: true, checked: false }, "_qmw7spg-3-0-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7sph-3-0-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spi-3-0-1"], [{ disabled: false, hasError: false, checked: false }, "_qmw7spj-3-0-1"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-0-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-0-1" }, required: { true: "_qmw7sp2-3-0-1" }, readOnly: { true: "_qmw7sp3-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = "_qmw7spk-3-1-1";
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-1-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-1-1", false: "_qmw7sp6-3-1-1" }, disabled: { true: "_qmw7sp7-3-1-1", false: "_qmw7sp8-3-1-1" }, hasError: { true: "_qmw7sp9-3-1-1", false: "_qmw7spa-3-1-1" }, checked: { true: "_qmw7spb-3-1-1", false: "_qmw7spc-3-1-1", indeterminate: "_qmw7spd-3-1-1", undefined: "_qmw7spe-3-1-1" }, readOnly: { true: "_qmw7spf-3-1-1" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, hasError: true, checked: false }, "_qmw7spg-3-1-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7sph-3-1-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spi-3-1-1"], [{ disabled: false, hasError: false, checked: false }, "_qmw7spj-3-1-1"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-1-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-1-1" }, required: { true: "_qmw7sp2-3-1-1" }, readOnly: { true: "_qmw7sp3-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

package/esm/forms/checkbox/Checkbox.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = '_qmw7spk-3-0-1';\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-0-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-0-1',false:'_qmw7sp6-3-0-1'},disabled:{true:'_qmw7sp7-3-0-1',false:'_qmw7sp8-3-0-1'},hasError:{true:'_qmw7sp9-3-0-1',false:'_qmw7spa-3-0-1'},checked:{true:'_qmw7spb-3-0-1',false:'_qmw7spc-3-0-1',indeterminate:'_qmw7spd-3-0-1',undefined:'_qmw7spe-3-0-1'},readOnly:{true:'_qmw7spf-3-0-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,hasError:true,checked:false},'_qmw7spg-3-0-1'],[{disabled:true,hasError:false,checked:false},'_qmw7sph-3-0-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spi-3-0-1'],[{disabled:false,hasError:false,checked:false},'_qmw7spj-3-0-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-0-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-0-1'},required:{true:'_qmw7sp2-3-0-1'},readOnly:{true:'_qmw7sp3-3-0-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = '_qmw7spk-3-1-1';\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-1-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-1-1',false:'_qmw7sp6-3-1-1'},disabled:{true:'_qmw7sp7-3-1-1',false:'_qmw7sp8-3-1-1'},hasError:{true:'_qmw7sp9-3-1-1',false:'_qmw7spa-3-1-1'},checked:{true:'_qmw7spb-3-1-1',false:'_qmw7spc-3-1-1',indeterminate:'_qmw7spd-3-1-1',undefined:'_qmw7spe-3-1-1'},readOnly:{true:'_qmw7spf-3-1-1'}},defaultVariants:{},compoundVariants:[[{disabled:true,hasError:true,checked:false},'_qmw7spg-3-1-1'],[{disabled:true,hasError:false,checked:false},'_qmw7sph-3-1-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spi-3-1-1'],[{disabled:false,hasError:false,checked:false},'_qmw7spj-3-1-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-1-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-1-1'},required:{true:'_qmw7sp2-3-1-1'},readOnly:{true:'_qmw7sp3-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,eAAc,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACvrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }