@dynatrace/strato-components 3.13.2 → 3.14.0

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

package/esm/forms/spin-buttons/helper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/spin-buttons/helper.ts"],
-  "sourcesContent": ["/**\n * Constrain a value by clamping it within the specified range.\n * If `isCyclic` is true, the value will wrap around when it exceeds the bounds.\n */\nexport function constrainValue(\n  value: number | null,\n  minValue?: number,\n  maxValue?: number,\n  isCyclic: boolean = false,\n): number | null {\n  if (value === null) {\n    return value;\n  }\n\n  if (minValue !== undefined && value < minValue) {\n    return isCyclic ? maxValue ?? minValue : minValue;\n  }\n\n  if (maxValue !== undefined && value > maxValue) {\n    return isCyclic ? minValue ?? maxValue : maxValue;\n  }\n\n  return value;\n}\n"],
-  "mappings": "AAIO,SAAS,eACd,OACA,UACA,UACA,WAAoB,OACL;AACf,MAAI,UAAU,MAAM;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,aAAa,UAAa,QAAQ,UAAU;AAC9C,WAAO,WAAW,YAAY,WAAW;AAAA,EAC3C;AAEA,MAAI,aAAa,UAAa,QAAQ,UAAU;AAC9C,WAAO,WAAW,YAAY,WAAW;AAAA,EAC3C;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * Constrain a value by clamping it within the specified range.\n * If `isCyclic` is true, the value will wrap around when it exceeds the bounds.\n */\nexport function constrainValue(\n  value: number | null,\n  minValue?: number,\n  maxValue?: number,\n  isCyclic: boolean = false,\n): number | null {\n  if (value === null) {\n    return value;\n  }\n\n  if (minValue !== undefined && value < minValue) {\n    return isCyclic ? (maxValue ?? minValue) : minValue;\n  }\n\n  if (maxValue !== undefined && value > maxValue) {\n    return isCyclic ? (minValue ?? maxValue) : maxValue;\n  }\n\n  return value;\n}\n"],
+  "mappings": "AAIO,SAAS,eACd,OACA,UACA,UACA,WAAoB,OACL;AACf,MAAI,UAAU,MAAM;AAClB,WAAO;AAAA,EACT;AAEA,MAAI,aAAa,UAAa,QAAQ,UAAU;AAC9C,WAAO,WAAY,YAAY,WAAY;AAAA,EAC7C;AAEA,MAAI,aAAa,UAAa,QAAQ,UAAU;AAC9C,WAAO,WAAY,YAAY,WAAY;AAAA,EAC7C;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/number-spin-button/hooks/useBeforeInputHandler.ts"],
-  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { NumberSpinButtonProps } from '../types.js';\n\nconst reNumber = new RegExp('^-?\\\\d*$');\nconst reNonNegativeNumber = new RegExp('^\\\\d*$');\n\n/**\n * Returns the number of digits for a given value.\n * If the number is negative, add an additional character for the sign\n */\nfunction getNrOfDigits(value: number) {\n  return value < 0\n    ? 2 + Math.floor(Math.log10(Math.abs(value)))\n    : 1 + Math.floor(Math.log10(value));\n}\n\n/**\n * Processes the given value for provided input type and selection.\n */\nfunction processInputEvent(\n  value: string,\n  inputType: string,\n  selection: SpinButtonTextSelection,\n  subsitute: string,\n) {\n  const collapsed = selection.start === selection.end;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      return (\n        value.substring(0, selection.start) +\n        subsitute +\n        value.substring(selection.end)\n      );\n    case 'deleteByCut':\n      return (\n        value.substring(0, selection.start) + value.substring(selection.end)\n      );\n    case 'deleteContentBackward':\n      return collapsed\n        ? value.substring(0, selection.start - 1) +\n            value.substring(selection.end)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'deleteContentForward':\n      return collapsed\n        ? value.substring(0, selection.start) +\n            value.substring(selection.end + 1)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'insertCompositionText':\n      return value;\n    case 'deleteByDrag':\n    case 'insertFromDrop':\n    default:\n      // Ignore drag&drop and other unknown input types for now.\n      return undefined;\n  }\n}\n\n/**\n * Calculates a candidate value based on the source text, the current selection and the input type.\n */\nfunction getCandidate(\n  text: string,\n  domText: string,\n  selection: SpinButtonTextSelection,\n  inputType: string,\n  substitute: string,\n  formatLength: number,\n) {\n  // If padding is enabled, calculate the nr. of padding slots.\n  const candidateOffset =\n    formatLength > 0 ? Math.max(formatLength - text.length, 0) : 0;\n\n  // Trying to forwardDelete a padding character should not change anything.\n  if (\n    selection.start < candidateOffset &&\n    inputType === 'deleteContentForward'\n  ) {\n    return undefined;\n  }\n\n  // Use domtext instead of text as candidate input, if content edit happens within the padding area\n  const useDomText =\n    selection.start < candidateOffset &&\n    (inputType === 'insertText' || inputType === 'insertFromPaste');\n\n  // If the domtext is used, only take the part right of the cursor as value.\n  // This makes modifying the text within the padding area feel more natural.\n  const value = useDomText ? domText.substring(selection.end) : text;\n\n  // Offset the selection position.\n  const candidateSelection: SpinButtonTextSelection = {\n    start: Math.max(selection.start - candidateOffset, 0),\n    end: Math.max(selection.end - candidateOffset, 0),\n  };\n\n  // Process the input event and get the actual candidate.\n  return processInputEvent(value, inputType, candidateSelection, substitute);\n}\n\n/**\n * Calculates a new cursor position for a given input event, selection and padding.\n */\nfunction getNewSelection(\n  selection: SpinButtonTextSelection,\n  candidate: string,\n  substitute: string,\n  inputType: string,\n  formatLength: number,\n) {\n  // Right align mode is only active, if padding is enabled and if the candidate still fits within the padded length.\n  const rightAlign = formatLength > 0 && candidate.length <= formatLength;\n  const collapsed = selection.start === selection.end;\n\n  let curserPos = 0;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      // For right aligned mode, keep the cursor position at the end of the selection.\n      // For left aligned mode, set the cursor to the end of the inserted text.\n      curserPos = rightAlign\n        ? selection.end\n        : selection.start + substitute.length;\n      break;\n    case 'deleteContentBackward':\n      // For right aligned mode, keep the cursor postion at the end of the selection.\n      // For left aligned mode and if the selection is not collapsed, keep the cursor position. Otherwise move the cursor left.\n      curserPos = rightAlign\n        ? selection.end\n        : collapsed\n        ? selection.start - 1\n        : selection.start;\n      break;\n    case 'deleteContentForward':\n      // For right aligned mode, if the selection is not collapsed, keep the cursor position. Otherwise move the cursor right.\n      // For left aligned mode, keep the cursor postion at the start of the selection.\n      curserPos = rightAlign\n        ? collapsed\n          ? selection.start + 1\n          : selection.end\n        : selection.start;\n      break;\n    case 'deleteByCut':\n      // Based on the writing mode, keep the cursor at either the left or right bound of the current seletion\n      curserPos = rightAlign ? selection.end : selection.start;\n  }\n\n  return {\n    start: curserPos,\n    end: curserPos,\n  } as SpinButtonTextSelection;\n}\n\n/**\n * Hook to provide input validation using the native onBeforeInput method.\n */\nexport const useBeforeInputHandler = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText: (value: string, fireOnChange?: boolean) => void,\n  text: string,\n) => {\n  const {\n    onBeforeInput,\n    displayFormat: { length: formatLength = 0 } = {},\n    readOnly,\n    disabled,\n    onChange,\n    minValue = Number.MIN_SAFE_INTEGER,\n    maxValue = Number.MAX_SAFE_INTEGER,\n  } = props;\n\n  const { getSelection, setSelection } = useSelection(ref);\n  const { parse, format } = useValidationAndFormatting(\n    props.displayFormat,\n    props.required,\n    minValue,\n    maxValue,\n  );\n\n  /** This callback validates generic number min/max and length constraints. */\n  const defaultOnBeforeInput = useCallback(\n    (candidate: string, event: InputEvent) => {\n      // Reject candidate if it's not a valid integer.\n      // Only allow leading -, if negative values are allowed.\n      const isInteger =\n        minValue < 0\n          ? reNumber.test(candidate)\n          : reNonNegativeNumber.test(candidate);\n\n      if (!isInteger) {\n        event.preventDefault();\n        return;\n      }\n\n      const value = parse(candidate);\n      if (value === null) {\n        //  nothing else to check\n        return;\n      }\n\n      // Calculate max nr. of digits for a given min or max value.\n      const maxLength =\n        value < 0 ? getNrOfDigits(minValue) : getNrOfDigits(maxValue);\n\n      // Ignore candidates longer than this limit.\n      if (candidate.length > maxLength) {\n        event.preventDefault();\n        return;\n      }\n\n      // Don't allow to enter a value > maxValue for a positive value,\n      // and vice versa for negative ones.\n      if (value < 0 ? value < minValue : value > maxValue) {\n        event.preventDefault();\n        return;\n      }\n    },\n    [maxValue, minValue, parse],\n  );\n\n  /**\n   * This callback validates the input against optional external and internal constraints and initializes the expected selection.\n   */\n  const beforeInputHandler = useCallback(\n    (event: InputEvent) => {\n      if (disabled || readOnly) {\n        event.preventDefault();\n        return;\n      }\n      const selection = getSelection();\n\n      // Nothing to change if selection/cursor is not within the current spinbutton.\n      if (!selection) {\n        event.preventDefault();\n        return;\n      }\n\n      const domText = ref?.current?.textContent ?? '';\n\n      // If data is comming from the clipboard, strip formatting and use plain text version as substitute.\n      const substitute =\n        event.data ?? event.dataTransfer?.getData('text/plain') ?? '';\n\n      // Calculate a candidate for given input event and configuration.\n      const candidate = getCandidate(\n        text,\n        domText,\n        selection,\n        event.inputType,\n        substitute,\n        formatLength,\n      );\n\n      // If no candidate could be created, ignore the event.\n      if (candidate === undefined) {\n        event.preventDefault();\n        return;\n      }\n\n      // Validate against an optional external candidate validation.\n      // Break early if validation fails.\n      onBeforeInput?.(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Validate using the internal constraints.\n      // Break early if validation fails.\n      defaultOnBeforeInput(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Calculate the new cursor position.\n      const newSelection =\n        domText === '' || domText === '-'\n          ? { start: 0, end: 0, rtl: true } // Use last possible cursor position. (Necessary if padding is enabled)\n          : getNewSelection(\n              selection,\n              candidate,\n              substitute,\n              event.inputType,\n              formatLength,\n            );\n\n      // Set the internal state and dom text, then update the cursor position.\n      applyText(candidate);\n      setSelection(newSelection);\n\n      // Workaround to prevent/revert dead key inputs\n      if (event.inputType === 'insertCompositionText') {\n        setTimeout(() => {\n          if (ref?.current) {\n            // Update original text content and selection\n            ref.current.textContent = format(text);\n            setTimeout(() => setSelection(selection), 0);\n          }\n        }, 0);\n      }\n\n      // Invoke onChange callback if available\n      const newValue = parse(candidate);\n      props.value !== newValue && onChange?.(newValue);\n      event.preventDefault();\n    },\n    [\n      disabled,\n      readOnly,\n      getSelection,\n      ref,\n      text,\n      formatLength,\n      onBeforeInput,\n      defaultOnBeforeInput,\n      applyText,\n      setSelection,\n      parse,\n      props.value,\n      onChange,\n      format,\n    ],\n  );\n\n  return beforeInputHandler;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useCallback, type RefObject } from 'react';\n\nimport { useValidationAndFormatting } from './useValidationAndFormatting.js';\nimport { useSelection } from '../../hooks/useSelection.js';\nimport type { SpinButtonTextSelection } from '../../types.js';\nimport type { NumberSpinButtonProps } from '../types.js';\n\nconst reNumber = new RegExp('^-?\\\\d*$');\nconst reNonNegativeNumber = new RegExp('^\\\\d*$');\n\n/**\n * Returns the number of digits for a given value.\n * If the number is negative, add an additional character for the sign\n */\nfunction getNrOfDigits(value: number) {\n  return value < 0\n    ? 2 + Math.floor(Math.log10(Math.abs(value)))\n    : 1 + Math.floor(Math.log10(value));\n}\n\n/**\n * Processes the given value for provided input type and selection.\n */\nfunction processInputEvent(\n  value: string,\n  inputType: string,\n  selection: SpinButtonTextSelection,\n  subsitute: string,\n) {\n  const collapsed = selection.start === selection.end;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      return (\n        value.substring(0, selection.start) +\n        subsitute +\n        value.substring(selection.end)\n      );\n    case 'deleteByCut':\n      return (\n        value.substring(0, selection.start) + value.substring(selection.end)\n      );\n    case 'deleteContentBackward':\n      return collapsed\n        ? value.substring(0, selection.start - 1) +\n            value.substring(selection.end)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'deleteContentForward':\n      return collapsed\n        ? value.substring(0, selection.start) +\n            value.substring(selection.end + 1)\n        : value.substring(0, selection.start) + value.substring(selection.end);\n    case 'insertCompositionText':\n      return value;\n    case 'deleteByDrag':\n    case 'insertFromDrop':\n    default:\n      // Ignore drag&drop and other unknown input types for now.\n      return undefined;\n  }\n}\n\n/**\n * Calculates a candidate value based on the source text, the current selection and the input type.\n */\nfunction getCandidate(\n  text: string,\n  domText: string,\n  selection: SpinButtonTextSelection,\n  inputType: string,\n  substitute: string,\n  formatLength: number,\n) {\n  // If padding is enabled, calculate the nr. of padding slots.\n  const candidateOffset =\n    formatLength > 0 ? Math.max(formatLength - text.length, 0) : 0;\n\n  // Trying to forwardDelete a padding character should not change anything.\n  if (\n    selection.start < candidateOffset &&\n    inputType === 'deleteContentForward'\n  ) {\n    return undefined;\n  }\n\n  // Use domtext instead of text as candidate input, if content edit happens within the padding area\n  const useDomText =\n    selection.start < candidateOffset &&\n    (inputType === 'insertText' || inputType === 'insertFromPaste');\n\n  // If the domtext is used, only take the part right of the cursor as value.\n  // This makes modifying the text within the padding area feel more natural.\n  const value = useDomText ? domText.substring(selection.end) : text;\n\n  // Offset the selection position.\n  const candidateSelection: SpinButtonTextSelection = {\n    start: Math.max(selection.start - candidateOffset, 0),\n    end: Math.max(selection.end - candidateOffset, 0),\n  };\n\n  // Process the input event and get the actual candidate.\n  return processInputEvent(value, inputType, candidateSelection, substitute);\n}\n\n/**\n * Calculates a new cursor position for a given input event, selection and padding.\n */\nfunction getNewSelection(\n  selection: SpinButtonTextSelection,\n  candidate: string,\n  substitute: string,\n  inputType: string,\n  formatLength: number,\n) {\n  // Right align mode is only active, if padding is enabled and if the candidate still fits within the padded length.\n  const rightAlign = formatLength > 0 && candidate.length <= formatLength;\n  const collapsed = selection.start === selection.end;\n\n  let curserPos = 0;\n  switch (inputType) {\n    case 'insertText':\n    case 'insertFromPaste':\n      // For right aligned mode, keep the cursor position at the end of the selection.\n      // For left aligned mode, set the cursor to the end of the inserted text.\n      curserPos = rightAlign\n        ? selection.end\n        : selection.start + substitute.length;\n      break;\n    case 'deleteContentBackward':\n      // For right aligned mode, keep the cursor postion at the end of the selection.\n      // For left aligned mode and if the selection is not collapsed, keep the cursor position. Otherwise move the cursor left.\n      curserPos = rightAlign\n        ? selection.end\n        : collapsed\n          ? selection.start - 1\n          : selection.start;\n      break;\n    case 'deleteContentForward':\n      // For right aligned mode, if the selection is not collapsed, keep the cursor position. Otherwise move the cursor right.\n      // For left aligned mode, keep the cursor postion at the start of the selection.\n      curserPos = rightAlign\n        ? collapsed\n          ? selection.start + 1\n          : selection.end\n        : selection.start;\n      break;\n    case 'deleteByCut':\n      // Based on the writing mode, keep the cursor at either the left or right bound of the current seletion\n      curserPos = rightAlign ? selection.end : selection.start;\n  }\n\n  return {\n    start: curserPos,\n    end: curserPos,\n  } as SpinButtonTextSelection;\n}\n\n/**\n * Hook to provide input validation using the native onBeforeInput method.\n */\nexport const useBeforeInputHandler = (\n  ref: RefObject<HTMLElement | null> | undefined,\n  props: NumberSpinButtonProps,\n  applyText: (value: string, fireOnChange?: boolean) => void,\n  text: string,\n) => {\n  const {\n    onBeforeInput,\n    displayFormat: { length: formatLength = 0 } = {},\n    readOnly,\n    disabled,\n    onChange,\n    minValue = Number.MIN_SAFE_INTEGER,\n    maxValue = Number.MAX_SAFE_INTEGER,\n  } = props;\n\n  const { getSelection, setSelection } = useSelection(ref);\n  const { parse, format } = useValidationAndFormatting(\n    props.displayFormat,\n    props.required,\n    minValue,\n    maxValue,\n  );\n\n  /** This callback validates generic number min/max and length constraints. */\n  const defaultOnBeforeInput = useCallback(\n    (candidate: string, event: InputEvent) => {\n      // Reject candidate if it's not a valid integer.\n      // Only allow leading -, if negative values are allowed.\n      const isInteger =\n        minValue < 0\n          ? reNumber.test(candidate)\n          : reNonNegativeNumber.test(candidate);\n\n      if (!isInteger) {\n        event.preventDefault();\n        return;\n      }\n\n      const value = parse(candidate);\n      if (value === null) {\n        //  nothing else to check\n        return;\n      }\n\n      // Calculate max nr. of digits for a given min or max value.\n      const maxLength =\n        value < 0 ? getNrOfDigits(minValue) : getNrOfDigits(maxValue);\n\n      // Ignore candidates longer than this limit.\n      if (candidate.length > maxLength) {\n        event.preventDefault();\n        return;\n      }\n\n      // Don't allow to enter a value > maxValue for a positive value,\n      // and vice versa for negative ones.\n      if (value < 0 ? value < minValue : value > maxValue) {\n        event.preventDefault();\n        return;\n      }\n    },\n    [maxValue, minValue, parse],\n  );\n\n  /**\n   * This callback validates the input against optional external and internal constraints and initializes the expected selection.\n   */\n  const beforeInputHandler = useCallback(\n    (event: InputEvent) => {\n      if (disabled || readOnly) {\n        event.preventDefault();\n        return;\n      }\n      const selection = getSelection();\n\n      // Nothing to change if selection/cursor is not within the current spinbutton.\n      if (!selection) {\n        event.preventDefault();\n        return;\n      }\n\n      const domText = ref?.current?.textContent ?? '';\n\n      // If data is comming from the clipboard, strip formatting and use plain text version as substitute.\n      const substitute =\n        event.data ?? event.dataTransfer?.getData('text/plain') ?? '';\n\n      // Calculate a candidate for given input event and configuration.\n      const candidate = getCandidate(\n        text,\n        domText,\n        selection,\n        event.inputType,\n        substitute,\n        formatLength,\n      );\n\n      // If no candidate could be created, ignore the event.\n      if (candidate === undefined) {\n        event.preventDefault();\n        return;\n      }\n\n      // Validate against an optional external candidate validation.\n      // Break early if validation fails.\n      onBeforeInput?.(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Validate using the internal constraints.\n      // Break early if validation fails.\n      defaultOnBeforeInput(candidate, event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      // Calculate the new cursor position.\n      const newSelection =\n        domText === '' || domText === '-'\n          ? { start: 0, end: 0, rtl: true } // Use last possible cursor position. (Necessary if padding is enabled)\n          : getNewSelection(\n              selection,\n              candidate,\n              substitute,\n              event.inputType,\n              formatLength,\n            );\n\n      // Set the internal state and dom text, then update the cursor position.\n      applyText(candidate);\n      setSelection(newSelection);\n\n      // Workaround to prevent/revert dead key inputs\n      if (event.inputType === 'insertCompositionText') {\n        setTimeout(() => {\n          if (ref?.current) {\n            // Update original text content and selection\n            ref.current.textContent = format(text);\n            setTimeout(() => setSelection(selection), 0);\n          }\n        }, 0);\n      }\n\n      // Invoke onChange callback if available\n      const newValue = parse(candidate);\n      props.value !== newValue && onChange?.(newValue);\n      event.preventDefault();\n    },\n    [\n      disabled,\n      readOnly,\n      getSelection,\n      ref,\n      text,\n      formatLength,\n      onBeforeInput,\n      defaultOnBeforeInput,\n      applyText,\n      setSelection,\n      parse,\n      props.value,\n      onChange,\n      format,\n    ],\n  );\n\n  return beforeInputHandler;\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/spin-buttons/number-spin-button/hooks/useValidationAndFormatting.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useCallback } from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport { NumberSpinButtonDisplayFormat } from '../types.js';\n\nconst reParseValue = new RegExp('(-?\\\\d+)$');\n/**\n * This hook provides helper functions to parse, validate and format input values.\n */\nexport const useValidationAndFormatting = (\n  displayFormat?: NumberSpinButtonDisplayFormat,\n  required?: boolean,\n  minValue: number = NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n  maxValue: number = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n) => {\n  const formatLength = displayFormat?.length ?? 0;\n  const formatChars =\n    displayFormat?.chars ?? NUMBER_SPIN_BUTTON_DEFAULTS.PADDING_CHARS;\n\n  // Parse a given string into a number.\n  const parse = useCallback((input: string) => {\n    // Break early if input is empty\n    if (input === '') {\n      return null;\n    }\n\n    // Validate and extract the integer value from the given input\n    const match = input.match(reParseValue);\n    if (!match) {\n      return null;\n    }\n\n    // parse matching integer\n    const [value] = match;\n    return parseInt(value);\n  }, []);\n\n  // Check if the given value is within given boundaries.\n  const validate = useCallback(\n    (value: number | null | undefined) => {\n      if (required && value === null) {\n        return false;\n      }\n\n      return (\n        value === null ||\n        value === undefined ||\n        (!Number.isNaN(value) && value >= minValue && value <= maxValue)\n      );\n    },\n    [maxValue, minValue, required],\n  );\n\n  // Formats the given input based on the configured display formatting.\n  const format = useCallback(\n    (input: string | number | null) => {\n      // A null value is always shown as empty string. (e.g. to show the placeholder if configured)\n      if (input === null || input === '') {\n        return '';\n      }\n\n      // If input is a number, convert to string. Fallback to an empty string if input is invalid.\n      const text =\n        typeof input === 'string'\n          ? input\n          : isNil(input) || Number.isNaN(input)\n          ? ''\n          : input.toString();\n\n      // If no formatting is configured, return the text.\n      if (formatLength === 0) {\n        return text;\n      }\n\n      return text.padStart(formatLength, formatChars);\n    },\n    [formatLength, formatChars],\n  );\n\n  return { validate, parse, format };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAE5B,SAAS,mCAAmC;AAG5C,MAAM,eAAe,IAAI,OAAO,WAAW;AAIpC,MAAM,6BAA6B,CACxC,eACA,UACA,WAAmB,4BAA4B,WAC/C,WAAmB,4BAA4B,cAC5C;AACH,QAAM,eAAe,eAAe,UAAU;AAC9C,QAAM,cACJ,eAAe,SAAS,4BAA4B;AAGtD,QAAM,QAAQ,YAAY,CAAC,UAAkB;AAE3C,QAAI,UAAU,IAAI;AAChB,aAAO;AAAA,IACT;AAGA,UAAM,QAAQ,MAAM,MAAM,YAAY;AACtC,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,UAAM,CAAC,KAAK,IAAI;AAChB,WAAO,SAAS,KAAK;AAAA,EACvB,GAAG,CAAC,CAAC;AAGL,QAAM,WAAW;AAAA,IACf,CAAC,UAAqC;AACpC,UAAI,YAAY,UAAU,MAAM;AAC9B,eAAO;AAAA,MACT;AAEA,aACE,UAAU,QACV,UAAU,UACT,CAAC,OAAO,MAAM,KAAK,KAAK,SAAS,YAAY,SAAS;AAAA,IAE3D;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAGA,QAAM,SAAS;AAAA,IACb,CAAC,UAAkC;AAEjC,UAAI,UAAU,QAAQ,UAAU,IAAI;AAClC,eAAO;AAAA,MACT;AAGA,YAAM,OACJ,OAAO,UAAU,WACb,QACA,MAAM,KAAK,KAAK,OAAO,MAAM,KAAK,IAClC,KACA,MAAM,SAAS;AAGrB,UAAI,iBAAiB,GAAG;AACtB,eAAO;AAAA,MACT;AAEA,aAAO,KAAK,SAAS,cAAc,WAAW;AAAA,IAChD;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAEA,SAAO,EAAE,UAAU,OAAO,OAAO;AACnC;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useCallback } from 'react';\n\nimport { NUMBER_SPIN_BUTTON_DEFAULTS } from '../constants.js';\nimport { NumberSpinButtonDisplayFormat } from '../types.js';\n\nconst reParseValue = new RegExp('(-?\\\\d+)$');\n/**\n * This hook provides helper functions to parse, validate and format input values.\n */\nexport const useValidationAndFormatting = (\n  displayFormat?: NumberSpinButtonDisplayFormat,\n  required?: boolean,\n  minValue: number = NUMBER_SPIN_BUTTON_DEFAULTS.MIN_VALUE,\n  maxValue: number = NUMBER_SPIN_BUTTON_DEFAULTS.MAX_VALUE,\n) => {\n  const formatLength = displayFormat?.length ?? 0;\n  const formatChars =\n    displayFormat?.chars ?? NUMBER_SPIN_BUTTON_DEFAULTS.PADDING_CHARS;\n\n  // Parse a given string into a number.\n  const parse = useCallback((input: string) => {\n    // Break early if input is empty\n    if (input === '') {\n      return null;\n    }\n\n    // Validate and extract the integer value from the given input\n    const match = input.match(reParseValue);\n    if (!match) {\n      return null;\n    }\n\n    // parse matching integer\n    const [value] = match;\n    return parseInt(value);\n  }, []);\n\n  // Check if the given value is within given boundaries.\n  const validate = useCallback(\n    (value: number | null | undefined) => {\n      if (required && value === null) {\n        return false;\n      }\n\n      return (\n        value === null ||\n        value === undefined ||\n        (!Number.isNaN(value) && value >= minValue && value <= maxValue)\n      );\n    },\n    [maxValue, minValue, required],\n  );\n\n  // Formats the given input based on the configured display formatting.\n  const format = useCallback(\n    (input: string | number | null) => {\n      // A null value is always shown as empty string. (e.g. to show the placeholder if configured)\n      if (input === null || input === '') {\n        return '';\n      }\n\n      // If input is a number, convert to string. Fallback to an empty string if input is invalid.\n      const text =\n        typeof input === 'string'\n          ? input\n          : isNil(input) || Number.isNaN(input)\n            ? ''\n            : input.toString();\n\n      // If no formatting is configured, return the text.\n      if (formatLength === 0) {\n        return text;\n      }\n\n      return text.padStart(formatLength, formatChars);\n    },\n    [formatLength, formatChars],\n  );\n\n  return { validate, parse, format };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAE5B,SAAS,mCAAmC;AAG5C,MAAM,eAAe,IAAI,OAAO,WAAW;AAIpC,MAAM,6BAA6B,CACxC,eACA,UACA,WAAmB,4BAA4B,WAC/C,WAAmB,4BAA4B,cAC5C;AACH,QAAM,eAAe,eAAe,UAAU;AAC9C,QAAM,cACJ,eAAe,SAAS,4BAA4B;AAGtD,QAAM,QAAQ,YAAY,CAAC,UAAkB;AAE3C,QAAI,UAAU,IAAI;AAChB,aAAO;AAAA,IACT;AAGA,UAAM,QAAQ,MAAM,MAAM,YAAY;AACtC,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAGA,UAAM,CAAC,KAAK,IAAI;AAChB,WAAO,SAAS,KAAK;AAAA,EACvB,GAAG,CAAC,CAAC;AAGL,QAAM,WAAW;AAAA,IACf,CAAC,UAAqC;AACpC,UAAI,YAAY,UAAU,MAAM;AAC9B,eAAO;AAAA,MACT;AAEA,aACE,UAAU,QACV,UAAU,UACT,CAAC,OAAO,MAAM,KAAK,KAAK,SAAS,YAAY,SAAS;AAAA,IAE3D;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAGA,QAAM,SAAS;AAAA,IACb,CAAC,UAAkC;AAEjC,UAAI,UAAU,QAAQ,UAAU,IAAI;AAClC,eAAO;AAAA,MACT;AAGA,YAAM,OACJ,OAAO,UAAU,WACb,QACA,MAAM,KAAK,KAAK,OAAO,MAAM,KAAK,IAChC,KACA,MAAM,SAAS;AAGvB,UAAI,iBAAiB,GAAG;AACtB,eAAO;AAAA,MACT;AAEA,aAAO,KAAK,SAAS,cAAc,WAAW;AAAA,IAChD;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAEA,SAAO,EAAE,UAAU,OAAO,OAAO;AACnC;",
   "names": []
 }

package/esm/forms/switch/Switch.css

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

package/esm/forms/switch/Switch.js

@@ -109,7 +109,7 @@ const Switch = forwardRef(
     ]);
     const formValidityChangeRef = useRef(void 0);
     const _emitValidationState = useValidationStateEmitter(
-      (state) => formValidityChangeRef.current?.(state)
+      controlState ? void 0 : (state) => formValidityChangeRef.current?.(state)
     );
     const emitValidationState = useCustomMessageEmitter(
       _emitValidationState,
@@ -164,7 +164,8 @@ const Switch = forwardRef(
       { required, value: String(value), isSelected },
       void 0,
       void 0,
-      _emitValidationState
+      _emitValidationState,
+      controlState
     );
     if (value !== void 0 && !onChange && isDev()) {
       console.log(
@@ -192,7 +193,7 @@ const Switch = forwardRef(
       if (!disabled && !readOnly) {
         onChange?.(!isSelected, e);
         setIsSelected(!isSelected);
-        !controlState && validationOnChange();
+        validationOnChange();
       }
     }
     return /* @__PURE__ */ jsxs(
@@ -234,9 +235,7 @@ const Switch = forwardRef(
                     onChange: handleChange,
                     onBlur: focusProps.onBlur,
                     onFocus: focusProps.onFocus,
-                    onInvalid: (event) => {
-                      !controlState && validationOnInvalid(event);
-                    },
+                    onInvalid: validationOnInvalid,
                     name,
                     form: _form,
                     value: formValue,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/switch/Switch.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nfunction getSwitchFieldVariant(isSelected: boolean, showError: boolean) {\n  if (isSelected) {\n    return 'accent';\n  }\n  if (showError) {\n    return 'emphasized';\n  }\n  return 'default';\n}\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Switch` to let users toggle a setting between on and off. The change takes effect immediately without requiring a separate confirmation step.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      onFocus,\n      onBlur,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter((state) =>\n      formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: isSelected === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    useImperativeHandle(combinedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value), isSelected },\n      undefined,\n      undefined,\n      _emitValidationState,\n    );\n\n    if (value !== undefined && !onChange && isDev()) {\n      // oxlint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        !controlState && validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={focusProps.onBlur}\n              onFocus={focusProps.onFocus}\n              onInvalid={(event) => {\n                !controlState && validationOnInvalid(event);\n              }}\n              name={name}\n              form={_form}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: getSwitchFieldVariant(isSelected, showError),\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AAkSY,cA2CA,YA3CA;AAlSZ,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,eAAe,iBAAiB;AAEzC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAO7B,SAAS,aAAa;AACtB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB,gBAAgB;AAC7C,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAIlC,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAE1C,SAAS,sBAAsB,YAAqB,WAAoB;AACtE,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,iBAAiB;AAqChB,MAAM,SAAS;AAAA,EACpB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,UAAU;AAAA,MACV,GAAG;AAAA,IACL,IAAiB;AAEjB,UAAM,CAAC,uBAAuB,IAC5B,2BAA2B,cAAc;AAE3C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,IACnB,IAAI,eAAe;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,yBAAyB,YAAY,gBAAgB;AAE3D,UAAM,oBAAoB,sBAAsB,KAAK;AAErD,UAAM,CAAC,YAAY,aAAa,IAAI,qBAAqB;AAAA,MACvD;AAAA,MACA;AAAA,IACF,CAAC;AAGD,UAAM,OAAO,QAAQ;AACrB,UAAM,UAAU,OAAuB,IAAI;AAC3C,UAAM,WAAW,OAAyB,IAAI;AAC9C,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,cAAc,aAAoC;AAAA,MACtD;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,wBAAwB,OAE5B,MAAS;AACX,UAAM,uBAAuB;AAAA,MAA0B,CAAC,UACtD,sBAAsB,UAAU,KAAK;AAAA,IACvC;AACA,UAAM,sBAAsB;AAAA,MAC1B;AAAA,MACA,MAAM,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,IAC/D;AAEA,UAAM,cAAc,4BAA4B;AAAA,MAC9C;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,eAAe;AAAA,MACf,OAAO,eAAe;AAAA,MACtB;AAAA,MACA;AAAA,IACF,CAAC;AACD,0BAAsB,UAAU,YAAY;AAE5C,wBAAoB,aAAa,MAAsC;AACrE,aAAO;AAAA,QACL,SAAS,QAAQ;AAAA,QACjB,UAAU,SAAS;AAAA,QACnB,QAAQ;AACN,mBAAS,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAW;AACT,mBAAS,SAAS,cAAc;AAChC,oCAA0B;AAAA,YACxB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AACD;AAAA,YACE,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,UACzD;AAAA,QACF;AAAA;AAAA,QAEA,eAAe,YAAY;AACzB,mBAAS,SAAS,cAAc;AAChC,oCAA0B;AAAA,YACxB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AACD,iBAAO;AAAA,YACL,uBAAuB,MAAM,SAAS,SAAS,QAAQ;AAAA,UACzD;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,UAAM;AAAA,MACJ,UAAU;AAAA,MACV,WAAW;AAAA,MACX;AAAA,IACF,IAAI;AAAA,MACF;AAAA,MACA,EAAE,UAAU,OAAO,OAAO,KAAK,GAAG,WAAW;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,UAAU,UAAa,CAAC,YAAY,MAAM,GAAG;AAE/C,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,UAAM,EAAE,oBAAoB,GAAG,eAAe,IAC5C,kBAAkC;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAEH,UAAM,QAAQ,aAAa,YAAY;AACvC,QAAI,iBAAqD;AAEzD,QAAI,WAAW;AACb,uBAAiB;AAAA,IACnB,WAAW,EAAE,YAAY,2BAA2B,YAAY;AAC9D,uBAAiB;AAAA,IACnB;AAEA,UAAM,EAAE,gBAAgB,YAAY,eAAe,IAAI,aAAa;AAAA,MAClE,OAAO;AAAA,MACP;AAAA,IACF,CAAC;AAED,aAAS,aAAa,GAAyC;AAC7D,UAAI,CAAC,YAAY,CAAC,UAAU;AAC1B,mBAAW,CAAC,YAAY,CAAC;AACzB,sBAAc,CAAC,UAAU;AACzB,SAAC,gBAAgB,mBAAmB;AAAA,MACtC;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,eAAc;AAAA,QACd,KAAK;AAAA,QACL,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,QACrD,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAEnB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAW;AAAA,gBACT,eAAe,EAAE,UAAU,wBAAwB,SAAS,CAAC;AAAA,cAC/D;AAAA,cAEA;AAAA,oCAAC,kBACC;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,MAAK;AAAA,oBACL,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,iBAAe;AAAA,oBACf;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,gBAAc;AAAA,oBACd,UAAU;AAAA,oBACV,QAAQ,WAAW;AAAA,oBACnB,SAAS,WAAW;AAAA,oBACpB,WAAW,CAAC,UAAU;AACpB,uBAAC,gBAAgB,oBAAoB,KAAK;AAAA,oBAC5C;AAAA,oBACA;AAAA,oBACA,MAAM;AAAA,oBACN,OAAO;AAAA,oBACP,KAAK;AAAA,oBACJ,GAAG;AAAA,sBACF,eAAe,aAAa;AAAA,sBAC5B;AAAA,oBACF;AAAA;AAAA,gBACF,GACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,iBAAiB;AAAA,wBACf,UAAU;AAAA,wBACV;AAAA,wBACA,UAAU;AAAA,wBACV;AAAA,wBACA;AAAA,sBACF,CAAC;AAAA,sBACD,eAAe;AAAA,wBACb,UAAU;AAAA,wBACV,OAAO,YAAY,aAAa;AAAA,wBAChC,SAAS,sBAAsB,YAAY,SAAS;AAAA,sBACtD,CAAC;AAAA,oBACH;AAAA,oBAEA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAW,cAAc;AAAA,0BACvB,UAAU;AAAA,0BACV;AAAA,0BACA,UAAU;AAAA,wBACZ,CAAC;AAAA,wBAED;AAAA,8CAAC,iBAAc,MAAK,SAAQ;AAAA,0BAC5B,oBAAC,SAAI,WAAW,gBAAgB;AAAA,0BAChC,oBAAC,aAAU,MAAK,SAAQ;AAAA;AAAA;AAAA,oBAC1B;AAAA;AAAA,gBACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,cAAc;AAAA,sBACvB,UAAU;AAAA,sBACV,UAAU,CAAC,CAAC,YAAY;AAAA,oBAC1B,CAAC;AAAA,oBAEA;AAAA;AAAA,gBACH;AAAA;AAAA;AAAA,UACF;AAAA,UACC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,YAAY,UAAU;AAAA,cAC/B,UAAU;AAAA,cACT,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACC,OAAmD,cAClD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport {\n  switchIconCSS,\n  switchLabelCSS,\n  switchTextCSS,\n  switchThumbCSS,\n  switchWrapperCSS,\n} from './Switch.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nfunction getSwitchFieldVariant(isSelected: boolean, showError: boolean) {\n  if (isSelected) {\n    return 'accent';\n  }\n  if (showError) {\n    return 'emphasized';\n  }\n  return 'default';\n}\n\nconst COMPONENT_NAME = 'Switch';\n\n// #region Types\n/**\n * @public\n */\nexport type SwitchProps = FormControlProps<\n  boolean,\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  BehaviorTrackingProps &\n  WithChildren & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n    /** The string used as the value of the switch when submitting it in a form, if the switch is toggled on. */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Use the `Switch` to let users toggle a setting between on and off. The change takes effect immediately without requiring a separate confirmation step.\n * @public\n */\nexport const Switch = forwardRef<FormControlRef, SwitchProps>(\n  (props, forwardedRef) => {\n    const {\n      value,\n      defaultValue,\n      children,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      name,\n      _form,\n      _messageTarget,\n      formValue,\n      onValidityChange,\n      onChange,\n      onFocus,\n      onBlur,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      id: propId,\n      required: propRequired,\n      disabled: propDisabled,\n      'aria-disabled': ariaDisabledProp,\n      readOnly: propReadOnly,\n      ...remainingProps\n    }: SwitchProps = props;\n\n    const [behavioralTrackingProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const ariaLabelingProps = _useAriaLabelingProps(props);\n\n    const [isSelected, setIsSelected] = useControllableState({\n      value,\n      defaultValue,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const controlRef = useRef<FormControlRef>(null);\n    const combinedRef = useMergeRefs<FormControlRef | null>([\n      forwardedRef,\n      controlRef,\n    ]);\n    const formValidityChangeRef = useRef<\n      ((state: ValidationState) => void) | undefined\n    >(undefined);\n    const _emitValidationState = useValidationStateEmitter(\n      controlState\n        ? undefined\n        : (state) => formValidityChangeRef.current?.(state),\n    );\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n\n    const formControl = useInternalFormRegistration({\n      id,\n      name,\n      form: _form,\n      messageTarget: _messageTarget,\n      value: isSelected === true,\n      controlRef,\n      onValidityChange,\n    });\n    formValidityChangeRef.current = formControl.onValidityChange;\n\n    useImperativeHandle(combinedRef, (): FormControlRef<HTMLDivElement> => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value), isSelected },\n      undefined,\n      undefined,\n      _emitValidationState,\n      controlState,\n    );\n\n    if (value !== undefined && !onChange && isDev()) {\n      // oxlint-disable-next-line no-console\n      console.log(\n        'Defining \"value\" makes the switch controlled. Set the onChange() callback and implement the toggle functionality.',\n      );\n    }\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLDivElement>({\n        onFocus,\n        onBlur,\n        disabled,\n        emitValidationState,\n      });\n\n    const color = isSelected ? 'primary' : 'neutral';\n    let focusRingColor: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(readOnly || disabledOrAriaDisabled) && isSelected) {\n      focusRingColor = 'primary';\n    }\n\n    const { focusClassName, focusProps, isFocusVisible } = useFocusRing({\n      color: focusRingColor,\n      disabled,\n    });\n\n    function handleChange(e?: ChangeEvent<HTMLInputElement>): void {\n      if (!disabled && !readOnly) {\n        onChange?.(!isSelected, e);\n        setIsSelected(!isSelected);\n        validationOnChange();\n      }\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        role=\"group\"\n        flexDirection=\"column\"\n        gap={4}\n        className={clsx(containerClassName, consumerClassName)}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            switchLabelCSS({ disabled: disabledOrAriaDisabled, readOnly }),\n          )}\n        >\n          <VisuallyHidden>\n            <input\n              id={id}\n              type=\"checkbox\"\n              role=\"switch\"\n              checked={isSelected}\n              aria-disabled={ariaDisabled}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              aria-checked={isSelected}\n              onChange={handleChange}\n              onBlur={focusProps.onBlur}\n              onFocus={focusProps.onFocus}\n              onInvalid={validationOnInvalid}\n              name={name}\n              form={_form}\n              value={formValue}\n              ref={inputRef}\n              {..._mergeProps(\n                controlState ? inputProps : ariaProps,\n                ariaLabelingProps,\n              )}\n            />\n          </VisuallyHidden>\n          <div\n            className={clsx(\n              focusClassName,\n              switchWrapperCSS({\n                disabled: disabledOrAriaDisabled,\n                color,\n                hasError: showError,\n                isFocusVisible,\n                readOnly,\n              }),\n              fieldColorsCSS({\n                disabled: disabledOrAriaDisabled,\n                color: showError ? 'critical' : color,\n                variant: getSwitchFieldVariant(isSelected, showError),\n              }),\n            )}\n          >\n            <div\n              className={switchIconCSS({\n                selected: isSelected,\n                readOnly,\n                hasError: showError,\n              })}\n            >\n              <CheckmarkIcon size=\"small\" />\n              <div className={switchThumbCSS} />\n              <XmarkIcon size=\"small\" />\n            </div>\n          </div>\n          <span\n            className={switchTextCSS({\n              disabled: disabledOrAriaDisabled,\n              required: !!children && required,\n            })}\n          >\n            {children}\n          </span>\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Switch as typeof Switch & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

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