@fluentui/react-spinbutton 9.4.7 → 9.5.1

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.raw.js

@@ -0,0 +1,372 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    spinButtonClassNames: function() {
+        return spinButtonClassNames;
+    },
+    useSpinButtonStyles_unstable: function() {
+        return useSpinButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const spinButtonClassNames = {
+    root: 'fui-SpinButton',
+    input: 'fui-SpinButton__input',
+    incrementButton: 'fui-SpinButton__incrementButton',
+    decrementButton: 'fui-SpinButton__decrementButton'
+};
+const spinButtonExtraClassNames = {
+    buttonActive: 'fui-SpinButton__button_active'
+};
+const fieldHeights = {
+    small: '24px',
+    medium: '32px'
+};
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-grid',
+    gridTemplateColumns: `1fr 24px`,
+    gridTemplateRows: '1fr 1fr',
+    columnGap: _reacttheme.tokens.spacingHorizontalXS,
+    rowGap: 0,
+    position: 'relative',
+    isolation: 'isolate',
+    verticalAlign: 'middle',
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    minHeight: fieldHeights.medium,
+    padding: `0 0 0 ${_reacttheme.tokens.spacingHorizontalMNudge}`,
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    // Apply border styles on the ::before pseudo element.
+    // We cannot use ::after since that is used for selection.
+    // Using the pseudo element allows us to place the border
+    // above content in the component which ensures the buttons
+    // line up visually with the border as expected. Without this
+    // there is a bit of a gap which can become very noticeable
+    // at high zoom or when OS zoom levels are not divisible by 2
+    // (e.g., 150% on Windows in Firefox)
+    // This is most noticeable on the "outline" appearance which is
+    // also the default so it feels worth the extra ceremony to get right.
+    '::before': {
+        content: '""',
+        boxSizing: 'border-box',
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        pointerEvents: 'none',
+        zIndex: 10,
+        border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
+        borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessible,
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    '::after': {
+        boxSizing: 'border-box',
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 20,
+        // Maintaining the correct corner radius:
+        // Use the whole border-radius as the height and only put radii on the bottom corners.
+        // (Otherwise the radius would be automatically reduced to fit available space.)
+        // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.
+        height: `max(2px, ${_reacttheme.tokens.borderRadiusMedium})`,
+        borderBottomLeftRadius: _reacttheme.tokens.borderRadiusMedium,
+        borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+        // Flat 2px border:
+        // By default borderBottom will cause little "horns" on the ends. The clipPath trims them off.
+        // (This could be done without trimming using `background: linear-gradient(...)`, but using
+        // borderBottom makes it easier for people to override the color if needed.)
+        borderBottom: `2px solid ${_reacttheme.tokens.colorCompoundBrandStroke}`,
+        clipPath: 'inset(calc(100% - 2px) 0 0 0)',
+        // Animation for focus OUT
+        transform: 'scaleX(0)',
+        transitionProperty: 'transform',
+        transitionDuration: _reacttheme.tokens.durationUltraFast,
+        transitionDelay: _reacttheme.tokens.curveAccelerateMid,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+            transitionDelay: '0.01ms'
+        }
+    },
+    ':focus-within::after': {
+        // Animation for focus IN
+        transform: 'scaleX(1)',
+        transitionProperty: 'transform',
+        transitionDuration: _reacttheme.tokens.durationNormal,
+        transitionDelay: _reacttheme.tokens.curveDecelerateMid,
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            transitionDuration: '0.01ms',
+            transitionDelay: '0.01ms'
+        }
+    },
+    ':focus-within:active::after': {
+        // This is if the user clicks the field again while it's already focused
+        borderBottomColor: _reacttheme.tokens.colorCompoundBrandStrokePressed
+    },
+    ':focus-within': {
+        outline: '2px solid transparent'
+    }
+});
+const useRootStyles = (0, _react.makeStyles)({
+    small: {
+        minHeight: fieldHeights.small,
+        ..._reacttheme.typographyStyles.caption1,
+        paddingLeft: _reacttheme.tokens.spacingHorizontalS
+    },
+    medium: {},
+    outline: {},
+    outlineInteractive: {
+        ':hover::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover),
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            '::before': {
+                ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed),
+                borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+            }
+        }
+    },
+    underline: {
+        '::before': {
+            ..._react.shorthands.borderWidth(0, 0, '1px', 0),
+            borderRadius: _reacttheme.tokens.borderRadiusNone
+        }
+    },
+    underlineInteractive: {
+        ':hover::before': {
+            borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessibleHover
+        },
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':active,:focus-within': {
+            '::before': {
+                borderBottomColor: _reacttheme.tokens.colorNeutralStrokeAccessiblePressed
+            }
+        },
+        '::after': {
+            borderRadius: _reacttheme.tokens.borderRadiusNone
+        }
+    },
+    filled: {
+        '::before': {
+            border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`
+        }
+    },
+    'filled-darker': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground3
+    },
+    'filled-lighter': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    filledInteractive: {
+        // DO NOT add a space between the selectors! It changes the behavior of make-styles.
+        ':hover,:focus-within': {
+            '::before': {
+                // also handles pressed border color (:active)
+                ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive)
+            }
+        }
+    },
+    invalid: {
+        ':not(:focus-within),:hover:not(:focus-within)': {
+            '::before': {
+                ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+            }
+        }
+    },
+    disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        '::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeDisabled),
+            '@media (forced-colors: active)': {
+                ..._react.shorthands.borderColor('GrayText')
+            }
+        }
+    }
+});
+const useInputClassName = (0, _react.makeResetStyles)({
+    gridColumnStart: '1',
+    gridColumnEnd: '2',
+    gridRowStart: '1',
+    gridRowEnd: '3',
+    outlineStyle: 'none',
+    border: '0',
+    padding: '0',
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    fontWeight: 'inherit',
+    lineHeight: 'inherit',
+    width: '100%',
+    '::placeholder': {
+        color: _reacttheme.tokens.colorNeutralForeground4,
+        opacity: 1
+    }
+});
+const useInputStyles = (0, _react.makeStyles)({
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        '::placeholder': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useBaseButtonClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    width: '24px',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: '0',
+    position: 'absolute',
+    outlineStyle: 'none',
+    height: '16px',
+    // Use literal "transparent" (not from the theme) to always let the color from the root show through
+    backgroundColor: 'transparent',
+    color: _reacttheme.tokens.colorNeutralForeground3,
+    // common button layout
+    gridColumnStart: '2',
+    borderRadius: '0',
+    padding: '0 5px 0 5px',
+    ':active': {
+        outlineStyle: 'none'
+    },
+    ':enabled': {
+        ':hover': {
+            cursor: 'pointer',
+            color: _reacttheme.tokens.colorNeutralForeground3Hover,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+        },
+        [`&.${spinButtonExtraClassNames.buttonActive}`]: {
+            color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+        }
+    },
+    ':disabled': {
+        cursor: 'not-allowed',
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled
+    }
+});
+const useButtonStyles = (0, _react.makeStyles)({
+    increment: {
+        gridRowStart: '1',
+        borderTopRightRadius: _reacttheme.tokens.borderRadiusMedium,
+        paddingTop: '4px',
+        paddingBottom: '1px'
+    },
+    decrement: {
+        gridRowStart: '2',
+        borderBottomRightRadius: _reacttheme.tokens.borderRadiusMedium,
+        paddingTop: '1px',
+        paddingBottom: '4px'
+    },
+    // Padding values numbers don't align with design specs
+    // but visually the padding aligns.
+    // The icons are set in a 16x16px square but the artwork is inset from that
+    // so these padding values are computed by hand.
+    // Additionally the design uses fractional values so these are
+    // rounded to the nearest integer.
+    incrementButtonSmall: {
+        padding: '3px 6px 0px 4px',
+        height: '12px'
+    },
+    decrementButtonSmall: {
+        padding: '0px 6px 3px 4px',
+        height: '12px'
+    },
+    outline: {},
+    underline: {
+        backgroundColor: 'transparent',
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ':enabled': {
+            ':hover': {
+                color: _reacttheme.tokens.colorNeutralForeground3Hover,
+                backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
+            },
+            ':active': {
+                color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+                backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+            },
+            [`&.${spinButtonExtraClassNames.buttonActive}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+                backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+            }
+        },
+        ':disabled': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    'filled-darker': {
+        backgroundColor: 'transparent',
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ':enabled': {
+            ':hover': {
+                color: _reacttheme.tokens.colorNeutralForeground3Hover,
+                backgroundColor: _reacttheme.tokens.colorNeutralBackground3Hover
+            },
+            ':active': {
+                color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+                backgroundColor: _reacttheme.tokens.colorNeutralBackground3Pressed
+            },
+            [`&.${spinButtonExtraClassNames.buttonActive}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+                backgroundColor: _reacttheme.tokens.colorNeutralBackground3Pressed
+            }
+        },
+        ':disabled': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    },
+    'filled-lighter': {
+        backgroundColor: 'transparent',
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ':enabled': {
+            ':hover': {
+                color: _reacttheme.tokens.colorNeutralForeground3Hover,
+                backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover
+            },
+            [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
+                color: _reacttheme.tokens.colorNeutralForeground3Pressed,
+                backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed
+            }
+        },
+        ':disabled': {
+            color: _reacttheme.tokens.colorNeutralForegroundDisabled
+        }
+    }
+});
+const useSpinButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { appearance, spinState, size } = state;
+    const disabled = state.input.disabled;
+    const invalid = `${state.input['aria-invalid']}` === 'true';
+    const filled = appearance.startsWith('filled');
+    const rootStyles = useRootStyles();
+    const buttonStyles = useButtonStyles();
+    const inputStyles = useInputStyles();
+    state.root.className = (0, _react.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 = (0, _react.mergeClasses)(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, state.incrementButton.className);
+    state.decrementButton.className = (0, _react.mergeClasses)(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, state.decrementButton.className);
+    state.input.className = (0, _react.mergeClasses)(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
+    return state;
+};

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SpinButton/useSpinButtonStyles.styles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridTemplateColumns: `1fr 24px`,\n  gridTemplateRows: '1fr 1fr',\n  columnGap: tokens.spacingHorizontalXS,\n  rowGap: 0,\n  position: 'relative',\n  isolation: 'isolate',\n  verticalAlign: 'middle',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  minHeight: fieldHeights.medium,\n  padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n  borderRadius: tokens.borderRadiusMedium,\n\n  // Apply border styles on the ::before pseudo element.\n  // We cannot use ::after since that is used for selection.\n  // Using the pseudo element allows us to place the border\n  // above content in the component which ensures the buttons\n  // line up visually with the border as expected. Without this\n  // there is a bit of a gap which can become very noticeable\n  // at high zoom or when OS zoom levels are not divisible by 2\n  // (e.g., 150% on Windows in Firefox)\n  // This is most noticeable on the \"outline\" appearance which is\n  // also the default so it feels worth the extra ceremony to get right.\n  '::before': {\n    content: '\"\"',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'none',\n    zIndex: 10,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    borderRadius: tokens.borderRadiusMedium,\n  },\n\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 20,\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n    paddingLeft: tokens.spacingHorizontalS,\n  },\n\n  medium: {\n    // set by useRootClassName\n  },\n\n  outline: {\n    // set by useRootClassName\n  },\n\n  outlineInteractive: {\n    ':hover::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderWidth(0, 0, '1px', 0),\n      borderRadius: tokens.borderRadiusNone, // corners look strange if rounded\n    },\n  },\n\n  underlineInteractive: {\n    ':hover::before': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n    '::after': {\n      borderRadius: tokens.borderRadiusNone, // remove rounded corners from focus underline\n    },\n  },\n\n  filled: {\n    '::before': {\n      border: `1px solid ${tokens.colorTransparentStroke}`,\n    },\n  },\n\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n      '@media (forced-colors: active)': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  gridColumnStart: '1',\n  gridColumnEnd: '2',\n  gridRowStart: '1',\n  gridRowEnd: '3',\n  outlineStyle: 'none',\n  border: '0',\n  padding: '0',\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n  width: '100%',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n});\n\nconst useInputStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n  display: 'inline-flex',\n  width: '24px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  border: '0',\n  position: 'absolute',\n\n  outlineStyle: 'none',\n  height: '16px',\n\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  color: tokens.colorNeutralForeground3,\n\n  // common button layout\n  gridColumnStart: '2',\n  borderRadius: '0',\n  padding: '0 5px 0 5px',\n\n  ':active': {\n    outlineStyle: 'none',\n  },\n\n  ':enabled': {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground3Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  ':disabled': {\n    cursor: 'not-allowed',\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  increment: {\n    gridRowStart: '1',\n    borderTopRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '4px',\n    paddingBottom: '1px',\n  },\n  decrement: {\n    gridRowStart: '2',\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '1px',\n    paddingBottom: '4px',\n  },\n  // Padding values numbers don't align with design specs\n  // but visually the padding aligns.\n  // The icons are set in a 16x16px square but the artwork is inset from that\n  // so these padding values are computed by hand.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    padding: '3px 6px 0px 4px',\n    height: '12px',\n  },\n\n  decrementButtonSmall: {\n    padding: '0px 6px 3px 4px',\n    height: '12px',\n  },\n\n  outline: {\n    // set by useButtonClassName\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\n  'use no memo';\n\n  const { appearance, spinState, size } = state;\n  const disabled = state.input.disabled;\n  const invalid = `${state.input['aria-invalid']}` === 'true';\n  const filled = appearance.startsWith('filled');\n\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    spinButtonClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.increment,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.incrementButtonSmall,\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.decrement,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.decrementButtonSmall,\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(\n    spinButtonClassNames.input,\n    useInputClassName(),\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","display","gridTemplateColumns","gridTemplateRows","columnGap","spacingHorizontalXS","rowGap","position","isolation","verticalAlign","backgroundColor","colorNeutralBackground1","minHeight","padding","spacingHorizontalMNudge","borderRadius","borderRadiusMedium","content","boxSizing","top","right","bottom","left","pointerEvents","zIndex","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","paddingLeft","spacingHorizontalS","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","borderWidth","borderRadiusNone","underlineInteractive","filled","colorTransparentStroke","colorNeutralBackground3","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","disabled","cursor","colorTransparentBackground","colorNeutralStrokeDisabled","useInputClassName","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","outlineStyle","color","colorNeutralForeground1","fontFamily","fontSize","fontWeight","lineHeight","width","colorNeutralForeground4","opacity","useInputStyles","colorNeutralForegroundDisabled","useBaseButtonClassName","alignItems","justifyContent","colorNeutralForeground3","colorNeutralForeground3Hover","colorSubtleBackgroundHover","colorNeutralForeground3Pressed","colorSubtleBackgroundPressed","useButtonStyles","increment","borderTopRightRadius","paddingTop","paddingBottom","decrement","incrementButtonSmall","decrementButtonSmall","colorNeutralBackground3Hover","colorNeutralBackground3Pressed","colorNeutralBackground1Hover","colorNeutralBackground1Pressed","useSpinButtonStyles_unstable","state","appearance","spinState","size","startsWith","rootStyles","buttonStyles","inputStyles","className"],"mappings":"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"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n"],"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,UAAU;eAAVA,sBAAU;;IACVC,yBAAyB;eAAzBA,qCAAyB;;IACzBC,oBAAoB;eAApBA,gCAAoB;;IACpBC,4BAA4B;eAA5BA,wCAA4B;;IAC5BC,sBAAsB;eAAtBA,kCAAsB;;;4BACjB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n"],"names":["SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable"],"mappings":";;;;;;;;;;;;eACEA,sBAAU;;;eACVC,qCAAyB;;;eACzBC,gCAAoB;;;eACpBC,wCAA4B;;;eAC5BC,kCAAsB;;;4BACjB,eAAe"}

package/lib-commonjs/utils/clamp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,CAACC,OAAeC,KAAcC;IACjD,IAAIC,YAAYH;IAChB,IAAIC,QAAQG,WAAW;QACrB,IAAIF,QAAQE,aAAaH,MAAMC,KAAK;YAClC,MAAMG,QAAQ,IAAIC;YAClB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQL,KAAK,CACX;oBACE,CAAC,aAAa,EAAEJ,IAAI,+BAA+B,EAAEC,IAAI,EAAE,CAAC;oBAC5D;oBACA,CAAC,iBAAiB,EAAEF,MAAM,EAAE,CAAC;oBAC7BK,MAAMM,KAAK;iBACZ,CAACC,IAAI;YAEV;YACA,OAAOZ;QACT;QAEAG,YAAYU,KAAKX,GAAG,CAACD,KAAKE;IAC5B;IAEA,IAAID,QAAQE,WAAW;QACrBD,YAAYU,KAAKZ,GAAG,CAACC,KAAKC;IAC5B;IAEA,OAAOA;AACT"}
+{"version":3,"sources":["../src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math"],"mappings":";;;;+BAAaA;;;;;;AAAN,cAAc,CAACC,OAAeC,KAAcC;IACjD,IAAIC,YAAYH;IAChB,IAAIC,QAAQG,WAAW;QACrB,IAAIF,QAAQE,aAAaH,MAAMC,KAAK;YAClC,MAAMG,QAAQ,IAAIC;YAClB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;gBACzC,sCAAsC;gBACtCC,QAAQL,KAAK,CACX;oBACE,CAAC,aAAa,EAAEJ,IAAI,+BAA+B,EAAEC,IAAI,EAAE,CAAC;oBAC5D;oBACA,CAAC,iBAAiB,EAAEF,MAAM,EAAE,CAAC;oBAC7BK,MAAMM,KAAK;iBACZ,CAACC,IAAI;YAEV;YACA,OAAOZ;QACT;QAEAG,YAAYU,KAAKX,GAAG,CAACD,KAAKE;IAC5B;IAEA,IAAID,QAAQE,WAAW;QACrBD,YAAYU,KAAKZ,GAAG,CAACC,KAAKC;IAC5B;IAEA,OAAOA;AACT,EAAE"}

package/lib-commonjs/utils/getBound.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"names":["getBound","value","min","max","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;AAAN,MAAMA,WAAW,CAACC,OAAeC,KAAcC;IACpD,IAAID,QAAQE,aAAaH,UAAUC,KAAK;QACtC,IAAIC,QAAQD,KAAK;YACf,OAAO;QACT;QACA,OAAO;IACT,OAAO,IAAIC,QAAQC,aAAaH,UAAUE,KAAK;QAC7C,OAAO;IACT;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"names":["getBound","value","min","max","undefined"],"mappings":";;;;+BAEaA;;;;;;AAAN,iBAAiB,CAACC,OAAeC,KAAcC;IACpD,IAAID,QAAQE,aAAaH,UAAUC,KAAK;QACtC,IAAIC,QAAQD,KAAK;YACf,OAAO;QACT;QACA,OAAO;IACT,OAAO,IAAIC,QAAQC,aAAaH,UAAUE,KAAK;QAC7C,OAAO;IACT;IAEA,OAAO;AACT,EAAE"}

package/lib-commonjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { clamp } from './clamp';\nexport { getBound } from './getBound';\nexport { calculatePrecision, precisionRound } from './precision';\n"],"names":["calculatePrecision","clamp","getBound","precisionRound"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAESA,kBAAkB;eAAlBA,6BAAkB;;IAFlBC,KAAK;eAALA,YAAK;;IACLC,QAAQ;eAARA,kBAAQ;;IACYC,cAAc;eAAdA,yBAAc;;;uBAFrB;0BACG;2BAC0B"}
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { clamp } from './clamp';\nexport { getBound } from './getBound';\nexport { calculatePrecision, precisionRound } from './precision';\n"],"names":["clamp","getBound","calculatePrecision","precisionRound"],"mappings":";;;;;;;;;;;;eAESE,6BAAkB;;;eAFlBF,YAAK;;;eACLC,kBAAQ;;;eACYE,yBAAc;;;uBAFrB,UAAU;0BACP,aAAa;2BACa,cAAc"}

package/lib-commonjs/utils/precision.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"names":["calculatePrecision","precisionRound","value","groups","exec","String","length","precision","base","exp","Math","pow","round"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;CAMC;;;;;;;;;;;IACeA,kBAAAA;eAAAA;;IAyBAC,cAAAA;eAAAA;;;AAzBT,SAASD,mBAAmBE,KAAsB;IACvD;;;;;GAKC,GACD,MAAMC,SAAS,0BAA0BC,IAAI,CAACC,OAAOH;IACrD,IAAI,CAACC,QAAQ;QACX,OAAO;IACT;IACA,IAAIA,MAAM,CAAC,EAAE,EAAE;QACb,OAAO,CAACA,MAAM,CAAC,EAAE,CAACG,MAAM;IAC1B;IACA,IAAIH,MAAM,CAAC,EAAE,EAAE;QACb,OAAOA,MAAM,CAAC,EAAE,CAACG,MAAM;IACzB;IACA,OAAO;AACT;AAOO,SAASL,eAAeC,KAAa,EAAEK,SAAiB,EAAEC,OAAe,EAAE;IAChF,MAAMC,MAAMC,KAAKC,GAAG,CAACH,MAAMD;IAC3B,OAAOG,KAAKE,KAAK,CAACV,QAAQO,OAAOA;AACnC"}
+{"version":3,"sources":["../src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"names":["calculatePrecision","value","groups","exec","String","length","precisionRound","precision","base","exp","Math","pow","round"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;sBAAgBA;;;kBAyBAM;;;;AAzBT,SAASN,mBAAmBC,KAAsB;IACvD;;;;;GAKC,GACD,MAAMC,SAAS,0BAA0BC,IAAI,CAACC,OAAOH;IACrD,IAAI,CAACC,QAAQ;QACX,OAAO;IACT;IACA,IAAIA,MAAM,CAAC,EAAE,EAAE;QACb,OAAO,CAACA,MAAM,CAAC,EAAE,CAACG,MAAM;IAC1B;IACA,IAAIH,MAAM,CAAC,EAAE,EAAE;QACb,OAAOA,MAAM,CAAC,EAAE,CAACG,MAAM;IACzB;IACA,OAAO;AACT;AAOO,SAASC,eAAeL,KAAa,EAAEM,SAAiB,EAAEC,OAAe,EAAE;IAChF,MAAMC,MAAMC,KAAKC,GAAG,CAACH,MAAMD;IAC3B,OAAOG,KAAKE,KAAK,CAACX,QAAQQ,OAAOA;AACnC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.4.7",
+  "version": "9.5.1",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,12 +20,12 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-field": "^9.3.7",
+    "@fluentui/react-field": "^9.4.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },