@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/forms/spin-buttons/SpinButton.css

@@ -1,28 +1,28 @@
-._r47o0w1-3-4-0 {
+._r47o0w1-3-5-0 {
   display: inline-block;
   outline: none;
   caret-color: transparent;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._r47o0w1-3-4-0:empty::before {
+._r47o0w1-3-5-0:empty::before {
   content: var(--data-placeholder);
 }
-._r47o0w1-3-4-0:focus:empty {
+._r47o0w1-3-5-0:focus:empty {
   color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
   background-color: var(--dt-colors-background-field-neutral-accent, #5b5c81);
 }
-._r47o0w2-3-4-0 {
+._r47o0w2-3-5-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._r47o0w2-3-4-0:focus:empty {
+._r47o0w2-3-5-0:focus:empty {
   background-color: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._r47o0w3-3-4-0 {
+._r47o0w3-3-5-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._r47o0w3-3-4-0:empty::before {
+._r47o0w3-3-5-0:empty::before {
   color: var(--dt-colors-text-critical-on-accent-disabled, #f9f1f380);
 }
-._r47o0w4-3-4-0 {
+._r47o0w4-3-5-0 {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

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

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

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

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

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

@@ -11,6 +11,8 @@ function handleArrowLeft(event, prevSpinButton, currentSpinButton, selection, on
   } else if (currentSpinButton && selection === void 0) {
     currentSpinButton.selectAll();
     event.preventDefault();
+  } else if (!prevSpinButton && selection?.start === 0) {
+    event.preventDefault();
   }
 }
 function handleArrowRight(event, currentSpinButton, nextSpinButton, selection, length, onTrailingEdge) {
@@ -23,6 +25,8 @@ function handleArrowRight(event, currentSpinButton, nextSpinButton, selection, l
   } else if (currentSpinButton && selection === void 0) {
     currentSpinButton.selectAll();
     event.preventDefault();
+  } else if (!nextSpinButton && selection?.end === length) {
+    event.preventDefault();
   }
 }
 function handleDeletion(event, nextSpinButton, selection, length, onEdgeHandler) {
@@ -62,7 +66,7 @@ function handleTrailingTextAdvance(e, target, next, onTrailingEdge) {
 const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge) => {
   const onKeyDownHandler = useCallback(
     (e) => {
-      if (e.shiftKey === true || e.key === "Shift") {
+      if (e.key === "Shift") {
         return;
       }
       const handlers = spinButtonRefs.current.filter(Boolean);
@@ -79,19 +83,28 @@ const useNavigateSpinButton = (spinButtonRefs, triggerRefs, onLeadingEdge, onTra
       ];
       const length = target?.element?.current?.textContent?.length;
       const selection = target?.getSelection();
-      switch (e.key) {
-        case "ArrowLeft":
-          handleArrowLeft(e, prev, target, selection, onLeadingEdge);
-          return;
-        case "ArrowRight":
-          handleArrowRight(e, target, next, selection, length, onTrailingEdge);
-          return;
-        case "Backspace":
-          handleDeletion(e, prev, selection, length, onLeadingEdge);
-          return;
-        case "Delete":
-          handleDeletion(e, next, selection, length, onTrailingEdge);
-          return;
+      if (!e.shiftKey) {
+        switch (e.key) {
+          case "ArrowLeft":
+            handleArrowLeft(e, prev, target, selection, onLeadingEdge);
+            return;
+          case "ArrowRight":
+            handleArrowRight(
+              e,
+              target,
+              next,
+              selection,
+              length,
+              onTrailingEdge
+            );
+            return;
+          case "Backspace":
+            handleDeletion(e, prev, selection, length, onLeadingEdge);
+            return;
+          case "Delete":
+            handleDeletion(e, next, selection, length, onTrailingEdge);
+            return;
+        }
       }
       handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);
       handleTrailingTextAdvance(e, target, next, onTrailingEdge);

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 { SpinButtonTextSelection } from '../../types.js';\nimport type { SpinButtonHandler } from '../types.js';\n\nfunction handleArrowLeft(\n  event: ReactKeyboardEvent,\n  prevSpinButton: SpinButtonHandler | undefined,\n  currentSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  onLeadingEdge?: () => void,\n): void {\n  // Cursor is at the start and there is a previous spin button \u2014 move focus to it\n  if (prevSpinButton && selection?.start === 0) {\n    prevSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the start of the first spin button \u2014 notify the parent via callback\n  } else if (!prevSpinButton && onLeadingEdge && selection?.start === 0) {\n    onLeadingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n  }\n}\n\nfunction handleArrowRight(\n  event: ReactKeyboardEvent,\n  currentSpinButton: SpinButtonHandler | undefined,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  // Cursor is at the end and there is a next spin button \u2014 move focus to it\n  if (nextSpinButton && selection && selection.end === length) {\n    nextSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the end of the last spin button \u2014 notify the parent via callback\n  } else if (\n    !nextSpinButton &&\n    onTrailingEdge &&\n    selection &&\n    selection.end === length\n  ) {\n    onTrailingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n  }\n}\n\nfunction handleDeletion(\n  event: ReactKeyboardEvent,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onEdgeHandler?: () => void,\n): void {\n  // Only act when the spin button is empty (length === 0) and the cursor is collapsed\n  // at position 0. If the spin button still has content, do nothing here \u2014 the browser\n  // handles deleteContentForward on the non-collapsed selection produced by selectAll()\n  // on focus, clearing the spin button in one keystroke. The second Delete press then\n  // finds length === 0 and navigates to the next spin button.\n  if (!length && selection?.start === 0 && selection?.end === 0) {\n    if (nextSpinButton) {\n      // Navigate forward: focus the next spin button. selectAll() fires on focus,\n      // giving a non-collapsed selection so the first Delete press there clears\n      // content rather than immediately navigating again.\n      nextSpinButton.element.current?.focus();\n      event.preventDefault();\n    } else if (onEdgeHandler) {\n      // Last spin button is empty \u2014 notify parent.\n      onEdgeHandler();\n      event.preventDefault();\n    }\n  }\n}\n\n/**\n * Checks if the pressed key is a trigger for moving to the next spin button and moves\n * focus accordingly.\n */\nfunction handleTriggerNavigation(\n  e: ReactKeyboardEvent,\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  target: SpinButtonHandler,\n): void {\n  const lookupIndex = spinButtonRefs.current?.findIndex((h) => h === target);\n  const nextTriggerIndex = triggerRefs.current.findIndex(\n    (trigger, index) => trigger !== undefined && index > lookupIndex,\n  );\n\n  const afterTriggerSpinButton = spinButtonRefs.current?.find(\n    (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n  );\n  const trigger = triggerRefs.current[nextTriggerIndex];\n\n  if (trigger !== undefined && afterTriggerSpinButton && e.key === trigger) {\n    afterTriggerSpinButton.element.current?.focus();\n    e.preventDefault();\n  }\n}\n\n/**\n * If the user types a letter into a text spin button that has no next sibling spin button,\n * call the onTrailingEdge callback to allow moving focus to the next group.\n */\nfunction handleTrailingTextAdvance(\n  e: ReactKeyboardEvent,\n  target: SpinButtonHandler,\n  next: SpinButtonHandler | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  if (\n    target.type !== 'text' ||\n    next ||\n    !/^[a-zA-Z]$/.test(e.key) ||\n    e.metaKey ||\n    e.ctrlKey\n  ) {\n    return;\n  }\n\n  const match = target.searchValue(e.key);\n  if (match !== undefined) {\n    onTrailingEdge?.();\n  }\n}\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 */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  onLeadingEdge?: () => void,\n  onTrailingEdge?: () => void,\n) => {\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\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\n      switch (e.key) {\n        case 'ArrowLeft':\n          handleArrowLeft(e, prev, target, selection, onLeadingEdge);\n          return;\n        case 'ArrowRight':\n          handleArrowRight(e, target, next, selection, length, onTrailingEdge);\n          return;\n        case 'Backspace':\n          handleDeletion(e, prev, selection, length, onLeadingEdge);\n          return;\n        case 'Delete':\n          handleDeletion(e, next, selection, length, onTrailingEdge);\n          return;\n      }\n\n      handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);\n      handleTrailingTextAdvance(e, target, next, onTrailingEdge);\n    },\n    [spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useCallback,\n  type MutableRefObject,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { SpinButtonHandler } from '../types.js';\n\nfunction handleArrowLeft(\n  event: ReactKeyboardEvent,\n  prevSpinButton: SpinButtonHandler | undefined,\n  currentSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  onLeadingEdge?: () => void,\n): void {\n  // Cursor is at the start and there is a previous spin button \u2014 move focus to it\n  if (prevSpinButton && selection?.start === 0) {\n    prevSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the start of the first spin button \u2014 notify the parent via callback\n  } else if (!prevSpinButton && onLeadingEdge && selection?.start === 0) {\n    onLeadingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the leading edge with no callback (e.g. the very first spin button of\n    // a DateTimeRangePicker FROM input). Without preventDefault, Firefox would\n    // shrink the selectAll'd range one character at a time on each press,\n    // forcing the user to press ArrowLeft N times before anything changes.\n  } else if (!prevSpinButton && selection?.start === 0) {\n    event.preventDefault();\n  }\n}\n\nfunction handleArrowRight(\n  event: ReactKeyboardEvent,\n  currentSpinButton: SpinButtonHandler | undefined,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  // Cursor is at the end and there is a next spin button \u2014 move focus to it\n  if (nextSpinButton && selection && selection.end === length) {\n    nextSpinButton.element.current?.focus();\n    event.preventDefault();\n    // Cursor is at the end of the last spin button \u2014 notify the parent via callback\n  } else if (\n    !nextSpinButton &&\n    onTrailingEdge &&\n    selection &&\n    selection.end === length\n  ) {\n    onTrailingEdge();\n    event.preventDefault();\n    // No selection state available (e.g. spin button just received focus) \u2014 select all its content\n  } else if (currentSpinButton && selection === undefined) {\n    currentSpinButton.selectAll();\n    event.preventDefault();\n    // At the trailing edge with no callback (e.g. the very last spin button of\n    // a DateTimeRangePicker TO input). Block Firefox's shrink-by-one default\n    // behaviour so the selectAll'd range stays put on each press.\n  } else if (!nextSpinButton && selection?.end === length) {\n    event.preventDefault();\n  }\n}\n\nfunction handleDeletion(\n  event: ReactKeyboardEvent,\n  nextSpinButton: SpinButtonHandler | undefined,\n  selection: SpinButtonTextSelection | undefined,\n  length: number | undefined,\n  onEdgeHandler?: () => void,\n): void {\n  // Only act when the spin button is empty (length === 0) and the cursor is collapsed\n  // at position 0. If the spin button still has content, do nothing here \u2014 the browser\n  // handles deleteContentForward on the non-collapsed selection produced by selectAll()\n  // on focus, clearing the spin button in one keystroke. The second Delete press then\n  // finds length === 0 and navigates to the next spin button.\n  if (!length && selection?.start === 0 && selection?.end === 0) {\n    if (nextSpinButton) {\n      // Navigate forward: focus the next spin button. selectAll() fires on focus,\n      // giving a non-collapsed selection so the first Delete press there clears\n      // content rather than immediately navigating again.\n      nextSpinButton.element.current?.focus();\n      event.preventDefault();\n    } else if (onEdgeHandler) {\n      // Last spin button is empty \u2014 notify parent.\n      onEdgeHandler();\n      event.preventDefault();\n    }\n  }\n}\n\n/**\n * Checks if the pressed key is a trigger for moving to the next spin button and moves\n * focus accordingly.\n */\nfunction handleTriggerNavigation(\n  e: ReactKeyboardEvent,\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  target: SpinButtonHandler,\n): void {\n  const lookupIndex = spinButtonRefs.current?.findIndex((h) => h === target);\n  const nextTriggerIndex = triggerRefs.current.findIndex(\n    (trigger, index) => trigger !== undefined && index > lookupIndex,\n  );\n\n  const afterTriggerSpinButton = spinButtonRefs.current?.find(\n    (spinbutton, index) => spinbutton && index > nextTriggerIndex,\n  );\n  const trigger = triggerRefs.current[nextTriggerIndex];\n\n  if (trigger !== undefined && afterTriggerSpinButton && e.key === trigger) {\n    afterTriggerSpinButton.element.current?.focus();\n    e.preventDefault();\n  }\n}\n\n/**\n * If the user types a letter into a text spin button that has no next sibling spin button,\n * call the onTrailingEdge callback to allow moving focus to the next group.\n */\nfunction handleTrailingTextAdvance(\n  e: ReactKeyboardEvent,\n  target: SpinButtonHandler,\n  next: SpinButtonHandler | undefined,\n  onTrailingEdge?: () => void,\n): void {\n  if (\n    target.type !== 'text' ||\n    next ||\n    !/^[a-zA-Z]$/.test(e.key) ||\n    e.metaKey ||\n    e.ctrlKey\n  ) {\n    return;\n  }\n\n  const match = target.searchValue(e.key);\n  if (match !== undefined) {\n    onTrailingEdge?.();\n  }\n}\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 */\nexport const useNavigateSpinButton = (\n  spinButtonRefs: MutableRefObject<SpinButtonHandler[]>,\n  triggerRefs: MutableRefObject<string[]>,\n  onLeadingEdge?: () => void,\n  onTrailingEdge?: () => void,\n) => {\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.key === 'Shift') {\n        return;\n      }\n\n      const handlers = spinButtonRefs.current.filter(Boolean);\n      const index = handlers?.findIndex(\n        ({ element }) => element?.current === e?.target,\n      );\n\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\n      if (!e.shiftKey) {\n        switch (e.key) {\n          case 'ArrowLeft':\n            handleArrowLeft(e, prev, target, selection, onLeadingEdge);\n            return;\n          case 'ArrowRight':\n            handleArrowRight(\n              e,\n              target,\n              next,\n              selection,\n              length,\n              onTrailingEdge,\n            );\n            return;\n          case 'Backspace':\n            handleDeletion(e, prev, selection, length, onLeadingEdge);\n            return;\n          case 'Delete':\n            handleDeletion(e, next, selection, length, onTrailingEdge);\n            return;\n        }\n      }\n\n      handleTriggerNavigation(e, spinButtonRefs, triggerRefs, target);\n      handleTrailingTextAdvance(e, target, next, onTrailingEdge);\n    },\n    [spinButtonRefs, triggerRefs, onLeadingEdge, onTrailingEdge],\n  );\n\n  return { onKeyDownHandler };\n};\n"],
+  "mappings": "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",
   "names": ["trigger"]
 }

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

@@ -61,6 +61,10 @@ function handleValueOverflow({
       }
       return;
     }
+    currentHandler.applyText(candidate, true);
+    event.preventDefault();
+    currentHandler.selectAll();
+    return;
   }
   if (isNumericOverflow && candidate.length === maxNrOfDigits && candidateValue > maxValue && hasNextInGroup) {
     event.preventDefault();

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\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 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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",
   "names": []
 }

package/esm/forms/spin-buttons/text-spin-button/hooks/useValueNavigation.js

@@ -85,31 +85,25 @@ const useValueNavigation = (props) => {
   );
   const onKeyDownHandler = useCallback(
     (e) => {
-      if (e.shiftKey === true || e.key === "Shift") {
+      if (disabled || readOnly) {
         return;
       }
-      if (disabled || readOnly) {
+      const navigationHandlers = {
+        ArrowUp: onArrowUp,
+        ArrowDown: onArrowDown,
+        PageUp: onPageUp,
+        PageDown: onPageDown,
+        Home: onHome,
+        End: onEnd
+      };
+      const navHandler = navigationHandlers[e.key];
+      if (navHandler) {
+        if (!e.shiftKey && e.key !== "Shift") {
+          handleValueNavigation(navHandler, e);
+        }
         return;
       }
       switch (e.key) {
-        case "ArrowUp":
-          handleValueNavigation(onArrowUp, e);
-          break;
-        case "ArrowDown":
-          handleValueNavigation(onArrowDown, e);
-          break;
-        case "PageUp":
-          handleValueNavigation(onPageUp, e);
-          break;
-        case "PageDown":
-          handleValueNavigation(onPageDown, e);
-          break;
-        case "Home":
-          handleValueNavigation(onHome, e);
-          break;
-        case "End":
-          handleValueNavigation(onEnd, e);
-          break;
         case "Backspace":
         case "Delete":
           if (value !== null) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/text-spin-button/hooks/useValueNavigation.tsx"],
-  "sourcesContent": ["import {\n  type FormEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { constrainValue } from '../../helper.js';\nimport { TEXT_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport type { TextSpinButtonProps } from '../types.js';\n\n/** @internal */\nexport const useValueNavigation = (props: TextSpinButtonProps) => {\n  // Set default keyboard behavior if undefined.\n  const {\n    options,\n    onArrowUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (_, e) => {\n      e.preventDefault();\n      return 0;\n    },\n    onEnd = (_, e) => {\n      e.preventDefault();\n      return options.length - 1;\n    },\n    disabled,\n    readOnly,\n    defaultValue = TEXT_SPIN_BUTTON_DEFAULTS.VALUE,\n    value: valueProp,\n    onChange,\n    isCyclic,\n  } = props;\n\n  const [value, setValue] = useState(valueProp ?? defaultValue);\n\n  // Update value to the result of the given transform function.\n  const handleValueNavigation = useCallback(\n    (\n      transform: (curIndex: number, e: FormEvent) => number,\n      event: FormEvent,\n    ) => {\n      const sanitized = (idx: number) => {\n        const maxIndex = options.length - 1;\n        return constrainValue(idx, 0, maxIndex, isCyclic) ?? 0;\n      };\n\n      // if nothing was selected, start with the first configured value\n      const curIndex =\n        value === null ? 0 : options.indexOf(value || valueProp || '');\n      const newIndex = sanitized(transform(curIndex, event));\n      const newValue = options[newIndex];\n\n      if (value !== newValue) {\n        setValue(newValue);\n        onChange?.(newValue);\n      }\n    },\n    [value, options, valueProp, onChange, isCyclic],\n  );\n\n  // Lookup table for faster search\n  const lookupTable = useMemo(\n    () => options.map((v) => v[0].toLowerCase()),\n    [options],\n  );\n\n  // For a given key, scan lookup table and update the value accordingly.\n  const searchValue = useCallback(\n    (key: string, fireOnChange = false) => {\n      const idx = lookupTable.indexOf(key.toLowerCase());\n      if (idx < 0) {\n        return undefined;\n      }\n\n      const newValue = options[idx];\n      if (value !== newValue) {\n        setValue(newValue);\n      }\n\n      fireOnChange && onChange?.(newValue);\n\n      return newValue;\n    },\n    [lookupTable, options, value, onChange],\n  );\n\n  const clearValue = useCallback(\n    (fireOnChange = false) => {\n      setValue(null);\n      fireOnChange && onChange?.(null);\n    },\n    [onChange],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (e.shiftKey === true || e.key === 'Shift') {\n        return;\n      }\n\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n      switch (e.key) {\n        case 'ArrowUp':\n          handleValueNavigation(onArrowUp, e);\n          break;\n        case 'ArrowDown':\n          handleValueNavigation(onArrowDown, e);\n          break;\n        case 'PageUp':\n          handleValueNavigation(onPageUp, e);\n          break;\n        case 'PageDown':\n          handleValueNavigation(onPageDown, e);\n          break;\n        case 'Home':\n          handleValueNavigation(onHome, e);\n          break;\n        case 'End':\n          handleValueNavigation(onEnd, e);\n          break;\n        case 'Backspace':\n        case 'Delete':\n          if (value !== null) {\n            setValue(null);\n            onChange?.(null);\n          }\n          e.preventDefault();\n          break;\n        default:\n          // If a character key was pressed, look for a value starting with the char.\n          if (!e.metaKey && !e.ctrlKey && e.key.match(/^\\w$/)) {\n            const newValue = searchValue(e.key);\n            if (newValue !== undefined && newValue !== value) {\n              onChange?.(newValue);\n            }\n            e.preventDefault();\n          }\n          break;\n      }\n    },\n    [\n      disabled,\n      handleValueNavigation,\n      onArrowDown,\n      onArrowUp,\n      onChange,\n      onEnd,\n      onHome,\n      onPageDown,\n      onPageUp,\n      readOnly,\n      searchValue,\n      setValue,\n      value,\n    ],\n  );\n\n  useEffect(() => {\n    // update value if component is in controlled mode\n    if (valueProp !== undefined) {\n      setValue(valueProp);\n    }\n  }, [setValue, valueProp]);\n\n  return { value, onKeyDownHandler, searchValue, clearValue };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type FormEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { constrainValue } from '../../helper.js';\nimport { TEXT_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport type { TextSpinButtonProps } from '../types.js';\n\n/** @internal */\nexport const useValueNavigation = (props: TextSpinButtonProps) => {\n  // Set default keyboard behavior if undefined.\n  const {\n    options,\n    onArrowUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onArrowDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.SMALL_STEP;\n    },\n    onPageUp = (idx, e) => {\n      e.preventDefault();\n      return idx - TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onPageDown = (idx, e) => {\n      e.preventDefault();\n      return idx + TEXT_SPIN_BUTTON_DEFAULTS.BIG_STEP;\n    },\n    onHome = (_, e) => {\n      e.preventDefault();\n      return 0;\n    },\n    onEnd = (_, e) => {\n      e.preventDefault();\n      return options.length - 1;\n    },\n    disabled,\n    readOnly,\n    defaultValue = TEXT_SPIN_BUTTON_DEFAULTS.VALUE,\n    value: valueProp,\n    onChange,\n    isCyclic,\n  } = props;\n\n  const [value, setValue] = useState(valueProp ?? defaultValue);\n\n  // Update value to the result of the given transform function.\n  const handleValueNavigation = useCallback(\n    (\n      transform: (curIndex: number, e: FormEvent) => number,\n      event: FormEvent,\n    ) => {\n      const sanitized = (idx: number) => {\n        const maxIndex = options.length - 1;\n        return constrainValue(idx, 0, maxIndex, isCyclic) ?? 0;\n      };\n\n      // if nothing was selected, start with the first configured value\n      const curIndex =\n        value === null ? 0 : options.indexOf(value || valueProp || '');\n      const newIndex = sanitized(transform(curIndex, event));\n      const newValue = options[newIndex];\n\n      if (value !== newValue) {\n        setValue(newValue);\n        onChange?.(newValue);\n      }\n    },\n    [value, options, valueProp, onChange, isCyclic],\n  );\n\n  // Lookup table for faster search\n  const lookupTable = useMemo(\n    () => options.map((v) => v[0].toLowerCase()),\n    [options],\n  );\n\n  // For a given key, scan lookup table and update the value accordingly.\n  const searchValue = useCallback(\n    (key: string, fireOnChange = false) => {\n      const idx = lookupTable.indexOf(key.toLowerCase());\n      if (idx < 0) {\n        return undefined;\n      }\n\n      const newValue = options[idx];\n      if (value !== newValue) {\n        setValue(newValue);\n      }\n\n      fireOnChange && onChange?.(newValue);\n\n      return newValue;\n    },\n    [lookupTable, options, value, onChange],\n  );\n\n  const clearValue = useCallback(\n    (fireOnChange = false) => {\n      setValue(null);\n      fireOnChange && onChange?.(null);\n    },\n    [onChange],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (disabled || readOnly) {\n        // Prevent any value changes via keys, but don't prevent the default behavior.\n        return;\n      }\n\n      const navigationHandlers = {\n        ArrowUp: onArrowUp,\n        ArrowDown: onArrowDown,\n        PageUp: onPageUp,\n        PageDown: onPageDown,\n        Home: onHome,\n        End: onEnd,\n      };\n\n      const navHandler =\n        navigationHandlers[e.key as keyof typeof navigationHandlers];\n      if (navHandler) {\n        if (!e.shiftKey && e.key !== 'Shift') {\n          handleValueNavigation(navHandler, e);\n        }\n        return;\n      }\n\n      switch (e.key) {\n        case 'Backspace':\n        case 'Delete':\n          if (value !== null) {\n            setValue(null);\n            onChange?.(null);\n          }\n          e.preventDefault();\n          break;\n        default:\n          // If a character key was pressed, look for a value starting with the char.\n          if (!e.metaKey && !e.ctrlKey && e.key.match(/^\\w$/)) {\n            const newValue = searchValue(e.key);\n            if (newValue !== undefined && newValue !== value) {\n              onChange?.(newValue);\n            }\n            e.preventDefault();\n          }\n          break;\n      }\n    },\n    [\n      disabled,\n      handleValueNavigation,\n      onArrowDown,\n      onArrowUp,\n      onChange,\n      onEnd,\n      onHome,\n      onPageDown,\n      onPageUp,\n      readOnly,\n      searchValue,\n      setValue,\n      value,\n    ],\n  );\n\n  useEffect(() => {\n    // update value if component is in controlled mode\n    if (valueProp !== undefined) {\n      setValue(valueProp);\n    }\n  }, [setValue, valueProp]);\n\n  return { value, onKeyDownHandler, searchValue, clearValue };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/switch/Switch.css

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

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-4-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-4-0", false: "_1tkc5xfd-3-4-0" }, readOnly: { true: "_1tkc5xfe-3-4-0" }, hasError: { true: "_1tkc5xff-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-4-0"]] });
-var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-4-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-4-0" }, readOnly: { true: "_1tkc5xf2-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-4-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-4-0", false: "_1tkc5xf5-3-4-0" }, required: { true: "_1tkc5xf6-3-4-0" }, readOnly: { true: "_1tkc5xf7-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var switchThumbCSS = "_1tkc5xfw-3-4-0";
-var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-4-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-4-0", false: "_1tkc5xfj-3-4-0" }, hasError: { true: "_1tkc5xfk-3-4-0", false: "_1tkc5xfl-3-4-0" }, color: { primary: "_1tkc5xfm-3-4-0", neutral: "_1tkc5xfn-3-4-0" }, isFocusVisible: { true: "_1tkc5xfo-3-4-0", false: "_1tkc5xfp-3-4-0" }, readOnly: { true: "_1tkc5xfq-3-4-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-4-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-4-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-4-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-4-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-4-0"]] });
+var switchIconCSS = _7a468({ defaultClassName: "_1tkc5xfb-3-5-0", variantClassNames: { selected: { true: "_1tkc5xfc-3-5-0", false: "_1tkc5xfd-3-5-0" }, readOnly: { true: "_1tkc5xfe-3-5-0" }, hasError: { true: "_1tkc5xff-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ hasError: true, readOnly: true }, "_1tkc5xfg-3-5-0"]] });
+var switchLabelCSS = _7a468({ defaultClassName: "_1tkc5xf0-3-5-0", variantClassNames: { disabled: { true: "_1tkc5xf1-3-5-0" }, readOnly: { true: "_1tkc5xf2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchTextCSS = _7a468({ defaultClassName: "_1tkc5xf3-3-5-0", variantClassNames: { disabled: { true: "_1tkc5xf4-3-5-0", false: "_1tkc5xf5-3-5-0" }, required: { true: "_1tkc5xf6-3-5-0" }, readOnly: { true: "_1tkc5xf7-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var switchThumbCSS = "_1tkc5xfw-3-5-0";
+var switchWrapperCSS = _7a468({ defaultClassName: "_1tkc5xfh-3-5-0", variantClassNames: { disabled: { true: "_1tkc5xfi-3-5-0", false: "_1tkc5xfj-3-5-0" }, hasError: { true: "_1tkc5xfk-3-5-0", false: "_1tkc5xfl-3-5-0" }, color: { primary: "_1tkc5xfm-3-5-0", neutral: "_1tkc5xfn-3-5-0" }, isFocusVisible: { true: "_1tkc5xfo-3-5-0", false: "_1tkc5xfp-3-5-0" }, readOnly: { true: "_1tkc5xfq-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "neutral", disabled: false, hasError: true, isFocusVisible: false }, "_1tkc5xfr-3-5-0"], [{ color: "neutral", disabled: false, hasError: false, isFocusVisible: false }, "_1tkc5xfs-3-5-0"], [{ color: "neutral", disabled: true }, "_1tkc5xft-3-5-0"], [{ readOnly: true, hasError: false }, "_1tkc5xfu-3-5-0"], [{ readOnly: true, hasError: true }, "_1tkc5xfv-3-5-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 '../../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-4-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-4-0',false:'_1tkc5xfd-3-4-0'},readOnly:{true:'_1tkc5xfe-3-4-0'},hasError:{true:'_1tkc5xff-3-4-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-4-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-4-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-4-0'},readOnly:{true:'_1tkc5xf2-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-4-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-4-0',false:'_1tkc5xf5-3-4-0'},required:{true:'_1tkc5xf6-3-4-0'},readOnly:{true:'_1tkc5xf7-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-4-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-4-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-4-0',false:'_1tkc5xfj-3-4-0'},hasError:{true:'_1tkc5xfk-3-4-0',false:'_1tkc5xfl-3-4-0'},color:{primary:'_1tkc5xfm-3-4-0',neutral:'_1tkc5xfn-3-4-0'},isFocusVisible:{true:'_1tkc5xfo-3-4-0',false:'_1tkc5xfp-3-4-0'},readOnly:{true:'_1tkc5xfq-3-4-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-4-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-4-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-4-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-4-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-4-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-5-0',variantClassNames:{selected:{true:'_1tkc5xfc-3-5-0',false:'_1tkc5xfd-3-5-0'},readOnly:{true:'_1tkc5xfe-3-5-0'},hasError:{true:'_1tkc5xff-3-5-0'}},defaultVariants:{},compoundVariants:[[{hasError:true,readOnly:true},'_1tkc5xfg-3-5-0']]});\nexport var switchLabelCSS = _7a468({defaultClassName:'_1tkc5xf0-3-5-0',variantClassNames:{disabled:{true:'_1tkc5xf1-3-5-0'},readOnly:{true:'_1tkc5xf2-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchTextCSS = _7a468({defaultClassName:'_1tkc5xf3-3-5-0',variantClassNames:{disabled:{true:'_1tkc5xf4-3-5-0',false:'_1tkc5xf5-3-5-0'},required:{true:'_1tkc5xf6-3-5-0'},readOnly:{true:'_1tkc5xf7-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var switchThumbCSS = '_1tkc5xfw-3-5-0';\nexport var switchWrapperCSS = _7a468({defaultClassName:'_1tkc5xfh-3-5-0',variantClassNames:{disabled:{true:'_1tkc5xfi-3-5-0',false:'_1tkc5xfj-3-5-0'},hasError:{true:'_1tkc5xfk-3-5-0',false:'_1tkc5xfl-3-5-0'},color:{primary:'_1tkc5xfm-3-5-0',neutral:'_1tkc5xfn-3-5-0'},isFocusVisible:{true:'_1tkc5xfo-3-5-0',false:'_1tkc5xfp-3-5-0'},readOnly:{true:'_1tkc5xfq-3-5-0'}},defaultVariants:{},compoundVariants:[[{color:'neutral',disabled:false,hasError:true,isFocusVisible:false},'_1tkc5xfr-3-5-0'],[{color:'neutral',disabled:false,hasError:false,isFocusVisible:false},'_1tkc5xfs-3-5-0'],[{color:'neutral',disabled:true},'_1tkc5xft-3-5-0'],[{readOnly:true,hasError:false},'_1tkc5xfu-3-5-0'],[{readOnly:true,hasError:true},'_1tkc5xfv-3-5-0']]});"],
   "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": []
 }