@fluentui/react-spinbutton 0.0.0-nightly-20240819-2052.1 → 0.0.0-nightly-20240819-2110.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +13 -22
  2. package/lib/components/SpinButton/useSpinButtonStyles.styles.js +67 -67
  3. package/lib/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js +142 -142
  5. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
  6. package/package.json +10 -10
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n small: '24px',\n medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: `var(--1679, var(--1680, ${tokens.spacingHorizontalXS}))`,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n verticalAlign: 'middle',\n backgroundColor: `var(--1681, var(--1682, ${tokens.colorNeutralBackground1}))`,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: `var(--1683, var(--1684, ${tokens.borderRadiusMedium}))`,\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: `var(--1685, var(--1686, ${tokens.colorNeutralStrokeAccessible}))`,\n borderRadius: `var(--1687, var(--1688, ${tokens.borderRadiusMedium}))`\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 // 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: `var(--1689, var(--1690, ${tokens.borderRadiusMedium}))`,\n borderBottomRightRadius: `var(--1691, var(--1692, ${tokens.borderRadiusMedium}))`,\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 // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: `var(--1693, var(--1694, ${tokens.durationUltraFast}))`,\n transitionDelay: `var(--1695, var(--1696, ${tokens.curveAccelerateMid}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: `var(--1697, var(--1698, ${tokens.durationNormal}))`,\n transitionDelay: `var(--1699, var(--1700, ${tokens.curveDecelerateMid}))`,\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: `var(--1701, var(--1702, ${tokens.colorCompoundBrandStrokePressed}))`\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: `var(--1703, var(--1704, ${tokens.spacingHorizontalS}))`\n },\n medium: {\n },\n outline: {\n },\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: `var(--1705, var(--1706, ${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: `var(--1707, var(--1708, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n borderRadius: `var(--1709, var(--1710, ${tokens.borderRadiusNone}))`\n }\n },\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: `var(--1711, var(--1712, ${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: `var(--1713, var(--1714, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n },\n '::after': {\n borderRadius: `var(--1715, var(--1716, ${tokens.borderRadiusNone}))`\n }\n },\n filled: {\n '::before': {\n border: `1px solid ${tokens.colorTransparentStroke}`\n }\n },\n 'filled-darker': {\n backgroundColor: `var(--1717, var(--1718, ${tokens.colorNeutralBackground3}))`\n },\n 'filled-lighter': {\n backgroundColor: `var(--1719, var(--1720, ${tokens.colorNeutralBackground1}))`\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 invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: `var(--1721, var(--1722, ${tokens.colorTransparentBackground}))`,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\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: `var(--1723, var(--1724, ${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 '::placeholder': {\n color: `var(--1725, var(--1726, ${tokens.colorNeutralForeground4}))`,\n opacity: 1\n }\n});\nconst useInputStyles = makeStyles({\n disabled: {\n color: `var(--1727, var(--1728, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'not-allowed',\n backgroundColor: `var(--1729, var(--1730, ${tokens.colorTransparentBackground}))`,\n '::placeholder': {\n color: `var(--1731, var(--1732, ${tokens.colorNeutralForegroundDisabled}))`\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 outlineStyle: 'none',\n height: '16px',\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: `var(--1733, var(--1734, ${tokens.colorNeutralForeground3}))`,\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n ':active': {\n outlineStyle: 'none'\n },\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: `var(--1735, var(--1736, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--1737, var(--1738, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--1739, var(--1740, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1741, var(--1742, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1743, var(--1744, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1745, var(--1746, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n cursor: 'not-allowed',\n color: `var(--1747, var(--1748, ${tokens.colorNeutralForegroundDisabled}))`\n }\n});\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: `var(--1749, var(--1750, ${tokens.borderRadiusMedium}))`,\n paddingTop: '4px',\n paddingBottom: '1px'\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: `var(--1751, var(--1752, ${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 decrementButtonSmall: {\n padding: '0px 6px 3px 4px',\n height: '12px'\n },\n outline: {\n },\n underline: {\n backgroundColor: 'transparent',\n color: `var(--1753, var(--1754, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1755, var(--1756, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--1757, var(--1758, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--1759, var(--1760, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1761, var(--1762, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1763, var(--1764, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1765, var(--1766, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n color: `var(--1767, var(--1768, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: `var(--1769, var(--1770, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1771, var(--1772, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--1773, var(--1774, ${tokens.colorNeutralBackground3Hover}))`\n },\n ':active': {\n color: `var(--1775, var(--1776, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1777, var(--1778, ${tokens.colorNeutralBackground3Pressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1779, var(--1780, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1781, var(--1782, ${tokens.colorNeutralBackground3Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--1783, var(--1784, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: `var(--1785, var(--1786, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1787, var(--1788, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--1789, var(--1790, ${tokens.colorNeutralBackground1Hover}))`\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1791, var(--1792, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--1793, var(--1794, ${tokens.colorNeutralBackground1Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--1795, var(--1796, ${tokens.colorNeutralForegroundDisabled}))`\n }\n }\n});\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n ':hover': {\n cursor: 'not-allowed'\n }\n },\n outline: {\n color: `var(--1797, var(--1798, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1799, var(--1800, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--1801, var(--1802, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1803, var(--1804, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n underline: {\n color: `var(--1805, var(--1806, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1807, var(--1808, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--1809, var(--1810, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1811, var(--1812, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-darker': {\n color: `var(--1813, var(--1814, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1815, var(--1816, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--1817, var(--1818, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1819, var(--1820, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-lighter': {\n color: `var(--1821, var(--1822, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--1823, var(--1824, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--1825, var(--1826, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--1827, var(--1828, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n }\n});\n/**\n * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n 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);\n 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);\n 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);\n state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"names":["spinButtonClassNames","useSpinButtonStyles_unstable","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","__resetStyles","r","s","useRootStyles","__styles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","Bcgcnre","Bqjgrrk","qa3bma","Biqmznv","Bm6vgfq","Bbv0w2i","eqrjj","Bk5zm6e","m598lv","ydt019","Bq4z7u6","Bdkvgpv","kj8mxx","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","p","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","B0ocmuz","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useButtonDisabledStyles","base","eoavqd","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n small: '24px',\n medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: `var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, ${tokens.spacingHorizontalXS}))`,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n verticalAlign: 'middle',\n backgroundColor: `var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, ${tokens.colorNeutralBackground1}))`,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: `var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, ${tokens.borderRadiusMedium}))`,\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: `var(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, ${tokens.colorNeutralStrokeAccessible}))`,\n borderRadius: `var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, ${tokens.borderRadiusMedium}))`\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 // 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: `var(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, ${tokens.borderRadiusMedium}))`,\n borderBottomRightRadius: `var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, ${tokens.borderRadiusMedium}))`,\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 // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: `var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, ${tokens.durationUltraFast}))`,\n transitionDelay: `var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, ${tokens.curveAccelerateMid}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: `var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, ${tokens.durationNormal}))`,\n transitionDelay: `var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, ${tokens.curveDecelerateMid}))`,\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: `var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, ${tokens.colorCompoundBrandStrokePressed}))`\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: `var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, ${tokens.spacingHorizontalS}))`\n },\n medium: {\n },\n outline: {\n },\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: `var(--ctrl-token-SpinButton-1705, var(--semantic-token-SpinButton-1706, ${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: `var(--ctrl-token-SpinButton-1707, var(--semantic-token-SpinButton-1708, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n borderRadius: `var(--ctrl-token-SpinButton-1709, var(--semantic-token-SpinButton-1710, ${tokens.borderRadiusNone}))`\n }\n },\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: `var(--ctrl-token-SpinButton-1711, var(--semantic-token-SpinButton-1712, ${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: `var(--ctrl-token-SpinButton-1713, var(--semantic-token-SpinButton-1714, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n },\n '::after': {\n borderRadius: `var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, ${tokens.borderRadiusNone}))`\n }\n },\n filled: {\n '::before': {\n border: `1px solid ${tokens.colorTransparentStroke}`\n }\n },\n 'filled-darker': {\n backgroundColor: `var(--ctrl-token-SpinButton-1717, var(--semantic-token-SpinButton-1718, ${tokens.colorNeutralBackground3}))`\n },\n 'filled-lighter': {\n backgroundColor: `var(--ctrl-token-SpinButton-1719, var(--semantic-token-SpinButton-1720, ${tokens.colorNeutralBackground1}))`\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 invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: `var(--ctrl-token-SpinButton-1721, var(--semantic-token-SpinButton-1722, ${tokens.colorTransparentBackground}))`,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\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: `var(--ctrl-token-SpinButton-1723, var(--semantic-token-SpinButton-1724, ${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 '::placeholder': {\n color: `var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, ${tokens.colorNeutralForeground4}))`,\n opacity: 1\n }\n});\nconst useInputStyles = makeStyles({\n disabled: {\n color: `var(--ctrl-token-SpinButton-1727, var(--semantic-token-SpinButton-1728, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'not-allowed',\n backgroundColor: `var(--ctrl-token-SpinButton-1729, var(--semantic-token-SpinButton-1730, ${tokens.colorTransparentBackground}))`,\n '::placeholder': {\n color: `var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, ${tokens.colorNeutralForegroundDisabled}))`\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 outlineStyle: 'none',\n height: '16px',\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1733, var(--semantic-token-SpinButton-1734, ${tokens.colorNeutralForeground3}))`,\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n ':active': {\n outlineStyle: 'none'\n },\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: `var(--ctrl-token-SpinButton-1735, var(--semantic-token-SpinButton-1736, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1737, var(--semantic-token-SpinButton-1738, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1739, var(--semantic-token-SpinButton-1740, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1741, var(--semantic-token-SpinButton-1742, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1743, var(--semantic-token-SpinButton-1744, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1745, var(--semantic-token-SpinButton-1746, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n cursor: 'not-allowed',\n color: `var(--ctrl-token-SpinButton-1747, var(--semantic-token-SpinButton-1748, ${tokens.colorNeutralForegroundDisabled}))`\n }\n});\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: `var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, ${tokens.borderRadiusMedium}))`,\n paddingTop: '4px',\n paddingBottom: '1px'\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: `var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, ${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 decrementButtonSmall: {\n padding: '0px 6px 3px 4px',\n height: '12px'\n },\n outline: {\n },\n underline: {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1753, var(--semantic-token-SpinButton-1754, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1755, var(--semantic-token-SpinButton-1756, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1757, var(--semantic-token-SpinButton-1758, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1759, var(--semantic-token-SpinButton-1760, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1761, var(--semantic-token-SpinButton-1762, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1763, var(--semantic-token-SpinButton-1764, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1765, var(--semantic-token-SpinButton-1766, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1767, var(--semantic-token-SpinButton-1768, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1769, var(--semantic-token-SpinButton-1770, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1771, var(--semantic-token-SpinButton-1772, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1773, var(--semantic-token-SpinButton-1774, ${tokens.colorNeutralBackground3Hover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1775, var(--semantic-token-SpinButton-1776, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1777, var(--semantic-token-SpinButton-1778, ${tokens.colorNeutralBackground3Pressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1779, var(--semantic-token-SpinButton-1780, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1781, var(--semantic-token-SpinButton-1782, ${tokens.colorNeutralBackground3Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1783, var(--semantic-token-SpinButton-1784, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1785, var(--semantic-token-SpinButton-1786, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1787, var(--semantic-token-SpinButton-1788, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1789, var(--semantic-token-SpinButton-1790, ${tokens.colorNeutralBackground1Hover}))`\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1791, var(--semantic-token-SpinButton-1792, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1793, var(--semantic-token-SpinButton-1794, ${tokens.colorNeutralBackground1Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1795, var(--semantic-token-SpinButton-1796, ${tokens.colorNeutralForegroundDisabled}))`\n }\n }\n});\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n ':hover': {\n cursor: 'not-allowed'\n }\n },\n outline: {\n color: `var(--ctrl-token-SpinButton-1797, var(--semantic-token-SpinButton-1798, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1799, var(--semantic-token-SpinButton-1800, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1801, var(--semantic-token-SpinButton-1802, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1803, var(--semantic-token-SpinButton-1804, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n underline: {\n color: `var(--ctrl-token-SpinButton-1805, var(--semantic-token-SpinButton-1806, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1807, var(--semantic-token-SpinButton-1808, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1809, var(--semantic-token-SpinButton-1810, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1811, var(--semantic-token-SpinButton-1812, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-darker': {\n color: `var(--ctrl-token-SpinButton-1813, var(--semantic-token-SpinButton-1814, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1815, var(--semantic-token-SpinButton-1816, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1817, var(--semantic-token-SpinButton-1818, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1819, var(--semantic-token-SpinButton-1820, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-lighter': {\n color: `var(--ctrl-token-SpinButton-1821, var(--semantic-token-SpinButton-1822, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1823, var(--semantic-token-SpinButton-1824, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1825, var(--semantic-token-SpinButton-1826, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1827, var(--semantic-token-SpinButton-1828, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n }\n});\n/**\n * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n 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);\n 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);\n 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);\n state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"names":["spinButtonClassNames","useSpinButtonStyles_unstable","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","__resetStyles","r","s","useRootStyles","__styles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","Bcgcnre","Bqjgrrk","qa3bma","Biqmznv","Bm6vgfq","Bbv0w2i","eqrjj","Bk5zm6e","m598lv","ydt019","Bq4z7u6","Bdkvgpv","kj8mxx","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","p","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","B0ocmuz","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useButtonDisabledStyles","base","eoavqd","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinbutton",
3
- "version": "0.0.0-nightly-20240819-2052.1",
3
+ "version": "0.0.0-nightly-20240819-2110.1",
4
4
  "description": "Fluent UI React SpinButton component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -26,20 +26,20 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
- "@fluentui/react-conformance": "0.0.0-nightly-20240819-2052.1",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2052.1",
31
- "@fluentui/react-label": "0.0.0-nightly-20240819-2052.1",
29
+ "@fluentui/react-conformance": "0.0.0-nightly-20240819-2110.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240819-2110.1",
31
+ "@fluentui/react-label": "0.0.0-nightly-20240819-2110.1",
32
32
  "@fluentui/scripts-api-extractor": "*",
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/keyboard-keys": "0.0.0-nightly-20240819-2052.1",
37
- "@fluentui/react-field": "0.0.0-nightly-20240819-2052.1",
36
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20240819-2110.1",
37
+ "@fluentui/react-field": "0.0.0-nightly-20240819-2110.1",
38
38
  "@fluentui/react-icons": "^2.0.245",
39
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2052.1",
40
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2052.1",
41
- "@fluentui/react-theme": "0.0.0-nightly-20240819-2052.1",
42
- "@fluentui/react-utilities": "0.0.0-nightly-20240819-2052.1",
39
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240819-2110.1",
40
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240819-2110.1",
41
+ "@fluentui/react-theme": "0.0.0-nightly-20240819-2110.1",
42
+ "@fluentui/react-utilities": "0.0.0-nightly-20240819-2110.1",
43
43
  "@griffel/react": "^1.5.22",
44
44
  "@swc/helpers": "^0.5.1"
45
45
  },