@dynatrace/strato-components 3.2.1 → 3.3.0

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

@@ -1,7 +1,7 @@
 import {
   useCallback
 } from "react";
-const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
+const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge, onTrailingOverflow) => {
   const onKeyDownHandler = useCallback(
     (e) => {
       if (e.shiftKey === true || e.key === "Shift") {
@@ -26,6 +26,9 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
           if (prev && selection && selection.start === 0) {
             prev.element.current?.focus();
             e.preventDefault();
+          } else if (!prev && onLeadingEdge && selection && selection.start === 0) {
+            onLeadingEdge();
+            e.preventDefault();
           } else if (target && selection === void 0) {
             target.selectAll();
             e.preventDefault();
@@ -35,6 +38,9 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
           if (next && selection && selection.end === length) {
             next.element.current?.focus();
             e.preventDefault();
+          } else if (!next && onTrailingEdge && selection && selection.end === length) {
+            onTrailingEdge();
+            e.preventDefault();
           } else if (target && selection === void 0) {
             next.selectAll();
             e.preventDefault();
@@ -45,6 +51,9 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
             prev.element.current?.focus();
             prev.setSelection({ start: 0, end: 0, rtl: true });
             e.preventDefault();
+          } else if (!prev && onLeadingEdge && selection && selection.start === 0 && selection.end === 0) {
+            onLeadingEdge();
+            e.preventDefault();
           }
           return;
       }
@@ -62,8 +71,23 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs) => {
         afterTriggerSpinButton.element.current?.focus();
         e.preventDefault();
       }
+      if (target.type === "text" && /^\d$/.test(e.key) && !e.metaKey && !e.ctrlKey) {
+        if (next?.type === "number") {
+          next.applyText(e.key, true);
+          next.element.current?.focus();
+          next.setSelection({ start: 0, end: 0, rtl: true });
+        } else if (!next && onTrailingOverflow) {
+          onTrailingOverflow(e.key);
+        }
+      }
     },
-    [spinButtonRefs, triggerRefs]
+    [
+      spinButtonRefs,
+      triggerRefs,
+      onLeadingEdge,
+      onTrailingEdge,
+      onTrailingOverflow
+    ]
   );
   return { onKeyDownHandler };
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/spin-button-group/hooks/useNavigateSpinButton.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonHandler } from '../types.js';\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRef - A sparse array of trigger keys\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n) => {\n  // the keydown handler to attach to the spinbutton\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      // Condensed version of the handlers for simpler usage\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      // Don't do anything, if the event target is not in our spin button array\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n      switch (e.key) {\n        case 'ArrowLeft':\n          // If a prev. spinbutton is available and the cursor is at the first position\n          if (prev && selection && selection.start === 0) {\n            prev.element.current?.focus();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowLeft is pressed, we need to restore the selection to the current spin button.\n            target.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'ArrowRight':\n          // If a next spinbutton is available and the cursor is at the last position\n          if (next && selection && selection.end === length) {\n            next.element.current?.focus();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowRight is pressed, we need to restore the selection to the current spin button.\n            next.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'Backspace':\n          // If a prev. spinbutton is available and the cursor is collapsed at the first position\n          if (\n            prev &&\n            selection &&\n            selection.start === 0 &&\n            selection.end === 0\n          ) {\n            prev.element.current?.focus();\n            // Set the cursor to the last position of the prev. spinbutton\n            prev.setSelection({ start: 0, end: 0, rtl: true });\n            e.preventDefault();\n          }\n          return;\n      }\n\n      // Search for a defined trigger after the current target index\n      const lookupIndex = spinButtonRefs.current?.findIndex(\n        (h) => h === target,\n      );\n      const nextTriggerIndex = triggerRefs.current.findIndex(\n        (trigger, index) => trigger !== undefined && index > lookupIndex,\n      );\n\n      // Find the first spinbutton after the trigger index\n      const afterTriggerSpinButton = spinButtonRefs.current?.find(\n        (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n      );\n      const trigger = triggerRefs.current[nextTriggerIndex];\n\n      // If a trigger and a after trigger spinbutton was found, focus the spinbutton if the event key matches the trigger key.\n      if (\n        trigger !== undefined &&\n        afterTriggerSpinButton &&\n        e.key === trigger\n      ) {\n        afterTriggerSpinButton.element.current?.focus();\n        e.preventDefault();\n      }\n    },\n    [spinButtonRefs, triggerRefs],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AASA,MAAM,wBAAwB,CACnC,gBACA,gBACG;AAEH,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAA0B;AACzB,UAAI,EAAE,aAAa,QAAQ,EAAE,QAAQ,SAAS;AAC5C;AAAA,MACF;AAGA,YAAM,WAAW,eAAe,QAAQ,OAAO,OAAO;AACtD,YAAM,QAAQ,UAAU;AAAA,QACtB,CAAC,EAAE,QAAQ,MAAM,SAAS,YAAY,GAAG;AAAA,MAC3C;AAGA,UAAI,QAAQ,GAAG;AACb;AAAA,MACF;AAEA,YAAM,CAAC,MAAM,QAAQ,IAAI,IAAI;AAAA,QAC3B,SAAS,QAAQ,CAAC;AAAA,QAClB,SAAS,KAAK;AAAA,QACd,SAAS,QAAQ,CAAC;AAAA,MACpB;AAEA,YAAM,SAAS,QAAQ,SAAS,SAAS,aAAa;AACtD,YAAM,YAAY,QAAQ,aAAa;AACvC,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,UAAU,GAAG;AAC9C,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB,WAAW,UAAU,cAAc,QAAW;AAE5C,mBAAO,UAAU;AACjB,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cAAI,QAAQ,aAAa,UAAU,QAAQ,QAAQ;AACjD,iBAAK,QAAQ,SAAS,MAAM;AAC5B,cAAE,eAAe;AAAA,UACnB,WAAW,UAAU,cAAc,QAAW;AAE5C,iBAAK,UAAU;AACf,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,QACF,KAAK;AAEH,cACE,QACA,aACA,UAAU,UAAU,KACpB,UAAU,QAAQ,GAClB;AACA,iBAAK,QAAQ,SAAS,MAAM;AAE5B,iBAAK,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC;AACjD,cAAE,eAAe;AAAA,UACnB;AACA;AAAA,MACJ;AAGA,YAAM,cAAc,eAAe,SAAS;AAAA,QAC1C,CAAC,MAAM,MAAM;AAAA,MACf;AACA,YAAM,mBAAmB,YAAY,QAAQ;AAAA,QAC3C,CAACA,UAASC,WAAUD,aAAY,UAAaC,SAAQ;AAAA,MACvD;AAGA,YAAM,yBAAyB,eAAe,SAAS;AAAA,QACrD,CAAC,YAAYA,WAAU,cAAcA,SAAQ;AAAA,MAC/C;AACA,YAAM,UAAU,YAAY,QAAQ,gBAAgB;AAGpD,UACE,YAAY,UACZ,0BACA,EAAE,QAAQ,SACV;AACA,+BAAuB,QAAQ,SAAS,MAAM;AAC9C,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,WAAW;AAAA,EAC9B;AAEA,SAAO,EAAE,iBAAiB;AAC5B;",
+  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonHandler } from '../types.js';\n\n/**\n * This hook provides ootb support for arrow key and backspace navigation between spinbuttons within the group.\n * @param spinButtonRefs - A sparse array of spinbutton handlers\n * @param triggerRefs - A sparse array of trigger keys\n * @param onLeadingEdge - Optional callback fired when the user navigates backwards past the first spin button\n * @param onTrailingEdge - Optional callback fired when the user navigates forward past the last spin button\n * @param onTrailingOverflow - Optional callback fired with the overflow character when a TextSpinButton at the trailing position receives a digit key it cannot consume\n */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  onLeadingEdge?: () => void,\n  onTrailingEdge?: () => void,\n  onTrailingOverflow?: (overflowChar: string) => void,\n) => {\n  // the keydown handler to attach to the spinbutton\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      // Condensed version of the handlers for simpler usage\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\n      // Don't do anything, if the event target is not in our spin button array\n      if (index < 0) {\n        return;\n      }\n\n      const [prev, target, next] = [\n        handlers[index - 1],\n        handlers[index],\n        handlers[index + 1],\n      ];\n\n      const length = target?.element?.current?.textContent?.length;\n      const selection = target?.getSelection();\n      switch (e.key) {\n        case 'ArrowLeft':\n          // If a prev. spinbutton is available and the cursor is at the first position\n          if (prev && selection && selection.start === 0) {\n            prev.element.current?.focus();\n            e.preventDefault();\n          } else if (\n            !prev &&\n            onLeadingEdge &&\n            selection &&\n            selection.start === 0\n          ) {\n            // No previous spinbutton in this group \u2014 notify the parent\n            onLeadingEdge();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowLeft is pressed, we need to restore the selection to the current spin button.\n            target.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'ArrowRight':\n          // If a next spinbutton is available and the cursor is at the last position\n          if (next && selection && selection.end === length) {\n            next.element.current?.focus();\n            e.preventDefault();\n          } else if (\n            !next &&\n            onTrailingEdge &&\n            selection &&\n            selection.end === length\n          ) {\n            // No next spinbutton in this group \u2014 notify the parent\n            onTrailingEdge();\n            e.preventDefault();\n          } else if (target && selection === undefined) {\n            // If a partial selection is present and the ArrowRight is pressed, we need to restore the selection to the current spin button.\n            next.selectAll();\n            e.preventDefault();\n          }\n          return;\n        case 'Backspace':\n          // If a prev. spinbutton is available and the cursor is collapsed at the first position\n          if (\n            prev &&\n            selection &&\n            selection.start === 0 &&\n            selection.end === 0\n          ) {\n            prev.element.current?.focus();\n            // Set the cursor to the last position of the prev. spinbutton\n            prev.setSelection({ start: 0, end: 0, rtl: true });\n            e.preventDefault();\n          } else if (\n            !prev &&\n            onLeadingEdge &&\n            selection &&\n            selection.start === 0 &&\n            selection.end === 0\n          ) {\n            // No previous spinbutton in this group \u2014 notify the parent\n            onLeadingEdge();\n            e.preventDefault();\n          }\n          return;\n      }\n\n      // Search for a defined trigger after the current target index\n      const lookupIndex = spinButtonRefs.current?.findIndex(\n        (h) => h === target,\n      );\n      const nextTriggerIndex = triggerRefs.current.findIndex(\n        (trigger, index) => trigger !== undefined && index > lookupIndex,\n      );\n\n      // Find the first spinbutton after the trigger index\n      const afterTriggerSpinButton = spinButtonRefs.current?.find(\n        (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n      );\n      const trigger = triggerRefs.current[nextTriggerIndex];\n\n      // If a trigger and a after trigger spinbutton was found, focus the spinbutton if the event key matches the trigger key.\n      if (\n        trigger !== undefined &&\n        afterTriggerSpinButton &&\n        e.key === trigger\n      ) {\n        afterTriggerSpinButton.element.current?.focus();\n        e.preventDefault();\n      }\n\n      // When a digit key is typed in a TextSpinButton it cannot be consumed (text\n      // options like \"AM\"/\"PM\" don't match digits). Treat it as a navigation intent:\n      // forward the digit to the next NumberSpinButton in the group, or call\n      // onTrailingOverflow when the TextSpinButton is at the trailing position.\n      if (\n        target.type === 'text' &&\n        /^\\d$/.test(e.key) &&\n        !e.metaKey &&\n        !e.ctrlKey\n      ) {\n        if (next?.type === 'number') {\n          next.applyText(e.key, true);\n          next.element.current?.focus();\n          next.setSelection({ start: 0, end: 0, rtl: true });\n        } else if (!next && onTrailingOverflow) {\n          onTrailingOverflow(e.key);\n        }\n      }\n    },\n    [\n      spinButtonRefs,\n      triggerRefs,\n      onLeadingEdge,\n      onTrailingEdge,\n      onTrailingOverflow,\n    ],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
+  "mappings": "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",
   "names": ["trigger", "index"]
 }

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

@@ -9,40 +9,83 @@ import { NUMBER_SPIN_BUTTON_DEFAULTS } from "../../number-spin-button/constants.
 import { isNumberSpinButton } from "../../number-spin-button/NumberSpinButton.js";
 import { isTextSpinButton } from "../../text-spin-button/TextSpinButton.js";
 import { isSpinButtonGroupSeparator } from "../SpinButtonGroupSeparator.js";
-function handleValueOverflow(candidate, event, maxValue, current, target) {
+function handleValueOverflow({
+  candidate,
+  event,
+  index,
+  maxValue,
+  valueOverflow,
+  spinButtonRefs,
+  onTrailingOverflow,
+  onTrailingEdge
+}) {
+  const nextSpinButton = spinButtonRefs.current.find(
+    (handler, i) => handler && i > index
+  );
+  if (!valueOverflow || candidate === "") {
+    return;
+  }
+  const currentHandler = spinButtonRefs.current[index];
+  if (!currentHandler) {
+    return;
+  }
+  const currentText = currentHandler?.element?.current?.textContent ?? "";
+  const sel = currentHandler?.getSelection();
+  const maxNrOfDigits = maxValue.toString().length;
   const overflowChar = candidate.substring(candidate.length - 1);
-  const isNumericOverflow = Number.isInteger(parseInt(overflowChar));
+  const overflowDigit = parseInt(overflowChar);
+  const isNumericOverflow = Number.isInteger(overflowDigit);
   const candidateValue = parseInt(candidate);
-  const maxNrOfDigits = maxValue.toString().length;
-  const currentText = current?.element?.current?.textContent ?? "";
-  const sel = current?.getSelection();
-  if (sel === void 0 || sel.start !== sel.end || sel.end !== currentText.length) {
+  const hasNextInGroup = nextSpinButton !== void 0;
+  const canAdvanceOutOfGroup = nextSpinButton === void 0 && onTrailingEdge !== void 0;
+  const isReplacingWholeValue = sel !== void 0 && sel.start === 0 && sel.end === currentText.length;
+  if (isNumericOverflow && maxNrOfDigits >= 2 && candidate.length === 1 && candidateValue > Math.floor(maxValue / 10) && (currentText === "" || isReplacingWholeValue) && (hasNextInGroup || canAdvanceOutOfGroup)) {
+    currentHandler.applyText(candidate, true);
+    event.preventDefault();
+    if (hasNextInGroup) {
+      nextSpinButton.element.current?.focus();
+    } else {
+      onTrailingEdge?.();
+    }
     return;
   }
-  if (isNumericOverflow && candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {
+  if (candidate.length === maxNrOfDigits && candidateValue <= maxValue) {
+    const hasCrossGroupEdge = !hasNextInGroup && onTrailingEdge !== void 0;
+    if (hasNextInGroup || hasCrossGroupEdge) {
+      currentHandler?.applyText(candidate, true);
+      event.preventDefault();
+      if (hasNextInGroup) {
+        nextSpinButton.element.current?.focus();
+      } else {
+        onTrailingEdge?.();
+      }
+      return;
+    }
+  }
+  if (isNumericOverflow && candidate.length === maxNrOfDigits && candidateValue > maxValue && hasNextInGroup) {
+    event.preventDefault();
+    if (nextSpinButton.type === "number") {
+      nextSpinButton.applyText(overflowChar, true);
+      nextSpinButton.element.current?.focus();
+      nextSpinButton.setSelection({ start: 0, end: 0, rtl: true });
+    } else {
+      nextSpinButton.searchValue(overflowChar, true);
+      nextSpinButton.element.current?.focus();
+    }
     return;
   }
-  switch (target?.type) {
-    case "number":
-      if (!isNumericOverflow) {
-        return;
-      }
-      target?.applyText(overflowChar, true);
-      target?.element.current?.focus();
-      target?.setSelection({
-        start: 0,
-        end: 0,
-        rtl: true
-      });
-      break;
-    case "text":
-      target?.searchValue(overflowChar, true);
-      target?.element.current?.focus();
-      break;
+  if (!hasNextInGroup && onTrailingOverflow) {
+    if (!isNumericOverflow) {
+      return;
+    }
+    if (candidate.length <= maxNrOfDigits && candidateValue <= maxValue) {
+      return;
+    }
+    event.preventDefault();
+    onTrailingOverflow(overflowChar);
   }
-  event.preventDefault();
 }
-function useValueOverflow(children, valueOverflow) {
+function useValueOverflow(children, valueOverflow, onTrailingOverflow, onTrailingEdge) {
   const spinButtonRefs = useRef([]);
   const triggerRefs = useRef([]);
   function linkRefAndRemember(child, index, handler) {
@@ -77,16 +120,16 @@ function useValueOverflow(children, valueOverflow) {
               if (event.defaultPrevented) {
                 return;
               }
-              const nextSpinButton = spinButtonRefs.current.find(
-                (handler, i) => handler && i > index
-              );
-              valueOverflow && nextSpinButton && candidate !== "" && handleValueOverflow(
+              handleValueOverflow({
                 candidate,
                 event,
+                index,
                 maxValue,
-                spinButtonRefs.current[index],
-                nextSpinButton
-              );
+                valueOverflow,
+                spinButtonRefs,
+                onTrailingOverflow,
+                onTrailingEdge
+              });
             }
           },
           children
@@ -106,7 +149,7 @@ function useValueOverflow(children, valueOverflow) {
       }
       return child;
     }),
-    [children, valueOverflow]
+    [children, valueOverflow, onTrailingOverflow, onTrailingEdge]
   );
   return {
     clonedChildren,

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 * Function to handle a potential value overflow from the `current` spinbutton to the `target` spinbutton.\n * A value overflow could be either if\n * * the candidate numeric value is higher than the allowed maxValue\n * * the candidate length is exceeding the max nr of digits for the current spinbutton\n */\nfunction handleValueOverflow(\n  candidate: string,\n  event: InputEvent,\n  maxValue: number,\n  current: SpinButtonHandler,\n  target: SpinButtonHandler,\n) {\n  // Consider the last char as overflow\n  const overflowChar = candidate.substring(candidate.length - 1);\n  const isNumericOverflow = Number.isInteger(parseInt(overflowChar));\n\n  const candidateValue = parseInt(candidate);\n  const maxNrOfDigits = maxValue.toString().length;\n  const currentText = current?.element?.current?.textContent ?? '';\n\n  // Only overflow if selection is collapsed and cursor is at the last position.\n  const sel = current?.getSelection();\n  if (\n    sel === undefined ||\n    sel.start !== sel.end ||\n    sel.end !== currentText.length\n  ) {\n    return;\n  }\n\n  // Nothing to do if the candidate value is smaller and shorter than the allowed max value.\n  if (\n    isNumericOverflow &&\n    candidate.length <= maxNrOfDigits &&\n    candidateValue <= maxValue\n  ) {\n    return;\n  }\n\n  // Handle overflow based on the target spinbutton\n  switch (target?.type) {\n    case 'number':\n      // Only allow a numeric overflow in this case\n      if (!isNumericOverflow) {\n        return;\n      }\n\n      // Update target content, and set cursor to last target position\n      target?.applyText(overflowChar, true);\n      target?.element.current?.focus();\n      target?.setSelection({\n        start: 0,\n        end: 0,\n        rtl: true,\n      });\n      break;\n    case 'text':\n      // Search for a text value in the target spin button and focus it\n      target?.searchValue(overflowChar, true);\n      target?.element.current?.focus();\n      break;\n  }\n\n  // prevent input processing for the current spinbutton\n  event.preventDefault();\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(children: ReactNode, valueOverflow: boolean) {\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                // 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 there is a next spinbutton and value overflow is enabled, handle the overflow\n                valueOverflow &&\n                  nextSpinButton &&\n                  candidate !== '' &&\n                  handleValueOverflow(\n                    candidate,\n                    event,\n                    maxValue,\n                    spinButtonRefs.current[index],\n                    nextSpinButton,\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],\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 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\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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",
   "names": []
 }

package/esm/forms/switch/Switch.css

@@ -1,61 +1,61 @@
-._1tkc5xf0-3-2-1 {
+._1tkc5xf0-3-3-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   cursor: pointer;
 }
-._1tkc5xf1-3-2-1 {
+._1tkc5xf1-3-3-0 {
   cursor: not-allowed;
 }
-._1tkc5xf2-3-2-1 {
+._1tkc5xf2-3-3-0 {
   cursor: not-allowed;
 }
-._1tkc5xf3-3-2-1 {
+._1tkc5xf3-3-3-0 {
   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-2-1 {
+._1tkc5xf4-3-3-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1tkc5xf5-3-2-1 {
+._1tkc5xf5-3-3-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1tkc5xf6-3-2-1:after {
+._1tkc5xf6-3-3-0:after {
   content: "*";
 }
-._1tkc5xfa-3-2-1 {
-  --_1tkc5xf9-3-2-1: var(--_bx32h1-3-2-1);
+._1tkc5xfa-3-3-0 {
+  --_1tkc5xf9-3-3-0: var(--_bx32h1-3-3-0);
   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;
 }
-._1tkc5xfb-3-2-1 {
-  --_1tkc5xf7-3-2-1: 1;
-  --_1tkc5xf8-3-2-1: 0;
+._1tkc5xfb-3-3-0 {
+  --_1tkc5xf7-3-3-0: 1;
+  --_1tkc5xf8-3-3-0: 0;
   transform: translateX(calc(var(--dt-spacings-size-4, 4px) + var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px)));
 }
-._1tkc5xfc-3-2-1 {
-  --_1tkc5xf7-3-2-1: 0;
-  --_1tkc5xf8-3-2-1: 1;
+._1tkc5xfc-3-3-0 {
+  --_1tkc5xf7-3-3-0: 0;
+  --_1tkc5xf8-3-3-0: 1;
   transform: unset;
 }
-._1tkc5xfa-3-2-1 > svg {
+._1tkc5xfa-3-3-0 > 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;
 }
-._1tkc5xfa-3-2-1 > svg:nth-child(1) {
-  opacity: var(--_1tkc5xf7-3-2-1);
-  color: var(--_1tkc5xf9-3-2-1);
+._1tkc5xfa-3-3-0 > svg:nth-child(1) {
+  opacity: var(--_1tkc5xf7-3-3-0);
+  color: var(--_1tkc5xf9-3-3-0);
 }
-._1tkc5xfa-3-2-1 > svg:nth-child(3) {
-  opacity: var(--_1tkc5xf8-3-2-1);
-  color: var(--_1tkc5xf9-3-2-1);
+._1tkc5xfa-3-3-0 > svg:nth-child(3) {
+  opacity: var(--_1tkc5xf8-3-3-0);
+  color: var(--_1tkc5xf9-3-3-0);
 }
-._1tkc5xfd-3-2-1 {
+._1tkc5xfd-3-3-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -70,22 +70,22 @@
   min-width: 38px;
   position: relative;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-2-1);
+  background-color: var(--_bx32h3-3-3-0);
 }
-._1tkc5xfm-3-2-1 {
-  background-color: var(--_bx32h2-3-2-1);
+._1tkc5xfm-3-3-0 {
+  background-color: var(--_bx32h2-3-3-0);
 }
-._1tkc5xfn-3-2-1 {
+._1tkc5xfn-3-3-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._1tkc5xfo-3-2-1 {
+._1tkc5xfo-3-3-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1tkc5xfp-3-2-1 {
+._1tkc5xfp-3-3-0 {
   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);
 }
-._1tkc5xfq-3-2-1 {
+._1tkc5xfq-3-3-0 {
   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);
@@ -96,5 +96,5 @@
   height: var(--dt-spacings-size-12, 12px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
   box-shadow: none;
-  background-color: var(--_bx32h1-3-2-1);
+  background-color: var(--_bx32h1-3-3-0);
 }

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

@@ -1,11 +1,11 @@
 import "../../styles/field.css";
 import "./Switch.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-2-1", variantClassNames: { selected: { true: "_1tkc5xfb-3-2-1", false: "_1tkc5xfc-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-2-1", variantClassNames: { disabled: { true: "_1tkc5xf1-3-2-1" }, readOnly: { true: "_1tkc5xf2-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-2-1", variantClassNames: { disabled: { true: "_1tkc5xf4-3-2-1", false: "_1tkc5xf5-3-2-1" }, required: { true: "_1tkc5xf6-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfq-3-2-1";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-2-1", variantClassNames: { disabled: { true: "_1tkc5xfe-3-2-1", false: "_1tkc5xff-3-2-1" }, hasError: { true: "_1tkc5xfg-3-2-1", false: "_1tkc5xfh-3-2-1" }, color: { primary: "_1tkc5xfi-3-2-1", neutral: "_1tkc5xfj-3-2-1" }, isFocusVisible: { true: "_1tkc5xfk-3-2-1", false: "_1tkc5xfl-3-2-1" }, readOnly: { true: "_1tkc5xfm-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-2-1"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-2-1"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-2-1"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfa-3-3-0", variantClassNames: { selected: { true: "_1tkc5xfb-3-3-0", false: "_1tkc5xfc-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-3-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-3-0" }, readOnly: { true: "_1tkc5xf2-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-3-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-3-0", false: "_1tkc5xf5-3-3-0" }, required: { true: "_1tkc5xf6-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfq-3-3-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfd-3-3-0", variantClassNames: { disabled: { true: "_1tkc5xfe-3-3-0", false: "_1tkc5xff-3-3-0" }, hasError: { true: "_1tkc5xfg-3-3-0", false: "_1tkc5xfh-3-3-0" }, color: { primary: "_1tkc5xfi-3-3-0", neutral: "_1tkc5xfj-3-3-0" }, isFocusVisible: { true: "_1tkc5xfk-3-3-0", false: "_1tkc5xfl-3-3-0" }, readOnly: { true: "_1tkc5xfm-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfn-3-3-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfo-3-3-0"], [{ color: "neutral", disabled: true }, "_1tkc5xfp-3-3-0"]] });
 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 '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-2-1',variantClassNames:{selected:{true:'_1tkc5xfb-3-2-1',false:'_1tkc5xfc-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-2-1',variantClassNames:{disabled:{true:'_1tkc5xf1-3-2-1'},readOnly:{true:'_1tkc5xf2-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-2-1',variantClassNames:{disabled:{true:'_1tkc5xf4-3-2-1',false:'_1tkc5xf5-3-2-1'},required:{true:'_1tkc5xf6-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-2-1';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-2-1',variantClassNames:{disabled:{true:'_1tkc5xfe-3-2-1',false:'_1tkc5xff-3-2-1'},hasError:{true:'_1tkc5xfg-3-2-1',false:'_1tkc5xfh-3-2-1'},color:{primary:'_1tkc5xfi-3-2-1',neutral:'_1tkc5xfj-3-2-1'},isFocusVisible:{true:'_1tkc5xfk-3-2-1',false:'_1tkc5xfl-3-2-1'},readOnly:{true:'_1tkc5xfm-3-2-1'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-2-1'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-2-1'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-2-1']]});"],
+  "sourcesContent": ["import '../../styles/field.css';\nimport './Switch.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var switchIconCSS = _7a468({defaultClassName:'_1tkc5xfa-3-3-0',variantClassNames:{selected:{true:'_1tkc5xfb-3-3-0',false:'_1tkc5xfc-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-3-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-3-0'},readOnly:{true:'_1tkc5xf2-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-3-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-3-0',false:'_1tkc5xf5-3-3-0'},required:{true:'_1tkc5xf6-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfq-3-3-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfd-3-3-0',variantClassNames:{disabled:{true:'_1tkc5xfe-3-3-0',false:'_1tkc5xff-3-3-0'},hasError:{true:'_1tkc5xfg-3-3-0',false:'_1tkc5xfh-3-3-0'},color:{primary:'_1tkc5xfi-3-3-0',neutral:'_1tkc5xfj-3-3-0'},isFocusVisible:{true:'_1tkc5xfk-3-3-0',false:'_1tkc5xfl-3-3-0'},readOnly:{true:'_1tkc5xfm-3-3-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfn-3-3-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfo-3-3-0'],[{color:'neutral',disabled:true},'_1tkc5xfp-3-3-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpL,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,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtN,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,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-._44rwcl1-3-2-1 {
-  --_44rwcl0-3-2-1: 0px;
+._44rwcl1-3-3-0 {
+  --_44rwcl0-3-3-0: 0px;
   display: inline-flex;
   width: 100%;
   height: 100%;
@@ -11,28 +11,28 @@
   overflow: hidden;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._44rwcl1-3-2-1:focus-within {
-  --_44rwcl0-3-2-1: -2px;
+._44rwcl1-3-3-0:focus-within {
+  --_44rwcl0-3-3-0: -2px;
 }
-._44rwcl1-3-2-1::-webkit-resizer {
+._44rwcl1-3-3-0::-webkit-resizer {
   display: none;
 }
-._44rwcl2-3-2-1 {
+._44rwcl2-3-3-0 {
   width: fit-content;
 }
-._44rwcl3-3-2-1 {
+._44rwcl3-3-3-0 {
   resize: none;
 }
-._44rwcl4-3-2-1 {
+._44rwcl4-3-3-0 {
   resize: both;
 }
-._44rwcl5-3-2-1 {
+._44rwcl5-3-3-0 {
   resize: horizontal;
 }
-._44rwcl6-3-2-1 {
+._44rwcl6-3-3-0 {
   resize: vertical;
 }
-._44rwcl7-3-2-1 {
+._44rwcl7-3-3-0 {
   width: 100%;
   height: 100%;
   appearance: none;
@@ -52,80 +52,80 @@
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._44rwcl7-3-2-1::placeholder {
+._44rwcl7-3-3-0::placeholder {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._44rwcl7-3-2-1:hover {
+._44rwcl7-3-3-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._44rwcl7-3-2-1:active {
+._44rwcl7-3-3-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._44rwcl7-3-2-1:read-only {
+._44rwcl7-3-3-0:read-only {
   cursor: not-allowed;
 }
-._44rwcl8-3-2-1 {
+._44rwcl8-3-3-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcl8-3-2-1::placeholder {
+._44rwcl8-3-3-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcl8-3-2-1:hover {
+._44rwcl8-3-3-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl8-3-2-1:active {
+._44rwcl8-3-3-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcl9-3-2-1 {
+._44rwcl9-3-3-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-2-1::placeholder {
+._44rwcl9-3-3-0::placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcl9-3-2-1:hover {
+._44rwcl9-3-3-0:hover {
   background-color: var(--dt-colors-background-field-critical-emphasized-hover, #f6d6d5);
 }
-._44rwcl9-3-2-1:active {
+._44rwcl9-3-3-0:active {
   background-color: var(--dt-colors-background-field-critical-emphasized-active, #f5cac9);
 }
-._44rwcla-3-2-1 {
+._44rwcla-3-3-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._44rwcla-3-2-1::placeholder {
+._44rwcla-3-3-0::placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcla-3-2-1:hover {
+._44rwcla-3-3-0:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwcla-3-2-1:active {
+._44rwcla-3-3-0:active {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._44rwclb-3-2-1 {
+._44rwclb-3-3-0 {
   position: absolute;
   pointer-events: none;
   width: 16px;
   height: 16px;
   bottom: 0;
   right: 0;
-  transform: translateX(var(--_44rwcl0-3-2-1)) translateY(var(--_44rwcl0-3-2-1));
+  transform: translateX(var(--_44rwcl0-3-3-0)) translateY(var(--_44rwcl0-3-3-0));
   transition: transform var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._44rwclc-3-2-1 {
+._44rwclc-3-3-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._44rwcld-3-2-1 {
+._44rwcld-3-3-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._44rwcle-3-2-1 {
+._44rwcle-3-3-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
 @supports (-moz-appearance:none) {
-  ._44rwclb-3-2-1 {
+  ._44rwclb-3-3-0 {
     display: none;
   }
 }