@dynatrace/strato-components 3.6.0 → 3.7.1

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  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 candidateValue = parseInt(candidate);\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    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 (candidate.length === maxNrOfDigits && candidateValue <= maxValue) {\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    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) {\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\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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",
+  "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\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/switch/Switch.css

@@ -1,70 +1,70 @@
-._1tkc5xf0-3-6-0 {
+._1tkc5xf0-3-7-1 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-6-0 {
+._1tkc5xf1-3-7-1 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-6-0 {
+._1tkc5xf2-3-7-1 {
   cursor: default;
 }
-._1tkc5xf3-3-6-0 {
+._1tkc5xf3-3-7-1 {
   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-6-0 {
+._1tkc5xf4-3-7-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-6-0 {
+._1tkc5xf5-3-7-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-6-0:after {
+._1tkc5xf6-3-7-1:after {
   content: "*";
 }
-._1tkc5xf7-3-6-0 {
+._1tkc5xf7-3-7-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xfb-3-6-0 {
-  --_1tkc5xfa-3-6-0: var(--_bx32h1-3-6-0);
+._1tkc5xfb-3-7-1 {
+  --_1tkc5xfa-3-7-1: var(--_bx32h1-3-7-1);
   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-6-0 {
-  --_1tkc5xf8-3-6-0: 1;
-  --_1tkc5xf9-3-6-0: 0;
+._1tkc5xfc-3-7-1 {
+  --_1tkc5xf8-3-7-1: 1;
+  --_1tkc5xf9-3-7-1: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfd-3-6-0 {
-  --_1tkc5xf8-3-6-0: 0;
-  --_1tkc5xf9-3-6-0: 1;
+._1tkc5xfd-3-7-1 {
+  --_1tkc5xf8-3-7-1: 0;
+  --_1tkc5xf9-3-7-1: 1;
   transform: unset;
 }
-._1tkc5xfe-3-6-0 {
-  --_1tkc5xfa-3-6-0: var(--dt-colors-icon-neutral-subdued, #595a7d);
+._1tkc5xfe-3-7-1 {
+  --_1tkc5xfa-3-7-1: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1tkc5xfg-3-6-0 {
-  --_1tkc5xfa-3-6-0: var(--dt-colors-icon-critical-default, #bb0731);
+._1tkc5xfg-3-7-1 {
+  --_1tkc5xfa-3-7-1: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1tkc5xfb-3-6-0 > svg {
+._1tkc5xfb-3-7-1 > 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-6-0 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf8-3-6-0);
-  color: var(--_1tkc5xfa-3-6-0);
+._1tkc5xfb-3-7-1 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf8-3-7-1);
+  color: var(--_1tkc5xfa-3-7-1);
 }
-._1tkc5xfb-3-6-0 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf9-3-6-0);
-  color: var(--_1tkc5xfa-3-6-0);
+._1tkc5xfb-3-7-1 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf9-3-7-1);
+  color: var(--_1tkc5xfa-3-7-1);
 }
-._1tkc5xfh-3-6-0 {
+._1tkc5xfh-3-7-1 {
   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-6-0);
+  background-color: var(--_bx32h3-3-7-1);
 }
-._1tkc5xfr-3-6-0 {
+._1tkc5xfr-3-7-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfs-3-6-0 {
+._1tkc5xfs-3-7-1 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xft-3-6-0 {
+._1tkc5xft-3-7-1 {
   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-6-0 {
+._1tkc5xfu-3-7-1 {
   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-6-0 {
+._1tkc5xfv-3-7-1 {
   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-6-0 {
+._1tkc5xfw-3-7-1 {
   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-6-0);
+  background-color: var(--_1tkc5xfa-3-7-1);
 }

package/esm/forms/switch/Switch.js

@@ -17,8 +17,8 @@ import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHi
 import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { isDev } from "../../core/utils/is-node-environment.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -29,6 +29,15 @@ import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidati
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useInputHint } from "../hooks/useInputHint.js";
+function getSwitchFieldVariant(isSelected, showError) {
+  if (isSelected) {
+    return "accent";
+  }
+  if (showError) {
+    return "emphasized";
+  }
+  return "default";
+}
 const COMPONENT_NAME = "Switch";
 const Switch = forwardRef(
   (props, forwardedRef) => {
@@ -187,7 +196,7 @@ const Switch = forwardRef(
                       fieldColorsCSS({
                         disabled: disabledOrAriaDisabled,
                         color: showError ? "critical" : color,
-                        variant: isSelected ? "accent" : showError ? "emphasized" : "default"
+                        variant: getSwitchFieldVariant(isSelected, showError)
                       })
                     ),
                     children: /* @__PURE__ */ jsxs(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.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 { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.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 = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      controlState,\n      name,\n      formValue,\n      onChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled: ariaDisabledProp,\n        propReadOnly,\n      });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required });\n\n    const [controlStateHasError, hint] = useFormControlState(controlState);\n\n    const showError = controlStateHasError || messagesContextState.showError;\n\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: showError,\n    });\n\n    if (value !== undefined && !onChange && isDev()) {\n      // eslint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    /** The callback function when the state changes */\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\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        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: isSelected\n                  ? 'accent'\n                  : showError\n                  ? 'emphasized'\n                  : 'default',\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\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(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.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 { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.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\nfunction getSwitchFieldVariant(isSelected: boolean, showError: boolean) {\n  if (isSelected) {\n    return 'accent';\n  }\n  if (showError) {\n    return 'emphasized';\n  }\n  return 'default';\n}\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * The `Switch` component allows users to toggle between two different states. You can\n * set a specific initial value using the `defaultValue` prop for an uncontrolled switch\n * or setting the initial value of the state of a controlled switch accordingly. The `name` prop also\n * needs to be specified for identifying the `Switch` when submitting it in a form.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      controlState,\n      name,\n      formValue,\n      onChange,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled: ariaDisabledProp,\n        propReadOnly,\n      });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required });\n\n    const [controlStateHasError, hint] = useFormControlState(controlState);\n\n    const showError = controlStateHasError || messagesContextState.showError;\n\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: showError,\n    });\n\n    if (value !== undefined && !onChange && isDev()) {\n      // eslint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    /** The callback function when the state changes */\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\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        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={(event) => {\n                focusProps.onBlur(event);\n                !controlState && validationOnBlur(event);\n              }}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: getSwitchFieldVariant(isSelected, showError),\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\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(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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-6-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-6-0", false: "_1tkc5xfd-3-6-0" }, readOnly: { true: "_1tkc5xfe-3-6-0" }, hasError: { true: "_1tkc5xff-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-6-0"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-6-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-6-0" }, readOnly: { true: "_1tkc5xf2-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-6-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-6-0", false: "_1tkc5xf5-3-6-0" }, required: { true: "_1tkc5xf6-3-6-0" }, readOnly: { true: "_1tkc5xf7-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-6-0";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-6-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-6-0", false: "_1tkc5xfj-3-6-0" }, hasError: { true: "_1tkc5xfk-3-6-0", false: "_1tkc5xfl-3-6-0" }, color: { primary: "_1tkc5xfm-3-6-0", neutral: "_1tkc5xfn-3-6-0" }, isFocusVisible: { true: "_1tkc5xfo-3-6-0", false: "_1tkc5xfp-3-6-0" }, readOnly: { true: "_1tkc5xfq-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-6-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-6-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-6-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-6-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-6-0"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-7-1", variantClassNames: { selected: { true: "_1tkc5xfc-3-7-1", false: "_1tkc5xfd-3-7-1" }, readOnly: { true: "_1tkc5xfe-3-7-1" }, hasError: { true: "_1tkc5xff-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-7-1"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-7-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-7-1" }, readOnly: { true: "_1tkc5xf2-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-7-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-7-1", false: "_1tkc5xf5-3-7-1" }, required: { true: "_1tkc5xf6-3-7-1" }, readOnly: { true: "_1tkc5xf7-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-7-1";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-7-1", variantClassNames: { disabled: { true: "_1tkc5xfi-3-7-1", false: "_1tkc5xfj-3-7-1" }, hasError: { true: "_1tkc5xfk-3-7-1", false: "_1tkc5xfl-3-7-1" }, color: { primary: "_1tkc5xfm-3-7-1", neutral: "_1tkc5xfn-3-7-1" }, isFocusVisible: { true: "_1tkc5xfo-3-7-1", false: "_1tkc5xfp-3-7-1" }, readOnly: { true: "_1tkc5xfq-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-7-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-7-1"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-7-1"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-7-1"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-7-1"]] });
 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-6-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-6-0',false:'_1tkc5xfd-3-6-0'},readOnly:{true:'_1tkc5xfe-3-6-0'},hasError:{true:'_1tkc5xff-3-6-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-6-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-6-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-6-0'},readOnly:{true:'_1tkc5xf2-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-6-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-6-0',false:'_1tkc5xf5-3-6-0'},required:{true:'_1tkc5xf6-3-6-0'},readOnly:{true:'_1tkc5xf7-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-6-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-6-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-6-0',false:'_1tkc5xfj-3-6-0'},hasError:{true:'_1tkc5xfk-3-6-0',false:'_1tkc5xfl-3-6-0'},color:{primary:'_1tkc5xfm-3-6-0',neutral:'_1tkc5xfn-3-6-0'},isFocusVisible:{true:'_1tkc5xfo-3-6-0',false:'_1tkc5xfp-3-6-0'},readOnly:{true:'_1tkc5xfq-3-6-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-6-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-6-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-6-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-6-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-6-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-7-1',variantClassNames:{selected:{true:'_1tkc5xfc-3-7-1',false:'_1tkc5xfd-3-7-1'},readOnly:{true:'_1tkc5xfe-3-7-1'},hasError:{true:'_1tkc5xff-3-7-1'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-7-1']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-7-1',variantClassNames:{disabled:{true:'_1tkc5xf1-3-7-1'},readOnly:{true:'_1tkc5xf2-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-7-1',variantClassNames:{disabled:{true:'_1tkc5xf4-3-7-1',false:'_1tkc5xf5-3-7-1'},required:{true:'_1tkc5xf6-3-7-1'},readOnly:{true:'_1tkc5xf7-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-7-1';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-7-1',variantClassNames:{disabled:{true:'_1tkc5xfi-3-7-1',false:'_1tkc5xfj-3-7-1'},hasError:{true:'_1tkc5xfk-3-7-1',false:'_1tkc5xfl-3-7-1'},color:{primary:'_1tkc5xfm-3-7-1',neutral:'_1tkc5xfn-3-7-1'},isFocusVisible:{true:'_1tkc5xfo-3-7-1',false:'_1tkc5xfp-3-7-1'},readOnly:{true:'_1tkc5xfq-3-7-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-7-1'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-7-1'],[{color:'neutral',disabled:true},'_1tkc5xft-3-7-1'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-7-1'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-7-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACzS,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/L,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxP,IAAI,iBAAiB;AACrB,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,MAAK,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,OAAM,UAAS,OAAM,gBAAe,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/text-area/TextArea.css

@@ -1,5 +1,5 @@
-._44rwcl2-3-6-0 {
-  --_44rwcl0-3-6-0: 0px;
+._44rwcl2-3-7-1 {
+  --_44rwcl0-3-7-1: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl2-3-6-0:focus-within {
-  --_44rwcl0-3-6-0: -2px;
+._44rwcl2-3-7-1:focus-within {
+  --_44rwcl0-3-7-1: -2px;
 }
-._44rwcl2-3-6-0::-webkit-resizer {
+._44rwcl2-3-7-1::-webkit-resizer {
   display: none;
 }
-._44rwcl3-3-6-0 {
+._44rwcl3-3-7-1 {
   width: fit-content;
 }
-._44rwcl4-3-6-0 {
+._44rwcl4-3-7-1 {
   resize: none;
 }
-._44rwcl5-3-6-0 {
+._44rwcl5-3-7-1 {
   resize: both;
 }
-._44rwcl6-3-6-0 {
+._44rwcl6-3-7-1 {
   resize: horizontal;
 }
-._44rwcl7-3-6-0 {
+._44rwcl7-3-7-1 {
   resize: vertical;
 }
-._44rwcl8-3-6-0 {
+._44rwcl8-3-7-1 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -51,138 +51,138 @@
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
-  box-shadow: var(--_44rwcl1-3-6-0);
+  box-shadow: var(--_44rwcl1-3-7-1);
 }
-._44rwcl8-3-6-0::placeholder {
+._44rwcl8-3-7-1::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl8-3-6-0:hover {
+._44rwcl8-3-7-1:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl8-3-6-0:active {
+._44rwcl8-3-7-1:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1jgl8s50-3-6-0 ._44rwcl8-3-6-0 {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
+._1jgl8s50-3-7-1 ._44rwcl8-3-7-1 {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-rest, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #fff);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-6-0 ._44rwcl8-3-6-0:hover {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
+._1jgl8s50-3-7-1 ._44rwcl8-3-7-1:hover {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-hover, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #dadbe4);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-6-0 ._44rwcl8-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
+._1jgl8s50-3-7-1 ._44rwcl8-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-neutral-emphasized-active, inset 0px 0px 0px 1px #2f2f4f1f, inset 0px -1px 0px #2f2f4f14, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #d0d1dc);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcl9-3-6-0 {
+._44rwcl9-3-7-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl9-3-6-0::placeholder {
+._44rwcl9-3-7-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl9-3-6-0:hover {
+._44rwcl9-3-7-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-6-0:active {
+._44rwcl9-3-7-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-6-0 ._44rwcl9-3-6-0, ._1jgl8s50-3-6-0 ._44rwcl9-3-6-0:hover, ._1jgl8s50-3-6-0 ._44rwcl9-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._44rwcl9-3-7-1, ._1jgl8s50-3-7-1 ._44rwcl9-3-7-1:hover, ._1jgl8s50-3-7-1 ._44rwcl9-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcla-3-6-0 {
+._44rwcla-3-7-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._44rwcla-3-6-0:hover {
+._44rwcla-3-7-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-6-0:active {
+._44rwcla-3-7-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-6-0 ._44rwcla-3-6-0, ._1jgl8s50-3-6-0 ._44rwcla-3-6-0:hover, ._1jgl8s50-3-6-0 ._44rwcla-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._44rwcla-3-7-1, ._1jgl8s50-3-7-1 ._44rwcla-3-7-1:hover, ._1jgl8s50-3-7-1 ._44rwcla-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclb-3-6-0 {
+._44rwclb-3-7-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-6-0::placeholder {
+._44rwclb-3-7-1::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclb-3-6-0:hover {
+._44rwclb-3-7-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwclb-3-6-0:active {
+._44rwclb-3-7-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._1jgl8s50-3-6-0 ._44rwclb-3-6-0 {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
+._1jgl8s50-3-7-1 ._44rwclb-3-7-1 {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-critical-emphasized-rest, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f8e1e1);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-6-0 ._44rwclb-3-6-0:hover {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
+._1jgl8s50-3-7-1 ._44rwclb-3-7-1:hover {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-critical-emphasized-hover, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f6d6d5);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-6-0 ._44rwclb-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
+._1jgl8s50-3-7-1 ._44rwclb-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-critical-emphasized-active, inset 0px 0px 0px 1px #7500130f, inset 0px -1px 0px #7500131a, 0px 1px 1px -1px #2d2e4e1f, inset 0px 0px 0px 1px #f5cac9);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwclc-3-6-0 {
+._44rwclc-3-7-1 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwclc-3-6-0::placeholder {
+._44rwclc-3-7-1::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwclc-3-6-0:hover {
+._44rwclc-3-7-1:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclc-3-6-0:active {
+._44rwclc-3-7-1:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-6-0 ._44rwclc-3-6-0, ._1jgl8s50-3-6-0 ._44rwclc-3-6-0:hover, ._1jgl8s50-3-6-0 ._44rwclc-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._44rwclc-3-7-1, ._1jgl8s50-3-7-1 ._44rwclc-3-7-1:hover, ._1jgl8s50-3-7-1 ._44rwclc-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcld-3-6-0 {
+._44rwcld-3-7-1 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-6-0:hover {
+._44rwcld-3-7-1:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._44rwcld-3-6-0:active {
+._44rwcld-3-7-1:active {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-6-0 ._44rwcld-3-6-0, ._1jgl8s50-3-6-0 ._44rwcld-3-6-0:hover, ._1jgl8s50-3-6-0 ._44rwcld-3-6-0:active {
-  --_44rwcl1-3-6-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._44rwcld-3-7-1, ._1jgl8s50-3-7-1 ._44rwcld-3-7-1:hover, ._1jgl8s50-3-7-1 ._44rwcld-3-7-1:active {
+  --_44rwcl1-3-7-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._44rwcle-3-6-0 {
+._44rwcle-3-7-1 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-6-0)) translateY(var(--_44rwcl0-3-6-0));
+  transform: translateX(var(--_44rwcl0-3-7-1)) translateY(var(--_44rwcl0-3-7-1));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclf-3-6-0 {
+._44rwclf-3-7-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwclg-3-6-0 {
+._44rwclg-3-7-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcli-3-6-0 {
+._44rwcli-3-7-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwcle-3-6-0 {
+  ._44rwcle-3-7-1 {
     display: none;
   }
 }

package/esm/forms/text-area/TextArea.js

@@ -10,8 +10,8 @@ import { ResizeIcon } from "@dynatrace/strato-icons";
 import * as styles from "./TextArea.sty.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { withFormFieldMessageContextProvider } from "../forms-core/components/form-field/FormFieldMessageContextProvider.js";