@dynatrace/strato-components 3.11.0 → 3.11.2

package/esm/forms/spin-buttons/SpinButton.sty.js

@@ -1,7 +1,7 @@
 import "./SpinButton.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-11-0", variantClassNames: { error: { true: "_r47o0w2-3-11-0" }, disabled: { true: "_r47o0w3-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-0"]] });
-var spinButtonGroupCSS = "_r47o0w0-3-11-0";
+var spinButtonCSS = _7a468({ defaultClassName: "_r47o0w1-3-11-2", variantClassNames: { error: { true: "_r47o0w2-3-11-2" }, disabled: { true: "_r47o0w3-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ disabled: true, error: true }, "_r47o0w4-3-11-2"]] });
+var spinButtonGroupCSS = "_r47o0w0-3-11-2";
 export {
   spinButtonCSS,
   spinButtonGroupCSS

package/esm/forms/spin-buttons/SpinButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/SpinButton.css.ts"],
-  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-11-0',variantClassNames:{error:{true:'_r47o0w2-3-11-0'},disabled:{true:'_r47o0w3-3-11-0'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-11-0']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-0';"],
+  "sourcesContent": ["import './SpinButton.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var spinButtonCSS = _7a468({defaultClassName:'_r47o0w1-3-11-2',variantClassNames:{error:{true:'_r47o0w2-3-11-2'},disabled:{true:'_r47o0w3-3-11-2'}},defaultVariants:{},compoundVariants:[[{disabled:true,error:true},'_r47o0w4-3-11-2']]});\nexport var spinButtonGroupCSS = '_r47o0w0-3-11-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js

@@ -8,17 +8,17 @@ import {
   useRef,
   useState
 } from "react";
-import { isElement } from "react-is";
+import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
 import { useBeforeInputHandler } from "./hooks/useBeforeInputHandler.js";
 import { useValidationAndFormatting } from "./hooks/useValidationAndFormatting.js";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.js";
 import { mergeProps } from "../../../core/utils/merge-props.js";
 import { useSelection } from "../hooks/useSelection.js";
-import { spinButtonCSS } from "../SpinButton.sty.js";
-import { NUMBER_SPIN_BUTTON_DEFAULTS } from "./constants.js";
 import { useSpinButtonInteraction } from "../hooks/useSpinButtonInteraction.js";
+import { spinButtonCSS } from "../SpinButton.sty.js";
 const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
     disabled = false,
@@ -176,7 +176,7 @@ const NumberSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   );
 });
 function isNumberSpinButton(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === NumberSpinButton;
+  return isSlot(node, NumberSpinButton);
 }
 NumberSpinButton.displayName = "_NumberSpinButton";
 export {

package/esm/forms/spin-buttons/number-spin-button/NumberSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/number-spin-button/NumberSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === NumberSpinButton\n  );\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from './constants.js';\nimport { useBeforeInputHandler } from './hooks/useBeforeInputHandler.js';\nimport { useValidationAndFormatting } from './hooks/useValidationAndFormatting.js';\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { NumberSpinButtonProps, NumberSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Use the NumberSpinButton component to show a number that can be changed using arrow and page keys.\n * @internal\n */\nexport const NumberSpinButton = /* @__PURE__ */ forwardRef<\n  NumberSpinButtonRef,\n  NumberSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    disabled = false,\n    readOnly = false,\n    value: valueProp,\n    placeholder,\n    className: consumerClassName,\n    style: consumerStyle,\n    displayFormat,\n    required,\n    'data-testid': dataTestId,\n    onChange,\n    defaultValue = NUMBER_SPIN_BUTTON_DEFAULTS.VALUE,\n    minValue,\n    maxValue,\n    hasError,\n    onKeyDownHandler: propKeyDownHandler,\n    isCyclic = false,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: NumberSpinButtonProps = props;\n\n  const [behavioralTrackingProps, remainingPropsWithoutTracking] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [text, setText] = useState('');\n  const [value, setValue] = useState(defaultValue);\n  const [error, setError] = useState(false);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n  const { validate, format, parse } = useValidationAndFormatting(\n    displayFormat,\n    required,\n    minValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n    maxValue ?? NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n  );\n\n  const applyText = useCallback(\n    (input: string, fireOnChange: boolean | undefined = false) => {\n      const newValue = parse(input);\n      setText(input);\n      setValue(newValue);\n\n      if (rootRef?.current) {\n        rootRef.current.textContent = format(input);\n      }\n      fireOnChange && onChange?.(newValue);\n    },\n    [format, onChange, parse, setValue],\n  );\n\n  // Callback to clear the inner component state and a given dom element if provided.\n  const clearValue = useCallback(\n    (element: HTMLSpanElement | null, fireOnChange = false) => {\n      setValue(null);\n      setText('');\n      if (element) {\n        element.textContent = '';\n      }\n      fireOnChange && onChange?.(null);\n    },\n    [onChange, setValue],\n  );\n\n  const beforeInputHandler = useBeforeInputHandler(\n    rootRef,\n    props,\n    applyText,\n    text,\n  );\n  const { onKeyDownHandler } = useValueNavigation(\n    rootRef,\n    {\n      value: valueProp ?? value,\n      disabled,\n      readOnly,\n      onChange,\n      displayFormat,\n      required,\n      minValue,\n      maxValue,\n      isCyclic,\n      ...remainingPropsWithoutTracking,\n    },\n    applyText,\n  );\n\n  // Provide root element reference and functions\n  useImperativeHandle(\n    forwardedRef,\n    (): NumberSpinButtonRef => ({\n      type: 'number' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      applyText: (input: string, fireOnChange) =>\n        applyText(input, fireOnChange),\n      clearValue: (fireOnChange) => clearValue(rootRef.current, fireOnChange),\n    }),\n    [setSelection, getSelection, selectAll, deselectAll, clearValue, applyText],\n  );\n\n  // Set error state on value change\n  useEffect(() => {\n    const isValid = validate(value);\n    setError(!isValid);\n  }, [setError, validate, value]);\n\n  // Set initial value on first render\n  useEffect(() => {\n    applyText(\n      defaultValue === null ||\n        defaultValue === undefined ||\n        Number.isNaN(defaultValue)\n        ? ''\n        : defaultValue.toString(),\n    );\n    // Only apply default value when component is mounted. Ignore subsequent defaultValue state updates.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [format]);\n\n  // Register native beforeInput event handler. The syntethic event is not sufficient for the required features.\n  useEffect(() => {\n    const element = rootRef.current;\n    element?.addEventListener('beforeinput', beforeInputHandler);\n    return () =>\n      element?.removeEventListener('beforeinput', beforeInputHandler);\n  }, [beforeInputHandler]);\n\n  // Handle internal state update if component is in controlled mode\n  useEffect(() => {\n    // No value prop. provided ==> component is uncontrolled\n    if (valueProp === undefined) {\n      return;\n    }\n\n    // Update internal state\n    const sel = getSelection();\n    if (valueProp !== value) {\n      applyText(\n        valueProp !== null && Number.isInteger(valueProp)\n          ? valueProp.toString()\n          : '',\n      );\n    }\n\n    // Only restore the selection for the spinbutton currently focused\n    document.activeElement === rootRef.current && sel && setSelection(sel);\n  }, [valueProp, applyText, format, getSelection, setSelection]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder ?? ''}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...mergeProps(ariaProps, behavioralTrackingProps)}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      role=\"spinbutton\"\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={propKeyDownHandler ?? onKeyDownHandler}\n      data-pattern={dataPattern}\n    />\n  );\n});\n\n/**\n * Allows to check if a ReactNode is a NumberSpinButton element.\n * @internal\n */\nexport function isNumberSpinButton(\n  node: ReactNode,\n): node is ReactElement<NumberSpinButtonProps> {\n  return isSlot(node, NumberSpinButton);\n}\n\n(\n  NumberSpinButton as typeof NumberSpinButton & { displayName: string }\n).displayName = '_NumberSpinButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { isElement } from "react-is";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.js";
 function isSpinButtonGroupSeparator(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === SpinButtonGroupSeparator;
+  return isSlot(node, SpinButtonGroupSeparator);
 }
 const SpinButtonGroupSeparator = ({
   children,

package/esm/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/spin-button-group/SpinButtonGroupSeparator.tsx"],
-  "sourcesContent": ["import {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport type { SpinButtonGroupSeparatorProps } from './types.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\n\n/**\n * Allows to check if a ReactNode is a SpinButtonGroupSeparator element.\n * @internal\n */\nexport function isSpinButtonGroupSeparator(\n  node: ReactNode,\n): node is ReactElement<SpinButtonGroupSeparatorProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === SpinButtonGroupSeparator\n  );\n}\n\n/**\n * Used to define a trigger between spinbuttons. e.g. the colon within a time value 12:34.\n */\nexport const SpinButtonGroupSeparator = ({\n  children,\n  trigger,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  ...remainingProps\n}: PropsWithChildren<SpinButtonGroupSeparatorProps>) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  return (\n    <span\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {children ?? trigger}\n    </span>\n  );\n};\n"],
-  "mappings": "AAsCI;AAjCJ,SAAS,iBAAiB;AAG1B,SAAS,kCAAkC;AAMpC,SAAS,2BACd,MACqD;AACrD,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAKO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import {\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport type { SpinButtonGroupSeparatorProps } from './types.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\n\n/**\n * Allows to check if a ReactNode is a SpinButtonGroupSeparator element.\n * @internal\n */\nexport function isSpinButtonGroupSeparator(\n  node: ReactNode,\n): node is ReactElement<SpinButtonGroupSeparatorProps> {\n  return isSlot(node, SpinButtonGroupSeparator);\n}\n\n/**\n * Used to define a trigger between spinbuttons. e.g. the colon within a time value 12:34.\n */\nexport const SpinButtonGroupSeparator = ({\n  children,\n  trigger,\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  ...remainingProps\n}: PropsWithChildren<SpinButtonGroupSeparatorProps>) => {\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  return (\n    <span\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      {...behavioralTrackingProps}\n    >\n      {children ?? trigger}\n    </span>\n  );\n};\n"],
+  "mappings": "AAiCI;AA1BJ,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AAMhB,SAAS,2BACd,MACqD;AACrD,SAAO,OAAO,MAAM,wBAAwB;AAC9C;AAKO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,eAAe;AAAA,EACf,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

package/esm/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.js

@@ -95,8 +95,15 @@ function useValueOverflow(children, valueOverflow, onTrailingOverflow, onTrailin
   const triggerRefs = useRef([]);
   function linkRefAndRemember(child, index, handler) {
     spinButtonRefs.current[index] = handler;
-    const { ref } = isValidElement(child) ? child.props : {};
-    ref?.(handler);
+    const { ref } = child;
+    if (ref === void 0 || ref === null) {
+      return;
+    }
+    if (typeof ref === "function") {
+      ref(handler);
+    } else {
+      ref.current = handler;
+    }
   }
   const clonedChildren = useMemo(
     () => Children.map(children, (child, index) => {

package/esm/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/spin-button-group/hooks/useValueOverflow.tsx"],
-  "sourcesContent": ["import {\n  useMemo,\n  useRef,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../../number-spin-button/constants.js';\nimport { isNumberSpinButton } from '../../number-spin-button/NumberSpinButton.js';\nimport {\n  NumberSpinButtonProps,\n  NumberSpinButtonRef,\n} from '../../number-spin-button/types.js';\nimport { isTextSpinButton } from '../../text-spin-button/TextSpinButton.js';\nimport {\n  TextSpinButtonProps,\n  TextSpinButtonRef,\n} from '../../text-spin-button/types.js';\nimport { isSpinButtonGroupSeparator } from '../SpinButtonGroupSeparator.js';\nimport type {\n  SpinButtonGroupSeparatorProps,\n  SpinButtonHandler,\n} from '../types.js';\n\n/**\n * Handles number spin-button overflow and auto-advance behavior within a group.\n * Applies impossible/complete value focus shifts and forwards trailing overflow when no next target exists.\n */\nfunction handleValueOverflow({\n  candidate,\n  event,\n  index,\n  maxValue,\n  valueOverflow,\n  spinButtonRefs,\n  onTrailingOverflow,\n  onTrailingEdge,\n}: {\n  candidate: string;\n  event: InputEvent;\n  index: number;\n  maxValue: number;\n  valueOverflow: boolean;\n  spinButtonRefs: { current: SpinButtonHandler[] };\n  onTrailingOverflow?: (overflowChar: string) => void;\n  onTrailingEdge?: () => void;\n}) {\n  // Search for the next configured spinbutton within the group.\n  const nextSpinButton = spinButtonRefs.current.find(\n    (handler, i) => handler && i > index,\n  );\n\n  if (!valueOverflow || candidate === '') {\n    return;\n  }\n\n  // Shared derived values used across all cases below.\n  const currentHandler = spinButtonRefs.current[index] as\n    | NumberSpinButtonRef\n    | undefined;\n  if (!currentHandler) {\n    return;\n  }\n\n  const currentText = currentHandler?.element?.current?.textContent ?? '';\n  const sel = currentHandler?.getSelection();\n  const maxNrOfDigits = maxValue.toString().length;\n  const overflowChar = candidate.substring(candidate.length - 1);\n  const overflowDigit = parseInt(overflowChar);\n  const isNumericOverflow = Number.isInteger(overflowDigit);\n  const isCandidateNumeric = /^\\d+$/.test(candidate);\n  const candidateValue = parseInt(candidate, 10);\n\n  const hasNextInGroup = nextSpinButton !== undefined;\n  const canAdvanceOutOfGroup =\n    nextSpinButton === undefined && onTrailingEdge !== undefined;\n  const isReplacingWholeValue =\n    sel !== undefined && sel.start === 0 && sel.end === currentText.length;\n\n  // Auto-advance: impossible first digit.\n  // Keep the digit in current and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    maxNrOfDigits >= 2 &&\n    candidate.length === 1 &&\n    candidateValue > Math.floor(maxValue / 10) &&\n    (currentText === '' || isReplacingWholeValue) &&\n    (hasNextInGroup || canAdvanceOutOfGroup)\n  ) {\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n\n    if (hasNextInGroup) {\n      nextSpinButton.element.current?.focus();\n    } else {\n      onTrailingEdge?.();\n    }\n    return;\n  }\n\n  // Auto-advance: complete value.\n  // Commit current value and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue <= maxValue\n  ) {\n    const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== undefined;\n\n    if (hasNextInGroup || hasCrossGroupEdge) {\n      // Commit the complete value manually so we can preventDefault.\n      currentHandler?.applyText(candidate, true);\n      event.preventDefault();\n      if (hasNextInGroup) {\n        nextSpinButton.element.current?.focus();\n      } else {\n        onTrailingEdge?.();\n      }\n      return;\n    }\n\n    // Last spinbutton with no advance target: commit and select all so the\n    // field remains interactive \u2014 the next keystroke replaces the value.\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n    currentHandler.selectAll();\n    return;\n  }\n\n  // Auto-advance: value overflow \u2014 candidate fills max digits but exceeds maxValue.\n  // Forward the overflow char to the next spinbutton without committing the invalid candidate.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue > maxValue &&\n    hasNextInGroup\n  ) {\n    event.preventDefault();\n    if (nextSpinButton.type === 'number') {\n      nextSpinButton.applyText(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n      nextSpinButton.setSelection({ start: 0, end: 0, rtl: true });\n    } else {\n      nextSpinButton.searchValue(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n    }\n    return;\n  }\n\n  if (!hasNextInGroup && onTrailingOverflow) {\n    // No next spin button in this group - check if overflow would\n    // occur and forward the overflow character to the external handler.\n    if (!isNumericOverflow || !isCandidateNumeric) {\n      return;\n    }\n    // Nothing to do if the candidate value fits within the current spin button.\n    if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {\n      return;\n    }\n    event.preventDefault();\n    onTrailingOverflow(overflowChar);\n  }\n}\n\n/**\n * Hook to provide ootb value overflow behavior for spinbuttons within the group.\n * To achieve this, the provided children needs to be cloned to get access to the imperative handlers.\n * In addition to the spin button handlers, it provides an array of trigger refs.\n */\nexport function useValueOverflow(\n  children: ReactNode,\n  valueOverflow: boolean,\n  onTrailingOverflow?: (overflowChar: string) => void,\n  onTrailingEdge?: () => void,\n) {\n  const spinButtonRefs = useRef<SpinButtonHandler[]>([]);\n  const triggerRefs = useRef<string[]>([]);\n\n  function linkRefAndRemember<T extends SpinButtonHandler>(\n    child: ReactNode,\n    index: number,\n    handler: T,\n  ) {\n    spinButtonRefs.current[index] = handler;\n    const { ref } = (isValidElement(child) ? child.props : {}) as {\n      ref?: (h: T) => void;\n    };\n    ref?.(handler);\n  }\n\n  // Cloned children with extended ootb functionality\n  const clonedChildren = useMemo(\n    () =>\n      Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        if (isNumberSpinButton(child)) {\n          return cloneElement<\n            NumberSpinButtonProps & {\n              ref?: (handler: NumberSpinButtonRef) => void;\n            }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: NumberSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n              onBeforeInput: (candidate, event) => {\n                const {\n                  maxValue = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n                  onBeforeInput,\n                } = child.props as NumberSpinButtonProps;\n\n                // Call an external handler if one is set, exit early if necessary.\n                onBeforeInput?.(candidate, event);\n                if (event.defaultPrevented) {\n                  return;\n                }\n\n                handleValueOverflow({\n                  candidate,\n                  event,\n                  index,\n                  maxValue,\n                  valueOverflow,\n                  spinButtonRefs,\n                  onTrailingOverflow,\n                  onTrailingEdge,\n                });\n              },\n            },\n            children,\n          );\n        } else if (isTextSpinButton(child)) {\n          return cloneElement<\n            TextSpinButtonProps & { ref?: (handler: TextSpinButtonRef) => void }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: TextSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n            },\n            children,\n          );\n        } else if (isSpinButtonGroupSeparator(child)) {\n          // Remember the trigger key for the current child index\n          triggerRefs.current[index] = (\n            child.props as SpinButtonGroupSeparatorProps\n          ).trigger;\n          return child;\n        }\n\n        return child;\n      }),\n    [children, valueOverflow, onTrailingOverflow, onTrailingEdge],\n  );\n\n  return {\n    clonedChildren,\n    spinButtonRefs,\n    triggerRefs,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useMemo,\n  useRef,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../../number-spin-button/constants.js';\nimport { isNumberSpinButton } from '../../number-spin-button/NumberSpinButton.js';\nimport {\n  NumberSpinButtonProps,\n  NumberSpinButtonRef,\n} from '../../number-spin-button/types.js';\nimport { isTextSpinButton } from '../../text-spin-button/TextSpinButton.js';\nimport {\n  TextSpinButtonProps,\n  TextSpinButtonRef,\n} from '../../text-spin-button/types.js';\nimport { isSpinButtonGroupSeparator } from '../SpinButtonGroupSeparator.js';\nimport type {\n  ChildWithRef,\n  SpinButtonGroupSeparatorProps,\n  SpinButtonHandler,\n} from '../types.js';\n\n/**\n * Handles number spin-button overflow and auto-advance behavior within a group.\n * Applies impossible/complete value focus shifts and forwards trailing overflow when no next target exists.\n */\nfunction handleValueOverflow({\n  candidate,\n  event,\n  index,\n  maxValue,\n  valueOverflow,\n  spinButtonRefs,\n  onTrailingOverflow,\n  onTrailingEdge,\n}: {\n  candidate: string;\n  event: InputEvent;\n  index: number;\n  maxValue: number;\n  valueOverflow: boolean;\n  spinButtonRefs: { current: SpinButtonHandler[] };\n  onTrailingOverflow?: (overflowChar: string) => void;\n  onTrailingEdge?: () => void;\n}) {\n  // Search for the next configured spinbutton within the group.\n  const nextSpinButton = spinButtonRefs.current.find(\n    (handler, i) => handler && i > index,\n  );\n\n  if (!valueOverflow || candidate === '') {\n    return;\n  }\n\n  // Shared derived values used across all cases below.\n  const currentHandler = spinButtonRefs.current[index] as\n    | NumberSpinButtonRef\n    | undefined;\n  if (!currentHandler) {\n    return;\n  }\n\n  const currentText = currentHandler?.element?.current?.textContent ?? '';\n  const sel = currentHandler?.getSelection();\n  const maxNrOfDigits = maxValue.toString().length;\n  const overflowChar = candidate.substring(candidate.length - 1);\n  const overflowDigit = parseInt(overflowChar);\n  const isNumericOverflow = Number.isInteger(overflowDigit);\n  const isCandidateNumeric = /^\\d+$/.test(candidate);\n  const candidateValue = parseInt(candidate, 10);\n\n  const hasNextInGroup = nextSpinButton !== undefined;\n  const canAdvanceOutOfGroup =\n    nextSpinButton === undefined && onTrailingEdge !== undefined;\n  const isReplacingWholeValue =\n    sel !== undefined && sel.start === 0 && sel.end === currentText.length;\n\n  // Auto-advance: impossible first digit.\n  // Keep the digit in current and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    maxNrOfDigits >= 2 &&\n    candidate.length === 1 &&\n    candidateValue > Math.floor(maxValue / 10) &&\n    (currentText === '' || isReplacingWholeValue) &&\n    (hasNextInGroup || canAdvanceOutOfGroup)\n  ) {\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n\n    if (hasNextInGroup) {\n      nextSpinButton.element.current?.focus();\n    } else {\n      onTrailingEdge?.();\n    }\n    return;\n  }\n\n  // Auto-advance: complete value.\n  // Commit current value and move focus to the next spinbutton.\n  if (\n    isCandidateNumeric &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue <= maxValue\n  ) {\n    const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== undefined;\n\n    if (hasNextInGroup || hasCrossGroupEdge) {\n      // Commit the complete value manually so we can preventDefault.\n      currentHandler?.applyText(candidate, true);\n      event.preventDefault();\n      if (hasNextInGroup) {\n        nextSpinButton.element.current?.focus();\n      } else {\n        onTrailingEdge?.();\n      }\n      return;\n    }\n\n    // Last spinbutton with no advance target: commit and select all so the\n    // field remains interactive \u2014 the next keystroke replaces the value.\n    currentHandler.applyText(candidate, true);\n    event.preventDefault();\n    currentHandler.selectAll();\n    return;\n  }\n\n  // Auto-advance: value overflow \u2014 candidate fills max digits but exceeds maxValue.\n  // Forward the overflow char to the next spinbutton without committing the invalid candidate.\n  if (\n    isCandidateNumeric &&\n    isNumericOverflow &&\n    candidate.length === maxNrOfDigits &&\n    candidateValue > maxValue &&\n    hasNextInGroup\n  ) {\n    event.preventDefault();\n    if (nextSpinButton.type === 'number') {\n      nextSpinButton.applyText(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n      nextSpinButton.setSelection({ start: 0, end: 0, rtl: true });\n    } else {\n      nextSpinButton.searchValue(overflowChar, true);\n      nextSpinButton.element.current?.focus();\n    }\n    return;\n  }\n\n  if (!hasNextInGroup && onTrailingOverflow) {\n    // No next spin button in this group - check if overflow would\n    // occur and forward the overflow character to the external handler.\n    if (!isNumericOverflow || !isCandidateNumeric) {\n      return;\n    }\n    // Nothing to do if the candidate value fits within the current spin button.\n    if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {\n      return;\n    }\n    event.preventDefault();\n    onTrailingOverflow(overflowChar);\n  }\n}\n\n/**\n * Hook to provide ootb value overflow behavior for spinbuttons within the group.\n * To achieve this, the provided children needs to be cloned to get access to the imperative handlers.\n * In addition to the spin button handlers, it provides an array of trigger refs.\n */\nexport function useValueOverflow(\n  children: ReactNode,\n  valueOverflow: boolean,\n  onTrailingOverflow?: (overflowChar: string) => void,\n  onTrailingEdge?: () => void,\n) {\n  const spinButtonRefs = useRef<SpinButtonHandler[]>([]);\n  const triggerRefs = useRef<string[]>([]);\n\n  // Extract, store and link potential external ref to the current ref.\n  function linkRefAndRemember<T extends SpinButtonHandler>(\n    child: ReactNode,\n    index: number,\n    handler: T,\n  ) {\n    // Remember component handler for ffu.\n    spinButtonRefs.current[index] = handler;\n    const { ref } = child as ChildWithRef<T>;\n    // Nothing else to do if no external ref was passed.\n    if (ref === undefined || ref === null) {\n      return;\n    }\n\n    // Execute callback ref or forward handler to external ref.\n    if (typeof ref === 'function') {\n      ref(handler);\n    } else {\n      ref.current = handler;\n    }\n  }\n\n  // Cloned children with extended ootb functionality\n  const clonedChildren = useMemo(\n    () =>\n      Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        if (isNumberSpinButton(child)) {\n          return cloneElement<\n            NumberSpinButtonProps & {\n              ref?: (handler: NumberSpinButtonRef) => void;\n            }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: NumberSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n              onBeforeInput: (candidate, event) => {\n                const {\n                  maxValue = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n                  onBeforeInput,\n                } = child.props as NumberSpinButtonProps;\n\n                // Call an external handler if one is set, exit early if necessary.\n                onBeforeInput?.(candidate, event);\n                if (event.defaultPrevented) {\n                  return;\n                }\n\n                handleValueOverflow({\n                  candidate,\n                  event,\n                  index,\n                  maxValue,\n                  valueOverflow,\n                  spinButtonRefs,\n                  onTrailingOverflow,\n                  onTrailingEdge,\n                });\n              },\n            },\n            children,\n          );\n        } else if (isTextSpinButton(child)) {\n          return cloneElement<\n            TextSpinButtonProps & { ref?: (handler: TextSpinButtonRef) => void }\n          >(\n            child,\n            {\n              ...child.props,\n              ref: (handler: TextSpinButtonRef) =>\n                linkRefAndRemember(child, index, handler),\n            },\n            children,\n          );\n        } else if (isSpinButtonGroupSeparator(child)) {\n          // Remember the trigger key for the current child index\n          triggerRefs.current[index] = (\n            child.props as SpinButtonGroupSeparatorProps\n          ).trigger;\n          return child;\n        }\n\n        return child;\n      }),\n    [children, valueOverflow, onTrailingOverflow, onTrailingEdge],\n  );\n\n  return {\n    clonedChildren,\n    spinButtonRefs,\n    triggerRefs,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/spin-buttons/text-spin-button/TextSpinButton.js

@@ -7,15 +7,15 @@ import {
   useRef,
   useState
 } from "react";
-import { isElement } from "react-is";
 import { useValueNavigation } from "./hooks/useValueNavigation.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
+import { isSlot } from "../../../core/utils/is-slot.js";
 import { useSelection } from "../hooks/useSelection.js";
 import { useSpinButtonInteraction } from "../hooks/useSpinButtonInteraction.js";
 import { spinButtonCSS } from "../SpinButton.sty.js";
 function isTextSpinButton(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === TextSpinButton;
+  return isSlot(node, TextSpinButton);
 }
 const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
@@ -39,31 +39,27 @@ const TextSpinButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const { getSelection, setSelection, selectAll, deselectAll } = useSelection(rootRef);
   const [error, setError] = useState(false);
   const { value, onKeyDownHandler, searchValue, clearValue } = useValueNavigation(props);
-  useImperativeHandle(
-    forwardedRef,
-    () => {
-      return {
-        type: "text",
-        element: rootRef,
-        setSelection,
-        getSelection,
-        selectAll,
-        deselectAll,
-        searchValue,
-        clearValue,
-        onChange
-      };
-    },
-    [
-      clearValue,
-      deselectAll,
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      type: "text",
+      element: rootRef,
+      setSelection,
       getSelection,
-      onChange,
-      searchValue,
       selectAll,
-      setSelection
-    ]
-  );
+      deselectAll,
+      searchValue,
+      clearValue,
+      onChange
+    };
+  }, [
+    clearValue,
+    deselectAll,
+    getSelection,
+    onChange,
+    searchValue,
+    selectAll,
+    setSelection
+  ]);
   useEffect(() => {
     if (!rootRef.current) {
       return;

package/esm/forms/spin-buttons/text-spin-button/TextSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/spin-buttons/text-spin-button/TextSpinButton.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === TextSpinButton\n  );\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(\n    forwardedRef,\n    (): TextSpinButtonRef => {\n      return {\n        type: 'text' as const,\n        element: rootRef,\n        setSelection,\n        getSelection,\n        selectAll,\n        deselectAll,\n        searchValue,\n        clearValue,\n        onChange,\n      };\n    },\n    [\n      clearValue,\n      deselectAll,\n      getSelection,\n      onChange,\n      searchValue,\n      selectAll,\n      setSelection,\n    ],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n      data-pattern={dataPattern}\n      {...behavioralTrackingProps}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { useValueNavigation } from './hooks/useValueNavigation.js';\nimport type { TextSpinButtonProps, TextSpinButtonRef } from './types.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { useSelection } from '../hooks/useSelection.js';\nimport { useSpinButtonInteraction } from '../hooks/useSpinButtonInteraction.js';\nimport { spinButtonCSS } from '../SpinButton.sty.js';\n\n/**\n * Allows to check if a ReactNode is a TextSpinButton element.\n * @internal\n */\nexport function isTextSpinButton(\n  node: ReactNode,\n): node is ReactElement<TextSpinButtonProps> {\n  return isSlot(node, TextSpinButton);\n}\n\n/**\n * Use the _TextSpinButton component to pick a text from a list of given text values.\n * @internal\n */\nexport const TextSpinButton = /* @__PURE__ */ forwardRef<\n  TextSpinButtonRef,\n  TextSpinButtonProps\n>((props, forwardedRef) => {\n  const {\n    placeholder,\n    disabled = false,\n    readOnly = false,\n    options,\n    required = false,\n    hasError,\n    className: consumerClassName,\n    style: consumerStyle,\n    onKeyDownHandler: propOnKeyDownHandler,\n    'data-testid': dataTestId,\n    onChange,\n    'data-pattern': dataPattern,\n    ...remainingProps\n  }: TextSpinButtonProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const ariaProps = useAriaLabelingProps(props);\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const { getSelection, setSelection, selectAll, deselectAll } =\n    useSelection(rootRef);\n\n  const [error, setError] = useState(false);\n\n  const { value, onKeyDownHandler, searchValue, clearValue } =\n    useValueNavigation(props);\n\n  // provide root element reference and utility\n  useImperativeHandle(forwardedRef, (): TextSpinButtonRef => {\n    return {\n      type: 'text' as const,\n      element: rootRef,\n      setSelection,\n      getSelection,\n      selectAll,\n      deselectAll,\n      searchValue,\n      clearValue,\n      onChange,\n    };\n  }, [\n    clearValue,\n    deselectAll,\n    getSelection,\n    onChange,\n    searchValue,\n    selectAll,\n    setSelection,\n  ]);\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    rootRef.current.textContent = value ?? '';\n    document.activeElement === rootRef.current && selectAll();\n    // no need to trigger on selectAll update, only trigger on value change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  // set error state on value change\n  useEffect(() => {\n    if (required && value === null) {\n      setError(true);\n    } else {\n      setError(value !== null && !options.includes(value));\n    }\n  }, [required, value, options]);\n\n  const { onClick, onFocus, onBlur } = useSpinButtonInteraction({\n    disabled,\n    selectAll,\n    deselectAll,\n    rootElement: rootRef.current,\n  });\n\n  return (\n    <span\n      data-testid={dataTestId}\n      contentEditable={\n        // contentEditable when focused and non-editable when blurred, allowing text selection.\n        !disabled && !readOnly ? true : undefined\n      }\n      ref={rootRef}\n      tabIndex={disabled ? undefined : 0}\n      role=\"spinbutton\"\n      spellCheck={false}\n      className={clsx(\n        consumerClassName,\n        spinButtonCSS({ disabled, error: hasError ?? error }),\n      )}\n      style={\n        {\n          '--data-placeholder': `\"${placeholder}\"`,\n          ...consumerStyle,\n        } as CSSProperties\n      }\n      aria-disabled={disabled}\n      {...ariaProps}\n      aria-label={ariaProps['aria-label'] ?? placeholder}\n      onKeyDown={propOnKeyDownHandler ?? onKeyDownHandler}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onBeforeInput={(e) => e.preventDefault()}\n      onPaste={(e) => e.preventDefault()}\n      onDrop={(e) => e.preventDefault()}\n      onCut={(e) => e.preventDefault()}\n      data-pattern={dataPattern}\n      {...behavioralTrackingProps}\n    />\n  );\n});\n\n(\n  TextSpinButton as typeof TextSpinButton & { displayName: string }\n).displayName = '_TextSpinButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-11-0 {
+._1tkc5xf0-3-11-2 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-11-0 {
+._1tkc5xf1-3-11-2 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-11-0 {
+._1tkc5xf2-3-11-2 {
   cursor: default;
 }
-._1tkc5xf3-3-11-0 {
+._1tkc5xf3-3-11-2 {
   font-size: var(--dt-typography-text-base-default-size, 14px);
   overflow-wrap: anywhere;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._1tkc5xf4-3-11-0 {
+._1tkc5xf4-3-11-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-11-0 {
+._1tkc5xf5-3-11-2 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-11-0:after {
+._1tkc5xf6-3-11-2:after {
   content: "*";
 }
-._1tkc5xf7-3-11-0 {
+._1tkc5xf7-3-11-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-11-0 {
-  --_1tkc5xfa-3-11-0: var(--_bx32h1-3-11-0);
+._1tkc5xfb-3-11-2 {
+  --_1tkc5xfa-3-11-2: var(--_bx32h1-3-11-2);
   display: flex;
   align-items: center;
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._1tkc5xfc-3-11-0 {
-  --_1tkc5xf8-3-11-0: 1;
-  --_1tkc5xf9-3-11-0: 0;
+._1tkc5xfc-3-11-2 {
+  --_1tkc5xf8-3-11-2: 1;
+  --_1tkc5xf9-3-11-2: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-11-0 {
-  --_1tkc5xf8-3-11-0: 0;
-  --_1tkc5xf9-3-11-0: 1;
+._1tkc5xfd-3-11-2 {
+  --_1tkc5xf8-3-11-2: 0;
+  --_1tkc5xf9-3-11-2: 1;
   transform: unset;
 }
-._1tkc5xfe-3-11-0 {
-  --_1tkc5xfa-3-11-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-11-2 {
+  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-11-0 {
-  --_1tkc5xfa-3-11-0: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-11-2 {
+  --_1tkc5xfa-3-11-2: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-11-0 > svg {
+._1tkc5xfb-3-11-2 > svg {
   transition-duration: var(--dt-animations-move-duration-fast, 150ms);
   transition-timing-function: var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-delay: var(--dt-timings-offset-medium, 30ms);
   transition-property: opacity;
 }
-._1tkc5xfb-3-11-0 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-11-0);
-  color: var(--_1tkc5xfa-3-11-0);
+._1tkc5xfb-3-11-2 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-11-2);
+  color: var(--_1tkc5xfa-3-11-2);
 }
-._1tkc5xfb-3-11-0 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-11-0);
-  color: var(--_1tkc5xfa-3-11-0);
+._1tkc5xfb-3-11-2 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-11-2);
+  color: var(--_1tkc5xfa-3-11-2);
 }
-._1tkc5xfh-3-11-0 {
+._1tkc5xfh-3-11-2 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -79,27 +79,27 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-11-0);
+  background-color: var(--_bx32h3-3-11-2);
 }
-._1tkc5xfr-3-11-0 {
+._1tkc5xfr-3-11-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-11-0 {
+._1tkc5xfs-3-11-2 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-11-0 {
+._1tkc5xft-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._1tkc5xfu-3-11-0 {
+._1tkc5xfu-3-11-2 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1tkc5xfv-3-11-0 {
+._1tkc5xfv-3-11-2 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfw-3-11-0 {
+._1tkc5xfw-3-11-2 {
   transition-property: background-color;
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-fast, 150ms);
@@ -110,5 +110,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_1tkc5xfa-3-11-0);
+  background-color: var(--_1tkc5xfa-3-11-2);
 }

package/esm/forms/switch/Switch.sty.js

@@ -2,11 +2,11 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-0", false: "_1tkc5xfd-3-11-0" }, readOnly: { true: "_1tkc5xfe-3-11-0" }, hasError: { true: "_1tkc5xff-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-0"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-0" }, readOnly: { true: "_1tkc5xf2-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-0", false: "_1tkc5xf5-3-11-0" }, required: { true: "_1tkc5xf6-3-11-0" }, readOnly: { true: "_1tkc5xf7-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-11-0";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-0", false: "_1tkc5xfj-3-11-0" }, hasError: { true: "_1tkc5xfk-3-11-0", false: "_1tkc5xfl-3-11-0" }, color: { primary: "_1tkc5xfm-3-11-0", neutral: "_1tkc5xfn-3-11-0" }, isFocusVisible: { true: "_1tkc5xfo-3-11-0", false: "_1tkc5xfp-3-11-0" }, readOnly: { true: "_1tkc5xfq-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-0"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-11-2", variantClassNames: { selected: { true: "_1tkc5xfc-3-11-2", false: "_1tkc5xfd-3-11-2" }, readOnly: { true: "_1tkc5xfe-3-11-2" }, hasError: { true: "_1tkc5xff-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-11-2"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf1-3-11-2" }, readOnly: { true: "_1tkc5xf2-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xf4-3-11-2", false: "_1tkc5xf5-3-11-2" }, required: { true: "_1tkc5xf6-3-11-2" }, readOnly: { true: "_1tkc5xf7-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-11-2";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-11-2", variantClassNames: { disabled: { true: "_1tkc5xfi-3-11-2", false: "_1tkc5xfj-3-11-2" }, hasError: { true: "_1tkc5xfk-3-11-2", false: "_1tkc5xfl-3-11-2" }, color: { primary: "_1tkc5xfm-3-11-2", neutral: "_1tkc5xfn-3-11-2" }, isFocusVisible: { true: "_1tkc5xfo-3-11-2", false: "_1tkc5xfp-3-11-2" }, readOnly: { true: "_1tkc5xfq-3-11-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-11-2"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-11-2"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-11-2"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-11-2"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-11-2"]] });
 export {
   switchIconCSS,
   switchLabelCSS,

package/esm/forms/switch/Switch.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-0',false:'_1tkc5xfd-3-11-0'},readOnly:{true:'_1tkc5xfe-3-11-0'},hasError:{true:'_1tkc5xff-3-11-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-0'},readOnly:{true:'_1tkc5xf2-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-0',false:'_1tkc5xf5-3-11-0'},required:{true:'_1tkc5xf6-3-11-0'},readOnly:{true:'_1tkc5xf7-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-0',false:'_1tkc5xfj-3-11-0'},hasError:{true:'_1tkc5xfk-3-11-0',false:'_1tkc5xfl-3-11-0'},color:{primary:'_1tkc5xfm-3-11-0',neutral:'_1tkc5xfn-3-11-0'},isFocusVisible:{true:'_1tkc5xfo-3-11-0',false:'_1tkc5xfp-3-11-0'},readOnly:{true:'_1tkc5xfq-3-11-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-0']]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfb-3-11-2',variantClassNames:{selected:{true:'_1tkc5xfc-3-11-2',false:'_1tkc5xfd-3-11-2'},readOnly:{true:'_1tkc5xfe-3-11-2'},hasError:{true:'_1tkc5xff-3-11-2'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-11-2']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf1-3-11-2'},readOnly:{true:'_1tkc5xf2-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xf4-3-11-2',false:'_1tkc5xf5-3-11-2'},required:{true:'_1tkc5xf6-3-11-2'},readOnly:{true:'_1tkc5xf7-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-11-2';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-11-2',variantClassNames:{disabled:{true:'_1tkc5xfi-3-11-2',false:'_1tkc5xfj-3-11-2'},hasError:{true:'_1tkc5xfk-3-11-2',false:'_1tkc5xfl-3-11-2'},color:{primary:'_1tkc5xfm-3-11-2',neutral:'_1tkc5xfn-3-11-2'},isFocusVisible:{true:'_1tkc5xfo-3-11-2',false:'_1tkc5xfp-3-11-2'},readOnly:{true:'_1tkc5xfq-3-11-2'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-11-2'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-11-2'],[{color:'neutral',disabled:true},'_1tkc5xft-3-11-2'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-11-2'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-11-2']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AAC/S,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClM,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,mBAAkB,GAAE,gBAAe,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;",
   "names": []
 }