@fluentui/react-spinbutton 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

package/lib/components/SpinButton/useSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useControllableState","useTimeout","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButton_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","overrides","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","inputDefaultAppearance","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","createElement","disabled","valueToDisplay","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"sources":["../../../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const overrides = useOverrides();\n\n  const {\n    value,\n    displayValue,\n    defaultValue,\n    min,\n    max,\n    step = 1,\n    stepPage = 1,\n    precision: precisionFromProps,\n    onChange,\n    size = 'medium',\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        ref,\n        autoComplete: 'off',\n        role: 'spinbutton',\n        appearance,\n        type: 'text',\n        ...nativeProps.primary,\n      },\n    }),\n    incrementButton: resolveShorthand(incrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronUp16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n    }),\n    decrementButton: resolveShorthand(decrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronDown16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useControllableState","useTimeout","ArrowUp","ArrowDown","End","Enter","Escape","Home","PageDown","PageUp","calculatePrecision","precisionRound","getBound","clamp","ChevronUp16Regular","ChevronDown16Regular","useOverrides_unstable","useOverrides","DEFAULT_SPIN_DELAY_MS","MIN_SPIN_DELAY_MS","MAX_SPIN_TIME_MS","lerp","start","end","percent","useSpinButton_unstable","props","ref","nativeProps","primarySlotTagName","excludedPropNames","overrides","_overrides_inputDefaultAppearance","value","displayValue","defaultValue","min","max","step","stepPage","precision","precisionFromProps","onChange","size","appearance","inputDefaultAppearance","root","input","incrementButton","decrementButton","useMemo","Math","currentValue","setCurrentValue","state","defaultState","initialState","isControlled","undefined","textValue","setTextValue","useState","keyboardSpinState","setKeyboardSpinState","internalState","useRef","spinState","spinTime","spinDelay","atBound","setStepTimeout","clearStepTimeout","stepValue","e","direction","startFrom","startValue","current","num","parseFloat","isNaN","val","dir","stepSize","stepStart","nullStep","commit","newValue","Number","handleInputChange","previousTextValue","String","target","handleIncrementMouseDown","handleDecrementMouseDown","handleStepMouseUpOrLeave","handleBlur","handleKeyDown","nextKeyboardSpinState","key","preventDefault","shiftKey","handleKeyUp","newDisplayValue","valueChanged","displayValueChanged","roundedValue","nextValue","components","required","defaultProps","autoComplete","role","type","primary","tabIndex","children","createElement","disabled","valueToDisplay","_state_input_ariavaluetext","onBlur","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave"],"sources":["../../../src/components/SpinButton/useSpinButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  resolveShorthand,\n  useControllableState,\n  useTimeout,\n} from '@fluentui/react-utilities';\nimport { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';\nimport {\n  SpinButtonProps,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonChangeEvent,\n  SpinButtonBounds,\n} from './SpinButton.types';\nimport { calculatePrecision, precisionRound, getBound, clamp } from '../../utils/index';\nimport { ChevronUp16Regular, ChevronDown16Regular } from '@fluentui/react-icons';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\ntype InternalState = {\n  value: number | null;\n  spinState: SpinButtonSpinState;\n  spinTime: number;\n  spinDelay: number;\n  previousTextValue?: string;\n  atBound: SpinButtonBounds;\n};\n\nconst DEFAULT_SPIN_DELAY_MS = 150;\nconst MIN_SPIN_DELAY_MS = 80;\nconst MAX_SPIN_TIME_MS = 1000;\n\n// This is here to give an ease for the mouse held down case.\n// Exact easing it to be defined. Once it is we'll likely\n// pull this out into a util function in the SpinButton package.\nconst lerp = (start: number, end: number, percent: number): number => start + (end - start) * percent;\n\n/**\n * Create the state required to render SpinButton.\n *\n * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,\n * before being passed to renderSpinButton_unstable.\n *\n * @param props - props from this instance of SpinButton\n * @param ref - reference to root HTMLElement of SpinButton\n */\nexport const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['defaultValue', 'max', 'min', 'onChange', 'size', 'value'],\n  });\n\n  const overrides = useOverrides();\n\n  const {\n    value,\n    displayValue,\n    defaultValue,\n    min,\n    max,\n    step = 1,\n    stepPage = 1,\n    precision: precisionFromProps,\n    onChange,\n    size = 'medium',\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n    root,\n    input,\n    incrementButton,\n    decrementButton,\n  } = props;\n\n  const precision = React.useMemo(() => {\n    return precisionFromProps ?? Math.max(calculatePrecision(step), 0);\n  }, [precisionFromProps, step]);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    state: value,\n    defaultState: defaultValue,\n    initialState: 0,\n  });\n\n  const isControlled = value !== undefined;\n\n  const [textValue, setTextValue] = React.useState<string | undefined>(undefined);\n  const [keyboardSpinState, setKeyboardSpinState] = React.useState<SpinButtonSpinState>('rest');\n\n  const internalState = React.useRef<InternalState>({\n    value: currentValue,\n    spinState: 'rest',\n    spinTime: 0,\n    spinDelay: DEFAULT_SPIN_DELAY_MS,\n    atBound: currentValue !== null ? getBound(precisionRound(currentValue, precision), min, max) : 'none',\n  });\n\n  const [setStepTimeout, clearStepTimeout] = useTimeout();\n\n  const stepValue = (\n    e: SpinButtonChangeEvent,\n    direction: 'up' | 'down' | 'upPage' | 'downPage',\n    startFrom?: string,\n  ) => {\n    let startValue = internalState.current.value;\n    if (startFrom) {\n      const num = parseFloat(startFrom);\n      if (!isNaN(num)) {\n        startValue = num;\n      }\n    }\n    const val = startValue;\n    const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;\n    const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;\n\n    if (val === null) {\n      const stepStart = min === undefined ? 0 : min;\n      const nullStep = clamp(stepStart + stepSize * dir, min, max);\n      commit(e, nullStep);\n      return;\n    }\n\n    let newValue = val + stepSize * dir;\n    if (!Number.isNaN(newValue)) {\n      newValue = clamp(newValue, min, max);\n    }\n\n    commit(e, newValue);\n\n    if (internalState.current.spinState !== 'rest') {\n      setStepTimeout(() => {\n        // Ease the step speed a bit\n        internalState.current.spinTime += internalState.current.spinDelay;\n        internalState.current.spinDelay = lerp(\n          DEFAULT_SPIN_DELAY_MS,\n          MIN_SPIN_DELAY_MS,\n          internalState.current.spinTime / MAX_SPIN_TIME_MS,\n        );\n        stepValue(e, direction);\n      }, internalState.current.spinDelay);\n    }\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!internalState.current.previousTextValue) {\n      internalState.current.previousTextValue = textValue ?? String(currentValue);\n    }\n    const newValue = e.target.value;\n    setTextValue(newValue);\n  };\n\n  const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'up';\n    stepValue(e, 'up');\n  };\n\n  const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {\n    internalState.current.spinState = 'down';\n    stepValue(e, 'down');\n  };\n\n  const handleStepMouseUpOrLeave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    clearStepTimeout();\n    internalState.current.spinState = 'rest';\n    internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;\n    internalState.current.spinTime = 0;\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    commit(e, currentValue, textValue);\n    internalState.current.previousTextValue = undefined;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    let nextKeyboardSpinState: SpinButtonSpinState = 'rest';\n\n    if (e.key === ArrowUp) {\n      stepValue(e, 'up', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === ArrowDown) {\n      stepValue(e, 'down', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (e.key === PageUp) {\n      e.preventDefault();\n      stepValue(e, 'upPage', textValue);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === PageDown) {\n      e.preventDefault();\n      stepValue(e, 'downPage', textValue);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === Home && min !== undefined) {\n      commit(e, min);\n      nextKeyboardSpinState = 'down';\n    } else if (!e.shiftKey && e.key === End && max !== undefined) {\n      commit(e, max);\n      nextKeyboardSpinState = 'up';\n    } else if (e.key === Enter) {\n      commit(e, currentValue, textValue);\n      internalState.current.previousTextValue = undefined;\n    } else if (e.key === Escape) {\n      if (internalState.current.previousTextValue) {\n        setTextValue(undefined);\n        internalState.current.previousTextValue = undefined;\n      }\n    }\n\n    if (keyboardSpinState !== nextKeyboardSpinState) {\n      setKeyboardSpinState(nextKeyboardSpinState);\n    }\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (keyboardSpinState !== 'rest') {\n      setKeyboardSpinState('rest');\n      internalState.current.spinState = 'rest';\n    }\n  };\n\n  const commit = (e: SpinButtonChangeEvent, newValue?: number | null, newDisplayValue?: string) => {\n    const valueChanged = newValue !== undefined && currentValue !== newValue;\n    const displayValueChanged =\n      newDisplayValue !== undefined &&\n      internalState.current.previousTextValue !== undefined &&\n      internalState.current.previousTextValue !== newDisplayValue;\n\n    let roundedValue;\n    if (valueChanged) {\n      roundedValue = precisionRound(newValue!, precision);\n      setCurrentValue(roundedValue);\n    } else if (displayValueChanged && !isControlled) {\n      const nextValue = parseFloat(newDisplayValue as string);\n      if (!isNaN(nextValue)) {\n        setCurrentValue(precisionRound(nextValue, precision));\n      }\n    }\n\n    if (valueChanged || displayValueChanged) {\n      onChange?.(e, { value: roundedValue, displayValue: newDisplayValue });\n    }\n\n    setTextValue(undefined);\n  };\n\n  const state: SpinButtonState = {\n    size,\n    appearance,\n    spinState: keyboardSpinState,\n    atBound: internalState.current.atBound,\n\n    components: {\n      root: 'span',\n      input: 'input',\n      incrementButton: 'button',\n      decrementButton: 'button',\n    },\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n    input: resolveShorthand(input, {\n      required: true,\n      defaultProps: {\n        ref,\n        autoComplete: 'off',\n        role: 'spinbutton',\n        appearance,\n        type: 'text',\n        ...nativeProps.primary,\n      },\n    }),\n    incrementButton: resolveShorthand(incrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronUp16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Increment value',\n        type: 'button',\n      },\n    }),\n    decrementButton: resolveShorthand(decrementButton, {\n      required: true,\n      defaultProps: {\n        tabIndex: -1,\n        children: <ChevronDown16Regular />,\n        disabled: nativeProps.primary.disabled,\n        'aria-label': 'Decrement value',\n        type: 'button',\n      },\n    }),\n  };\n\n  let valueToDisplay;\n  if (textValue !== undefined) {\n    valueToDisplay = textValue;\n  } else if (value === null || currentValue === null) {\n    valueToDisplay = displayValue ?? '';\n    internalState.current.value = null;\n    internalState.current.atBound = 'none';\n  } else {\n    const roundedValue = precisionRound(currentValue, precision);\n    internalState.current.value = roundedValue;\n    internalState.current.atBound = getBound(roundedValue, min, max);\n    if (isControlled) {\n      valueToDisplay = displayValue ?? String(roundedValue);\n    } else {\n      valueToDisplay = String(roundedValue);\n    }\n  }\n\n  state.input.value = valueToDisplay;\n  state.input['aria-valuemin'] = min;\n  state.input['aria-valuemax'] = max;\n  state.input['aria-valuenow'] = currentValue ?? undefined;\n  state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);\n  state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);\n  state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);\n  state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);\n  state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);\n\n  state.incrementButton.onMouseDown = mergeCallbacks(handleIncrementMouseDown, state.incrementButton.onMouseDown);\n  state.incrementButton.onMouseUp = mergeCallbacks(state.incrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.incrementButton.onMouseLeave = mergeCallbacks(state.incrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  state.decrementButton.onMouseDown = mergeCallbacks(handleDecrementMouseDown, state.decrementButton.onMouseDown);\n  state.decrementButton.onMouseUp = mergeCallbacks(state.decrementButton.onMouseUp, handleStepMouseUpOrLeave);\n  state.decrementButton.onMouseLeave = mergeCallbacks(state.decrementButton.onMouseLeave, handleStepMouseUpOrLeave);\n\n  return state;\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,yBAAyB,EACzBC,cAAc,EACdC,gBAAgB,EAChBC,oBAAoB,EACpBC,UAAU,QACL;AACP,SAASC,OAAO,EAAEC,SAAS,EAAEC,GAAG,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,QAAQ;AAQ/E,SAASC,kBAAkB,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,KAAK,QAAQ;AACpE,SAASC,kBAAkB,EAAEC,oBAAoB,QAAQ;AACzD,SAASC,qBAAA,IAAyBC,YAAY,QAAQ;AAWtD,MAAMC,qBAAA,GAAwB;AAC9B,MAAMC,iBAAA,GAAoB;AAC1B,MAAMC,gBAAA,GAAmB;AAEzB;AACA;AACA;AACA,MAAMC,IAAA,GAAOA,CAACC,KAAA,EAAeC,GAAA,EAAaC,OAAA,KAA4BF,KAAA,GAAQ,CAACC,GAAA,GAAMD,KAAI,IAAKE,OAAA;AAE9F;;;;;;;;;AASA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAwBC,GAAA,KAAsD;EACnH,MAAMC,WAAA,GAAc/B,yBAAA,CAA0B;IAC5C6B,KAAA;IACAG,kBAAA,EAAoB;IACpBC,iBAAA,EAAmB,CAAC,gBAAgB,OAAO,OAAO,YAAY,QAAQ;EACxE;EAEA,MAAMC,SAAA,GAAYd,YAAA;MAaHe,iCAAA;EAXf,MAAM;IACJC,KAAA;IACAC,YAAA;IACAC,YAAA;IACAC,GAAA;IACAC,GAAA;IACAC,IAAA,GAAO;IACPC,QAAA,GAAW;IACXC,SAAA,EAAWC,kBAAA;IACXC,QAAA;IACAC,IAAA,GAAO;IACPC,UAAA,GAAa,CAAAZ,iCAAA,GAAAD,SAAA,CAAUc,sBAAsB,cAAhCb,iCAAA,cAAAA,iCAAA,GAAoC,SAAS;IAC1Dc,IAAA;IACAC,KAAA;IACAC,eAAA;IACAC;EAAe,CAChB,GAAGvB,KAAA;EAEJ,MAAMc,SAAA,GAAY5C,KAAA,CAAMsD,OAAO,CAAC,MAAM;IACpC,OAAOT,kBAAA,aAAAA,kBAAA,cAAAA,kBAAA,GAAsBU,IAAA,CAAKd,GAAG,CAAC3B,kBAAA,CAAmB4B,IAAA,GAAO,EAAE;EACpE,GAAG,CAACG,kBAAA,EAAoBH,IAAA,CAAK;EAE7B,MAAM,CAACc,YAAA,EAAcC,eAAA,CAAgB,GAAGrD,oBAAA,CAAqB;IAC3DsD,KAAA,EAAOrB,KAAA;IACPsB,YAAA,EAAcpB,YAAA;IACdqB,YAAA,EAAc;EAChB;EAEA,MAAMC,YAAA,GAAexB,KAAA,KAAUyB,SAAA;EAE/B,MAAM,CAACC,SAAA,EAAWC,YAAA,CAAa,GAAGhE,KAAA,CAAMiE,QAAQ,CAAqBH,SAAA;EACrE,MAAM,CAACI,iBAAA,EAAmBC,oBAAA,CAAqB,GAAGnE,KAAA,CAAMiE,QAAQ,CAAsB;EAEtF,MAAMG,aAAA,GAAgBpE,KAAA,CAAMqE,MAAM,CAAgB;IAChDhC,KAAA,EAAOmB,YAAA;IACPc,SAAA,EAAW;IACXC,QAAA,EAAU;IACVC,SAAA,EAAWlD,qBAAA;IACXmD,OAAA,EAASjB,YAAA,KAAiB,IAAI,GAAGxC,QAAA,CAASD,cAAA,CAAeyC,YAAA,EAAcZ,SAAA,GAAYJ,GAAA,EAAKC,GAAA,IAAO;EACjG;EAEA,MAAM,CAACiC,cAAA,EAAgBC,gBAAA,CAAiB,GAAGtE,UAAA;EAE3C,MAAMuE,SAAA,GAAYA,CAChBC,CAAA,EACAC,SAAA,EACAC,SAAA,KACG;IACH,IAAIC,UAAA,GAAaZ,aAAA,CAAca,OAAO,CAAC5C,KAAK;IAC5C,IAAI0C,SAAA,EAAW;MACb,MAAMG,GAAA,GAAMC,UAAA,CAAWJ,SAAA;MACvB,IAAI,CAACK,KAAA,CAAMF,GAAA,GAAM;QACfF,UAAA,GAAaE,GAAA;MACf;IACF;IACA,MAAMG,GAAA,GAAML,UAAA;IACZ,MAAMM,GAAA,GAAMR,SAAA,KAAc,QAAQA,SAAA,KAAc,WAAW,IAAI,CAAC,CAAC;IACjE,MAAMS,QAAA,GAAWT,SAAA,KAAc,YAAYA,SAAA,KAAc,aAAanC,QAAA,GAAWD,IAAI;IAErF,IAAI2C,GAAA,KAAQ,IAAI,EAAE;MAChB,MAAMG,SAAA,GAAYhD,GAAA,KAAQsB,SAAA,GAAY,IAAItB,GAAG;MAC7C,MAAMiD,QAAA,GAAWxE,KAAA,CAAMuE,SAAA,GAAYD,QAAA,GAAWD,GAAA,EAAK9C,GAAA,EAAKC,GAAA;MACxDiD,MAAA,CAAOb,CAAA,EAAGY,QAAA;MACV;IACF;IAEA,IAAIE,QAAA,GAAWN,GAAA,GAAME,QAAA,GAAWD,GAAA;IAChC,IAAI,CAACM,MAAA,CAAOR,KAAK,CAACO,QAAA,GAAW;MAC3BA,QAAA,GAAW1E,KAAA,CAAM0E,QAAA,EAAUnD,GAAA,EAAKC,GAAA;IAClC;IAEAiD,MAAA,CAAOb,CAAA,EAAGc,QAAA;IAEV,IAAIvB,aAAA,CAAca,OAAO,CAACX,SAAS,KAAK,QAAQ;MAC9CI,cAAA,CAAe,MAAM;QACnB;QACAN,aAAA,CAAca,OAAO,CAACV,QAAQ,IAAIH,aAAA,CAAca,OAAO,CAACT,SAAS;QACjEJ,aAAA,CAAca,OAAO,CAACT,SAAS,GAAG/C,IAAA,CAChCH,qBAAA,EACAC,iBAAA,EACA6C,aAAA,CAAca,OAAO,CAACV,QAAQ,GAAG/C,gBAAA;QAEnCoD,SAAA,CAAUC,CAAA,EAAGC,SAAA;MACf,GAAGV,aAAA,CAAca,OAAO,CAACT,SAAS;IACpC;EACF;EAEA,MAAMqB,iBAAA,GAAqBhB,CAAA,IAA2C;IACpE,IAAI,CAACT,aAAA,CAAca,OAAO,CAACa,iBAAiB,EAAE;MAC5C1B,aAAA,CAAca,OAAO,CAACa,iBAAiB,GAAG/B,SAAA,aAAAA,SAAA,cAAAA,SAAA,GAAagC,MAAA,CAAOvC,YAAA,CAAa;IAC7E;IACA,MAAMmC,QAAA,GAAWd,CAAA,CAAEmB,MAAM,CAAC3D,KAAK;IAC/B2B,YAAA,CAAa2B,QAAA;EACf;EAEA,MAAMM,wBAAA,GAA4BpB,CAAA,IAA2C;IAC3ET,aAAA,CAAca,OAAO,CAACX,SAAS,GAAG;IAClCM,SAAA,CAAUC,CAAA,EAAG;EACf;EAEA,MAAMqB,wBAAA,GAA4BrB,CAAA,IAA2C;IAC3ET,aAAA,CAAca,OAAO,CAACX,SAAS,GAAG;IAClCM,SAAA,CAAUC,CAAA,EAAG;EACf;EAEA,MAAMsB,wBAAA,GAA4BtB,CAAA,IAA2C;IAC3EF,gBAAA;IACAP,aAAA,CAAca,OAAO,CAACX,SAAS,GAAG;IAClCF,aAAA,CAAca,OAAO,CAACT,SAAS,GAAGlD,qBAAA;IAClC8C,aAAA,CAAca,OAAO,CAACV,QAAQ,GAAG;EACnC;EAEA,MAAM6B,UAAA,GAAcvB,CAAA,IAA0C;IAC5Da,MAAA,CAAOb,CAAA,EAAGrB,YAAA,EAAcO,SAAA;IACxBK,aAAA,CAAca,OAAO,CAACa,iBAAiB,GAAGhC,SAAA;EAC5C;EAEA,MAAMuC,aAAA,GAAiBxB,CAAA,IAA6C;IAClE,IAAIyB,qBAAA,GAA6C;IAEjD,IAAIzB,CAAA,CAAE0B,GAAG,KAAKjG,OAAA,EAAS;MACrBsE,SAAA,CAAUC,CAAA,EAAG,MAAMd,SAAA;MACnBuC,qBAAA,GAAwB;IAC1B,OAAO,IAAIzB,CAAA,CAAE0B,GAAG,KAAKhG,SAAA,EAAW;MAC9BqE,SAAA,CAAUC,CAAA,EAAG,QAAQd,SAAA;MACrBuC,qBAAA,GAAwB;IAC1B,OAAO,IAAIzB,CAAA,CAAE0B,GAAG,KAAK1F,MAAA,EAAQ;MAC3BgE,CAAA,CAAE2B,cAAc;MAChB5B,SAAA,CAAUC,CAAA,EAAG,UAAUd,SAAA;MACvBuC,qBAAA,GAAwB;IAC1B,OAAO,IAAIzB,CAAA,CAAE0B,GAAG,KAAK3F,QAAA,EAAU;MAC7BiE,CAAA,CAAE2B,cAAc;MAChB5B,SAAA,CAAUC,CAAA,EAAG,YAAYd,SAAA;MACzBuC,qBAAA,GAAwB;IAC1B,OAAO,IAAI,CAACzB,CAAA,CAAE4B,QAAQ,IAAI5B,CAAA,CAAE0B,GAAG,KAAK5F,IAAA,IAAQ6B,GAAA,KAAQsB,SAAA,EAAW;MAC7D4B,MAAA,CAAOb,CAAA,EAAGrC,GAAA;MACV8D,qBAAA,GAAwB;IAC1B,OAAO,IAAI,CAACzB,CAAA,CAAE4B,QAAQ,IAAI5B,CAAA,CAAE0B,GAAG,KAAK/F,GAAA,IAAOiC,GAAA,KAAQqB,SAAA,EAAW;MAC5D4B,MAAA,CAAOb,CAAA,EAAGpC,GAAA;MACV6D,qBAAA,GAAwB;IAC1B,OAAO,IAAIzB,CAAA,CAAE0B,GAAG,KAAK9F,KAAA,EAAO;MAC1BiF,MAAA,CAAOb,CAAA,EAAGrB,YAAA,EAAcO,SAAA;MACxBK,aAAA,CAAca,OAAO,CAACa,iBAAiB,GAAGhC,SAAA;IAC5C,OAAO,IAAIe,CAAA,CAAE0B,GAAG,KAAK7F,MAAA,EAAQ;MAC3B,IAAI0D,aAAA,CAAca,OAAO,CAACa,iBAAiB,EAAE;QAC3C9B,YAAA,CAAaF,SAAA;QACbM,aAAA,CAAca,OAAO,CAACa,iBAAiB,GAAGhC,SAAA;MAC5C;IACF;IAEA,IAAII,iBAAA,KAAsBoC,qBAAA,EAAuB;MAC/CnC,oBAAA,CAAqBmC,qBAAA;IACvB;EACF;EAEA,MAAMI,WAAA,GAAe7B,CAAA,IAA6C;IAChE,IAAIX,iBAAA,KAAsB,QAAQ;MAChCC,oBAAA,CAAqB;MACrBC,aAAA,CAAca,OAAO,CAACX,SAAS,GAAG;IACpC;EACF;EAEA,MAAMoB,MAAA,GAASA,CAACb,CAAA,EAA0Bc,QAAA,EAA0BgB,eAAA,KAA6B;IAC/F,MAAMC,YAAA,GAAejB,QAAA,KAAa7B,SAAA,IAAaN,YAAA,KAAiBmC,QAAA;IAChE,MAAMkB,mBAAA,GACJF,eAAA,KAAoB7C,SAAA,IACpBM,aAAA,CAAca,OAAO,CAACa,iBAAiB,KAAKhC,SAAA,IAC5CM,aAAA,CAAca,OAAO,CAACa,iBAAiB,KAAKa,eAAA;IAE9C,IAAIG,YAAA;IACJ,IAAIF,YAAA,EAAc;MAChBE,YAAA,GAAe/F,cAAA,CAAe4E,QAAA,EAAW/C,SAAA;MACzCa,eAAA,CAAgBqD,YAAA;IAClB,OAAO,IAAID,mBAAA,IAAuB,CAAChD,YAAA,EAAc;MAC/C,MAAMkD,SAAA,GAAY5B,UAAA,CAAWwB,eAAA;MAC7B,IAAI,CAACvB,KAAA,CAAM2B,SAAA,GAAY;QACrBtD,eAAA,CAAgB1C,cAAA,CAAegG,SAAA,EAAWnE,SAAA;MAC5C;IACF;IAEA,IAAIgE,YAAA,IAAgBC,mBAAA,EAAqB;MACvC/D,QAAA,aAAAA,QAAA,uBAAAA,QAAA,CAAW+B,CAAA,EAAG;QAAExC,KAAA,EAAOyE,YAAA;QAAcxE,YAAA,EAAcqE;MAAgB;IACrE;IAEA3C,YAAA,CAAaF,SAAA;EACf;EAEA,MAAMJ,KAAA,GAAyB;IAC7BX,IAAA;IACAC,UAAA;IACAsB,SAAA,EAAWJ,iBAAA;IACXO,OAAA,EAASL,aAAA,CAAca,OAAO,CAACR,OAAO;IAEtCuC,UAAA,EAAY;MACV9D,IAAA,EAAM;MACNC,KAAA,EAAO;MACPC,eAAA,EAAiB;MACjBC,eAAA,EAAiB;IACnB;IACAH,IAAA,EAAM/C,gBAAA,CAAiB+C,IAAA,EAAM;MAC3B+D,QAAA,EAAU,IAAI;MACdC,YAAA,EAAclF,WAAA,CAAYkB;IAC5B;IACAC,KAAA,EAAOhD,gBAAA,CAAiBgD,KAAA,EAAO;MAC7B8D,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZnF,GAAA;QACAoF,YAAA,EAAc;QACdC,IAAA,EAAM;QACNpE,UAAA;QACAqE,IAAA,EAAM;QACN,GAAGrF,WAAA,CAAYsF;MACjB;IACF;IACAlE,eAAA,EAAiBjD,gBAAA,CAAiBiD,eAAA,EAAiB;MACjD6D,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZK,QAAA,EAAU,CAAC;QACXC,QAAA,eAAUxH,KAAA,CAAAyH,aAAA,CAACvG,kBAAA;QACXwG,QAAA,EAAU1F,WAAA,CAAYsF,OAAO,CAACI,QAAQ;QACtC,cAAc;QACdL,IAAA,EAAM;MACR;IACF;IACAhE,eAAA,EAAiBlD,gBAAA,CAAiBkD,eAAA,EAAiB;MACjD4D,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZK,QAAA,EAAU,CAAC;QACXC,QAAA,eAAUxH,KAAA,CAAAyH,aAAA,CAACtG,oBAAA;QACXuG,QAAA,EAAU1F,WAAA,CAAYsF,OAAO,CAACI,QAAQ;QACtC,cAAc;QACdL,IAAA,EAAM;MACR;IACF;EACF;EAEA,IAAIM,cAAA;EACJ,IAAI5D,SAAA,KAAcD,SAAA,EAAW;IAC3B6D,cAAA,GAAiB5D,SAAA;EACnB,OAAO,IAAI1B,KAAA,KAAU,IAAI,IAAImB,YAAA,KAAiB,IAAI,EAAE;IAClDmE,cAAA,GAAiBrF,YAAA,aAAAA,YAAA,cAAAA,YAAA,GAAgB,EAAE;IACnC8B,aAAA,CAAca,OAAO,CAAC5C,KAAK,GAAG,IAAI;IAClC+B,aAAA,CAAca,OAAO,CAACR,OAAO,GAAG;EAClC,OAAO;IACL,MAAMqC,YAAA,GAAe/F,cAAA,CAAeyC,YAAA,EAAcZ,SAAA;IAClDwB,aAAA,CAAca,OAAO,CAAC5C,KAAK,GAAGyE,YAAA;IAC9B1C,aAAA,CAAca,OAAO,CAACR,OAAO,GAAGzD,QAAA,CAAS8F,YAAA,EAActE,GAAA,EAAKC,GAAA;IAC5D,IAAIoB,YAAA,EAAc;MAChB8D,cAAA,GAAiBrF,YAAA,aAAAA,YAAA,cAAAA,YAAA,GAAgByD,MAAA,CAAOe,YAAA,CAAa;IACvD,OAAO;MACLa,cAAA,GAAiB5B,MAAA,CAAOe,YAAA;IAC1B;EACF;EAEApD,KAAA,CAAMP,KAAK,CAACd,KAAK,GAAGsF,cAAA;EACpBjE,KAAA,CAAMP,KAAK,CAAC,gBAAgB,GAAGX,GAAA;EAC/BkB,KAAA,CAAMP,KAAK,CAAC,gBAAgB,GAAGV,GAAA;EAC/BiB,KAAA,CAAMP,KAAK,CAAC,gBAAgB,GAAGK,YAAA,aAAAA,YAAA,cAAAA,YAAA,GAAgBM,SAAS;MACxB8D,0BAAA;EAAhClE,KAAA,CAAMP,KAAK,CAAC,iBAAiB,GAAG,CAAAyE,0BAAA,GAAAlE,KAAA,CAAMP,KAAK,CAAC,iBAAiB,cAA7ByE,0BAAA,cAAAA,0BAAA,GAAkCvF,KAAC,KAAUyB,SAAA,IAAaxB,YAAA,IAAiBwB,SAAU;EACrHJ,KAAA,CAAMP,KAAK,CAACL,QAAQ,GAAG5C,cAAA,CAAewD,KAAA,CAAMP,KAAK,CAACL,QAAQ,EAAE+C,iBAAA;EAC5DnC,KAAA,CAAMP,KAAK,CAAC0E,MAAM,GAAG3H,cAAA,CAAewD,KAAA,CAAMP,KAAK,CAAC0E,MAAM,EAAEzB,UAAA;EACxD1C,KAAA,CAAMP,KAAK,CAAC2E,SAAS,GAAG5H,cAAA,CAAewD,KAAA,CAAMP,KAAK,CAAC2E,SAAS,EAAEzB,aAAA;EAC9D3C,KAAA,CAAMP,KAAK,CAAC4E,OAAO,GAAG7H,cAAA,CAAewD,KAAA,CAAMP,KAAK,CAAC4E,OAAO,EAAErB,WAAA;EAE1DhD,KAAA,CAAMN,eAAe,CAAC4E,WAAW,GAAG9H,cAAA,CAAe+F,wBAAA,EAA0BvC,KAAA,CAAMN,eAAe,CAAC4E,WAAW;EAC9GtE,KAAA,CAAMN,eAAe,CAAC6E,SAAS,GAAG/H,cAAA,CAAewD,KAAA,CAAMN,eAAe,CAAC6E,SAAS,EAAE9B,wBAAA;EAClFzC,KAAA,CAAMN,eAAe,CAAC8E,YAAY,GAAGhI,cAAA,CAAewD,KAAA,CAAMN,eAAe,CAAC8E,YAAY,EAAE/B,wBAAA;EAExFzC,KAAA,CAAML,eAAe,CAAC2E,WAAW,GAAG9H,cAAA,CAAegG,wBAAA,EAA0BxC,KAAA,CAAML,eAAe,CAAC2E,WAAW;EAC9GtE,KAAA,CAAML,eAAe,CAAC4E,SAAS,GAAG/H,cAAA,CAAewD,KAAA,CAAML,eAAe,CAAC4E,SAAS,EAAE9B,wBAAA;EAClFzC,KAAA,CAAML,eAAe,CAAC6E,YAAY,GAAGhI,cAAA,CAAewD,KAAA,CAAML,eAAe,CAAC6E,YAAY,EAAE/B,wBAAA;EAExF,OAAOzC,KAAA;AACT"}

package/lib/components/SpinButton/useSpinButtonStyles.js

@@ -1,17 +1,17 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from "@griffel/react";
-import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const spinButtonClassNames = {
-  root: "fui-SpinButton",
-  input: "fui-SpinButton__input",
-  incrementButton: "fui-SpinButton__incrementButton",
-  decrementButton: "fui-SpinButton__decrementButton"
+  root: 'fui-SpinButton',
+  input: 'fui-SpinButton__input',
+  incrementButton: 'fui-SpinButton__incrementButton',
+  decrementButton: 'fui-SpinButton__decrementButton'
 };
 const spinButtonExtraClassNames = {
-  buttonActive: "fui-SpinButton__button_active"
+  buttonActive: 'fui-SpinButton__button_active'
 };
 const fieldHeights = {
-  small: "24px",
-  medium: "32px"
+  small: '24px',
+  medium: '32px'
 };
 const useRootClassName = /*#__PURE__*/__resetStyles("rkqmps4", "r1trw52p", [".rkqmps4{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--borderRadiusMedium);}", ".rkqmps4::before{content:\"\";box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusMedium);}", ".rkqmps4::after{box-sizing:border-box;content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:20;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rkqmps4::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rkqmps4:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rkqmps4:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rkqmps4:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rkqmps4:focus-within{outline:2px solid transparent;}", ".r1trw52p{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--borderRadiusMedium);}", ".r1trw52p::before{content:\"\";box-sizing:border-box;position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusMedium);}", ".r1trw52p::after{box-sizing:border-box;content:\"\";position:absolute;left:0;bottom:0;right:0;z-index:20;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1trw52p::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1trw52p:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1trw52p:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1trw52p:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1trw52p:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
@@ -243,15 +243,15 @@ export const useSpinButtonStyles_unstable = state => {
     size
   } = state;
   const disabled = state.input.disabled;
-  const invalid = `${state.input["aria-invalid"]}` === "true";
-  const filled = appearance.startsWith("filled");
+  const invalid = `${state.input['aria-invalid']}` === 'true';
+  const filled = appearance.startsWith('filled');
   const rootStyles = useRootStyles();
   const buttonStyles = useButtonStyles();
   const buttonDisabledStyles = useButtonDisabledStyles();
   const inputStyles = useInputStyles();
-  state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === "outline" && rootStyles.outlineInteractive, !disabled && appearance === "underline" && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
-  state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === "up" && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === "small" && buttonStyles.incrementButtonSmall, (atBound === "max" || atBound === "both") && buttonDisabledStyles.base, (atBound === "max" || atBound === "both") && buttonDisabledStyles[appearance], state.incrementButton.className);
-  state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === "down" && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === "small" && buttonStyles.decrementButtonSmall, (atBound === "min" || atBound === "both") && buttonDisabledStyles.base, (atBound === "min" || atBound === "both") && buttonDisabledStyles[appearance], state.decrementButton.className);
+  state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+  state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
+  state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
   state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
   return state;
 };

package/lib/components/SpinButtonField/SpinButtonField.js

@@ -1,5 +1,5 @@
-/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from "@fluentui/react-field";
-import { SpinButton, spinButtonClassNames } from "../../SpinButton";
+/* eslint-disable deprecation/deprecation */import { getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';
+import { SpinButton, spinButtonClassNames } from '../../SpinButton';
 /** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */
 export const spinButtonFieldClassNames = /*#__PURE__*/getDeprecatedFieldClassNames(spinButtonClassNames.root);
 /** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */

package/lib/components/SpinButtonField/index.js

@@ -1,2 +1,2 @@
-export * from "./SpinButtonField";
+export * from './SpinButtonField';
 //# sourceMappingURL=index.js.map

package/lib/index.js

@@ -1,4 +1,4 @@
-export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from "./SpinButton";
+export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable } from './SpinButton';
 // eslint-disable-next-line deprecation/deprecation
-export { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from "./SpinButtonField";
+export { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';
 //# sourceMappingURL=index.js.map

package/lib/utils/clamp.js

@@ -3,7 +3,7 @@ export const clamp = (value, min, max) => {
   if (min !== undefined) {
     if (max !== undefined && min > max) {
       const error = new Error();
-      if (process.env.NODE_ENV !== "production") {
+      if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
         console.error([`"min" value "${min}" is greater than "max" value "${max}".`, '"min" must be less than or equal to "max".', `Returning value "${value}".`, error.stack].join());
       }

package/lib/utils/getBound.js

@@ -1,12 +1,12 @@
 export const getBound = (value, min, max) => {
   if (min !== undefined && value === min) {
     if (max === min) {
-      return "both";
+      return 'both';
     }
-    return "min";
+    return 'min';
   } else if (max !== undefined && value === max) {
-    return "max";
+    return 'max';
   }
-  return "none";
+  return 'none';
 };
 //# sourceMappingURL=getBound.js.map

package/lib/utils/index.js

@@ -1,4 +1,4 @@
-export * from "./clamp";
-export * from "./getBound";
-export * from "./precision";
+export * from './clamp';
+export * from './getBound';
+export * from './precision';
 //# sourceMappingURL=index.js.map

package/lib-commonjs/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/SpinButton.js"],"sourcesContent":["export * from \"./components/SpinButton/index\";\n//# sourceMappingURL=SpinButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}
+{"version":3,"sources":["../lib/SpinButton.js"],"sourcesContent":["export * from './components/SpinButton/index';\n//# sourceMappingURL=SpinButton.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,sCAAsC"}

package/lib-commonjs/SpinButtonField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/SpinButtonField.js"],"sourcesContent":["export * from \"./components/SpinButtonField/index\";\n//# sourceMappingURL=SpinButtonField.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,2CAA2C"}
+{"version":3,"sources":["../lib/SpinButtonField.js"],"sourcesContent":["export * from './components/SpinButtonField/index';\n//# sourceMappingURL=SpinButtonField.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,2CAA2C"}

package/lib-commonjs/components/SpinButton/SpinButton.js

@@ -19,6 +19,6 @@ const SpinButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     useCustomStyles(state);
     return (0, _renderSpinButton.renderSpinButton_unstable)(state);
 });
-SpinButton.displayName = "SpinButton"; //# sourceMappingURL=SpinButton.js.map
+SpinButton.displayName = 'SpinButton'; //# sourceMappingURL=SpinButton.js.map
 
 //# sourceMappingURL=SpinButton.js.map

package/lib-commonjs/components/SpinButton/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/SpinButton.js"],"sourcesContent":["import * as React from \"react\";\nimport { useSpinButton_unstable } from \"./useSpinButton\";\nimport { renderSpinButton_unstable } from \"./renderSpinButton\";\nimport { useSpinButtonStyles_unstable } from \"./useSpinButtonStyles\";\nimport { useCustomStyleHooks_unstable } from \"@fluentui/react-shared-contexts\";\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n  useSpinButtonStyles_unstable(state);\n  const {\n    useSpinButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderSpinButton_unstable(state);\n});\nSpinButton.displayName = \"SpinButton\";\n//# sourceMappingURL=SpinButton.js.map"],"names":["SpinButton","React","forwardRef","props","ref","state","useSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSpinButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;+BACgB;kCACG;qCACG;qCACA;AAItC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,iDAA4B,EAACF;IAC7B,MAAM,EACJE,8BAA8BC,gBAAe,EAC9C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,2CAAyB,EAACL;AACnC;AACAL,WAAWW,WAAW,GAAG,cACzB,sCAAsC"}
+{"version":3,"sources":["../../../lib/components/SpinButton/SpinButton.js"],"sourcesContent":["import * as React from 'react';\nimport { useSpinButton_unstable } from './useSpinButton';\nimport { renderSpinButton_unstable } from './renderSpinButton';\nimport { useSpinButtonStyles_unstable } from './useSpinButtonStyles';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n/**\n * A SpinButton allows someone to incrementally adjust a value in small steps.\n */\nexport const SpinButton = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useSpinButton_unstable(props, ref);\n  useSpinButtonStyles_unstable(state);\n  const {\n    useSpinButtonStyles_unstable: useCustomStyles\n  } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n  return renderSpinButton_unstable(state);\n});\nSpinButton.displayName = 'SpinButton';\n//# sourceMappingURL=SpinButton.js.map"],"names":["SpinButton","React","forwardRef","props","ref","state","useSpinButton_unstable","useSpinButtonStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderSpinButton_unstable","displayName"],"mappings":";;;;+BAQaA;;aAAAA;;;6DARU;+BACgB;kCACG;qCACG;qCACA;AAItC,MAAMA,aAAa,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACtE,MAAMC,QAAQC,IAAAA,qCAAsB,EAACH,OAAOC;IAC5CG,IAAAA,iDAA4B,EAACF;IAC7B,MAAM,EACJE,8BAA8BC,gBAAe,EAC9C,GAAGC,IAAAA,iDAA4B;IAChCD,gBAAgBH;IAChB,OAAOK,IAAAA,2CAAyB,EAACL;AACnC;AACAL,WAAWW,WAAW,GAAG,cACzB,sCAAsC"}

package/lib-commonjs/components/SpinButton/SpinButton.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/SpinButton.types.js"],"sourcesContent":["import * as React from \"react\";\n//# sourceMappingURL=SpinButton.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,4CAA4C"}
+{"version":3,"sources":["../../../lib/components/SpinButton/SpinButton.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=SpinButton.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,4CAA4C"}

package/lib-commonjs/components/SpinButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/index.js"],"sourcesContent":["export * from \"./SpinButton\";\nexport * from \"./SpinButton.types\";\nexport * from \"./renderSpinButton\";\nexport * from \"./useSpinButton\";\nexport * from \"./useSpinButtonStyles\";\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"sources":["../../../lib/components/SpinButton/index.js"],"sourcesContent":["export * from './SpinButton';\nexport * from './SpinButton.types';\nexport * from './renderSpinButton';\nexport * from './useSpinButton';\nexport * from './useSpinButtonStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/SpinButton/renderSpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/SpinButton/renderSpinButton.js"],"sourcesContent":["import * as React from \"react\";\nimport { getSlots } from \"@fluentui/react-utilities\";\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), /*#__PURE__*/React.createElement(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/React.createElement(slots.decrementButton, slotProps.decrementButton));\n};\n//# sourceMappingURL=renderSpinButton.js.map"],"names":["renderSpinButton_unstable","state","slots","slotProps","getSlots","React","createElement","root","input","incrementButton","decrementButton"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAG,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMO,eAAe,EAAEN,UAAUM,eAAe,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,eAAe,EAAEP,UAAUO,eAAe;AAC3S,GACA,4CAA4C"}
+{"version":3,"sources":["../../../lib/components/SpinButton/renderSpinButton.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of SpinButton\n */\nexport const renderSpinButton_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.input, slotProps.input), /*#__PURE__*/React.createElement(slots.incrementButton, slotProps.incrementButton), /*#__PURE__*/React.createElement(slots.decrementButton, slotProps.decrementButton));\n};\n//# sourceMappingURL=renderSpinButton.js.map"],"names":["renderSpinButton_unstable","state","slots","slotProps","getSlots","React","createElement","root","input","incrementButton","decrementButton"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;gCACE;AAIlB,MAAMA,4BAA4BC,CAAAA,QAAS;IAChD,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACJ,MAAMK,IAAI,EAAEJ,UAAUI,IAAI,EAAE,WAAW,GAAEF,OAAMC,aAAa,CAACJ,MAAMM,KAAK,EAAEL,UAAUK,KAAK,GAAG,WAAW,GAAEH,OAAMC,aAAa,CAACJ,MAAMO,eAAe,EAAEN,UAAUM,eAAe,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,eAAe,EAAEP,UAAUO,eAAe;AAC3S,GACA,4CAA4C"}

package/lib-commonjs/components/SpinButton/useSpinButton.js

@@ -23,20 +23,21 @@ const lerp = (start, end, percent)=>start + (end - start) * percent;
 const useSpinButton_unstable = (props, ref)=>{
     const nativeProps = (0, _reactUtilities.getPartitionedNativeProps)({
         props,
-        primarySlotTagName: "input",
+        primarySlotTagName: 'input',
         excludedPropNames: [
-            "defaultValue",
-            "max",
-            "min",
-            "onChange",
-            "size",
-            "value"
+            'defaultValue',
+            'max',
+            'min',
+            'onChange',
+            'size',
+            'value'
         ]
     });
     const overrides = (0, _reactSharedContexts.useOverrides_unstable)();
-    const { value , displayValue , defaultValue , min , max , step =1 , stepPage =1 , precision: precisionFromProps , onChange , size ="medium" , appearance =overrides.inputDefaultAppearance ?? "outline" , root , input , incrementButton , decrementButton  } = props;
+    var _overrides_inputDefaultAppearance;
+    const { value , displayValue , defaultValue , min , max , step =1 , stepPage =1 , precision: precisionFromProps , onChange , size ='medium' , appearance =(_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline' , root , input , incrementButton , decrementButton  } = props;
     const precision = _react.useMemo(()=>{
-        return precisionFromProps ?? Math.max((0, _index.calculatePrecision)(step), 0);
+        return precisionFromProps !== null && precisionFromProps !== void 0 ? precisionFromProps : Math.max((0, _index.calculatePrecision)(step), 0);
     }, [
         precisionFromProps,
         step
@@ -48,13 +49,13 @@ const useSpinButton_unstable = (props, ref)=>{
     });
     const isControlled = value !== undefined;
     const [textValue, setTextValue] = _react.useState(undefined);
-    const [keyboardSpinState, setKeyboardSpinState] = _react.useState("rest");
+    const [keyboardSpinState, setKeyboardSpinState] = _react.useState('rest');
     const internalState = _react.useRef({
         value: currentValue,
-        spinState: "rest",
+        spinState: 'rest',
         spinTime: 0,
         spinDelay: DEFAULT_SPIN_DELAY_MS,
-        atBound: currentValue !== null ? (0, _index.getBound)((0, _index.precisionRound)(currentValue, precision), min, max) : "none"
+        atBound: currentValue !== null ? (0, _index.getBound)((0, _index.precisionRound)(currentValue, precision), min, max) : 'none'
     });
     const [setStepTimeout, clearStepTimeout] = (0, _reactUtilities.useTimeout)();
     const stepValue = (e, direction, startFrom)=>{
@@ -66,8 +67,8 @@ const useSpinButton_unstable = (props, ref)=>{
             }
         }
         const val = startValue;
-        const dir = direction === "up" || direction === "upPage" ? 1 : -1;
-        const stepSize = direction === "upPage" || direction === "downPage" ? stepPage : step;
+        const dir = direction === 'up' || direction === 'upPage' ? 1 : -1;
+        const stepSize = direction === 'upPage' || direction === 'downPage' ? stepPage : step;
         if (val === null) {
             const stepStart = min === undefined ? 0 : min;
             const nullStep = (0, _index.clamp)(stepStart + stepSize * dir, min, max);
@@ -79,7 +80,7 @@ const useSpinButton_unstable = (props, ref)=>{
             newValue = (0, _index.clamp)(newValue, min, max);
         }
         commit(e, newValue);
-        if (internalState.current.spinState !== "rest") {
+        if (internalState.current.spinState !== 'rest') {
             setStepTimeout(()=>{
                 // Ease the step speed a bit
                 internalState.current.spinTime += internalState.current.spinDelay;
@@ -90,22 +91,22 @@ const useSpinButton_unstable = (props, ref)=>{
     };
     const handleInputChange = (e)=>{
         if (!internalState.current.previousTextValue) {
-            internalState.current.previousTextValue = textValue ?? String(currentValue);
+            internalState.current.previousTextValue = textValue !== null && textValue !== void 0 ? textValue : String(currentValue);
         }
         const newValue = e.target.value;
         setTextValue(newValue);
     };
     const handleIncrementMouseDown = (e)=>{
-        internalState.current.spinState = "up";
-        stepValue(e, "up");
+        internalState.current.spinState = 'up';
+        stepValue(e, 'up');
     };
     const handleDecrementMouseDown = (e)=>{
-        internalState.current.spinState = "down";
-        stepValue(e, "down");
+        internalState.current.spinState = 'down';
+        stepValue(e, 'down');
     };
     const handleStepMouseUpOrLeave = (e)=>{
         clearStepTimeout();
-        internalState.current.spinState = "rest";
+        internalState.current.spinState = 'rest';
         internalState.current.spinDelay = DEFAULT_SPIN_DELAY_MS;
         internalState.current.spinTime = 0;
     };
@@ -114,27 +115,27 @@ const useSpinButton_unstable = (props, ref)=>{
         internalState.current.previousTextValue = undefined;
     };
     const handleKeyDown = (e)=>{
-        let nextKeyboardSpinState = "rest";
+        let nextKeyboardSpinState = 'rest';
         if (e.key === _keyboardKeys.ArrowUp) {
-            stepValue(e, "up", textValue);
-            nextKeyboardSpinState = "up";
+            stepValue(e, 'up', textValue);
+            nextKeyboardSpinState = 'up';
         } else if (e.key === _keyboardKeys.ArrowDown) {
-            stepValue(e, "down", textValue);
-            nextKeyboardSpinState = "down";
+            stepValue(e, 'down', textValue);
+            nextKeyboardSpinState = 'down';
         } else if (e.key === _keyboardKeys.PageUp) {
             e.preventDefault();
-            stepValue(e, "upPage", textValue);
-            nextKeyboardSpinState = "up";
+            stepValue(e, 'upPage', textValue);
+            nextKeyboardSpinState = 'up';
         } else if (e.key === _keyboardKeys.PageDown) {
             e.preventDefault();
-            stepValue(e, "downPage", textValue);
-            nextKeyboardSpinState = "down";
+            stepValue(e, 'downPage', textValue);
+            nextKeyboardSpinState = 'down';
         } else if (!e.shiftKey && e.key === _keyboardKeys.Home && min !== undefined) {
             commit(e, min);
-            nextKeyboardSpinState = "down";
+            nextKeyboardSpinState = 'down';
         } else if (!e.shiftKey && e.key === _keyboardKeys.End && max !== undefined) {
             commit(e, max);
-            nextKeyboardSpinState = "up";
+            nextKeyboardSpinState = 'up';
         } else if (e.key === _keyboardKeys.Enter) {
             commit(e, currentValue, textValue);
             internalState.current.previousTextValue = undefined;
@@ -149,9 +150,9 @@ const useSpinButton_unstable = (props, ref)=>{
         }
     };
     const handleKeyUp = (e)=>{
-        if (keyboardSpinState !== "rest") {
-            setKeyboardSpinState("rest");
-            internalState.current.spinState = "rest";
+        if (keyboardSpinState !== 'rest') {
+            setKeyboardSpinState('rest');
+            internalState.current.spinState = 'rest';
         }
     };
     const commit = (e, newValue, newDisplayValue)=>{
@@ -168,7 +169,7 @@ const useSpinButton_unstable = (props, ref)=>{
             }
         }
         if (valueChanged || displayValueChanged) {
-            onChange?.(e, {
+            onChange === null || onChange === void 0 ? void 0 : onChange(e, {
                 value: roundedValue,
                 displayValue: newDisplayValue
             });
@@ -181,10 +182,10 @@ const useSpinButton_unstable = (props, ref)=>{
         spinState: keyboardSpinState,
         atBound: internalState.current.atBound,
         components: {
-            root: "span",
-            input: "input",
-            incrementButton: "button",
-            decrementButton: "button"
+            root: 'span',
+            input: 'input',
+            incrementButton: 'button',
+            decrementButton: 'button'
         },
         root: (0, _reactUtilities.resolveShorthand)(root, {
             required: true,
@@ -194,10 +195,10 @@ const useSpinButton_unstable = (props, ref)=>{
             required: true,
             defaultProps: {
                 ref,
-                autoComplete: "off",
-                role: "spinbutton",
+                autoComplete: 'off',
+                role: 'spinbutton',
                 appearance,
-                type: "text",
+                type: 'text',
                 ...nativeProps.primary
             }
         }),
@@ -207,8 +208,8 @@ const useSpinButton_unstable = (props, ref)=>{
                 tabIndex: -1,
                 children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronUp16Regular, null),
                 disabled: nativeProps.primary.disabled,
-                "aria-label": "Increment value",
-                type: "button"
+                'aria-label': 'Increment value',
+                type: 'button'
             }
         }),
         decrementButton: (0, _reactUtilities.resolveShorthand)(decrementButton, {
@@ -217,8 +218,8 @@ const useSpinButton_unstable = (props, ref)=>{
                 tabIndex: -1,
                 children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronDown16Regular, null),
                 disabled: nativeProps.primary.disabled,
-                "aria-label": "Decrement value",
-                type: "button"
+                'aria-label': 'Decrement value',
+                type: 'button'
             }
         })
     };
@@ -226,24 +227,25 @@ const useSpinButton_unstable = (props, ref)=>{
     if (textValue !== undefined) {
         valueToDisplay = textValue;
     } else if (value === null || currentValue === null) {
-        valueToDisplay = displayValue ?? "";
+        valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : '';
         internalState.current.value = null;
-        internalState.current.atBound = "none";
+        internalState.current.atBound = 'none';
     } else {
         const roundedValue = (0, _index.precisionRound)(currentValue, precision);
         internalState.current.value = roundedValue;
         internalState.current.atBound = (0, _index.getBound)(roundedValue, min, max);
         if (isControlled) {
-            valueToDisplay = displayValue ?? String(roundedValue);
+            valueToDisplay = displayValue !== null && displayValue !== void 0 ? displayValue : String(roundedValue);
         } else {
             valueToDisplay = String(roundedValue);
         }
     }
     state.input.value = valueToDisplay;
-    state.input["aria-valuemin"] = min;
-    state.input["aria-valuemax"] = max;
-    state.input["aria-valuenow"] = currentValue ?? undefined;
-    state.input["aria-valuetext"] = state.input["aria-valuetext"] ?? (value !== undefined && displayValue || undefined);
+    state.input['aria-valuemin'] = min;
+    state.input['aria-valuemax'] = max;
+    state.input['aria-valuenow'] = currentValue !== null && currentValue !== void 0 ? currentValue : undefined;
+    var _state_input_ariavaluetext;
+    state.input['aria-valuetext'] = (_state_input_ariavaluetext = state.input['aria-valuetext']) !== null && _state_input_ariavaluetext !== void 0 ? _state_input_ariavaluetext : value !== undefined && displayValue || undefined;
     state.input.onChange = (0, _reactUtilities.mergeCallbacks)(state.input.onChange, handleInputChange);
     state.input.onBlur = (0, _reactUtilities.mergeCallbacks)(state.input.onBlur, handleBlur);
     state.input.onKeyDown = (0, _reactUtilities.mergeCallbacks)(state.input.onKeyDown, handleKeyDown);