@fluentui/react-spinbutton 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240816-2133.1

package/CHANGELOG.md

@@ -1,35 +1,26 @@
 # Change Log - @fluentui/react-spinbutton
 
-This log was last generated on Wed, 31 Jul 2024 04:17:58 GMT and should not be manually modified.
+This log was last generated on Fri, 16 Aug 2024 21:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240731-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20240731-0407.1)
+## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20240816-2133.1)
 
-Wed, 31 Jul 2024 04:17:58 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.84..@fluentui/react-spinbutton_v0.0.0-nightly-20240731-0407.1)
+Fri, 16 Aug 2024 21:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.83..@fluentui/react-spinbutton_v0.0.0-nightly-20240816-2133.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-field to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
-
-## [9.2.84](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.84)
-
-Tue, 30 Jul 2024 18:47:35 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.83..@fluentui/react-spinbutton_v9.2.84)
-
-### Patches
-
-- Bump @fluentui/react-field to v9.1.72 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
+- Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-field to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
 
 ## [9.2.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.83)
 

package/lib/components/SpinButton/useSpinButtonStyles.styles.js

@@ -13,9 +13,9 @@ const fieldHeights = {
   small: '24px',
   medium: '32px'
 };
-const useRootClassName = /*#__PURE__*/__resetStyles("r109xulx", "r1h2jnch", {
-  r: [".r109xulx{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--borderRadiusMedium);}", ".r109xulx::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);}", ".r109xulx::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r109xulx:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r109xulx:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r109xulx:focus-within{outline:2px solid transparent;}", ".r1h2jnch{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--borderRadiusMedium);}", ".r1h2jnch::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);}", ".r1h2jnch::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r1h2jnch:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r1h2jnch:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1h2jnch:focus-within{outline:2px solid transparent;}"],
-  s: ["@media screen and (prefers-reduced-motion: reduce){.r109xulx::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r109xulx:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
+const useRootClassName = /*#__PURE__*/__resetStyles("rh3jdeq", "r5s979w", {
+  r: [".rh3jdeq{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, var(--spacingHorizontalXS)));row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, var(--colorNeutralBackground1)));min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, var(--borderRadiusMedium)));}", ".rh3jdeq::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(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, var(--colorNeutralStrokeAccessible)));border-radius:var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, var(--borderRadiusMedium)));}", ".rh3jdeq::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(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, var(--borderRadiusMedium)));border-bottom-right-radius:var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, var(--durationUltraFast)));transition-delay:var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, var(--curveAccelerateMid)));}", ".rh3jdeq:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, var(--durationNormal)));transition-delay:var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, var(--curveDecelerateMid)));}", ".rh3jdeq:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}", ".rh3jdeq:focus-within{outline:2px solid transparent;}", ".r5s979w{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, var(--spacingHorizontalXS)));row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, var(--colorNeutralBackground1)));min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, var(--borderRadiusMedium)));}", ".r5s979w::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(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, var(--colorNeutralStrokeAccessible)));border-radius:var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, var(--borderRadiusMedium)));}", ".r5s979w::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(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, var(--borderRadiusMedium)));border-bottom-left-radius:var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, var(--durationUltraFast)));transition-delay:var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, var(--curveAccelerateMid)));}", ".r5s979w:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, var(--durationNormal)));transition-delay:var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, var(--curveDecelerateMid)));}", ".r5s979w:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}", ".r5s979w:focus-within{outline:2px solid transparent;}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.rh3jdeq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.rh3jdeq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r5s979w::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r5s979w:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
 });
 const useRootStyles = /*#__PURE__*/__styles({
   small: {
@@ -24,18 +24,18 @@ const useRootStyles = /*#__PURE__*/__styles({
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+    uwmqm3: ["f1j8zwyv", "f1vlli27"]
   },
   medium: {},
   outline: {},
   outlineInteractive: {
     Bo3r8zu: "f1w2y1rc",
     Hpvxnh: ["f1gofhvl", "f18htlvq"],
-    Bx11ytk: "ffcnd28",
+    Bx11ytk: "f1lfd2ic",
     B1rg0w0: ["f18htlvq", "f1gofhvl"],
     Bsg1tlv: "f6lmxco",
     Brjw370: ["fcoc0mf", "f15r4wkl"],
-    xcfy85: "f1ipdth8",
+    xcfy85: "f1v3sfeo",
     Bcc6kan: ["f15r4wkl", "fcoc0mf"]
   },
   underline: {
@@ -47,16 +47,16 @@ const useRootStyles = /*#__PURE__*/__styles({
     Budzafs: 0,
     ck0cow: 0,
     n07z76: 0,
-    Gng75u: "f1xyh2jw"
+    Gng75u: "f1dg5oo6"
   },
   underlineInteractive: {
-    Bx11ytk: "ffcnd28",
-    xcfy85: "f1ipdth8",
+    Bx11ytk: "f1iwfssu",
+    xcfy85: "f1qekkkg",
     d9w3h3: 0,
     B3778ie: 0,
     B4j8arr: 0,
     Bl18szs: 0,
-    Blrzh8d: "fkp7w9h"
+    Blrzh8d: "f1se4ths"
   },
   filled: {
     Bcgcnre: 0,
@@ -78,10 +78,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     kj8mxx: "f1kc0wz4"
   },
   "filled-darker": {
-    De3pzq: "f16xq7d1"
+    De3pzq: "f1e5utr6"
   },
   "filled-lighter": {
-    De3pzq: "fxugw4r"
+    De3pzq: "fcco06x"
   },
   filledInteractive: {
     B05mzqr: "f1xqt08",
@@ -97,7 +97,7 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   disabled: {
     Bceei9c: "fdrzuqr",
-    De3pzq: "f1c21dwh",
+    De3pzq: "f15wxwvh",
     Bq4z7u6: "f1a0lfh7",
     Bk5zm6e: ["f1p2ejm6", "fmzytvz"],
     Bqjgrrk: "fas2e61",
@@ -108,15 +108,15 @@ const useRootStyles = /*#__PURE__*/__styles({
     Imo2if: ["frjp63v", "f1lclws"]
   }
 }, {
-  d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1o236ok::before{border-top-width:0;}", ".faeg28l::before{border-right-width:0;}", ".f64aojp::before{border-left-width:0;}", ".fdw6hkg::before{border-bottom-width:1px;}", [".f1xyh2jw::before{border-radius:var(--borderRadiusNone);}", {
+  d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1j8zwyv{padding-left:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}", ".f1vlli27{padding-right:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}", ".f1o236ok::before{border-top-width:0;}", ".faeg28l::before{border-right-width:0;}", ".f64aojp::before{border-left-width:0;}", ".fdw6hkg::before{border-bottom-width:1px;}", [".f1dg5oo6::before{border-radius:var(--ctrl-token-SpinButton-1709, var(--semantic-token-SpinButton-1710, var(--borderRadiusNone)));}", {
     p: -1
-  }], [".fkp7w9h::after{border-radius:var(--borderRadiusNone);}", {
+  }], [".f1se4ths::after{border-radius:var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, var(--borderRadiusNone)));}", {
     p: -1
   }], [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
     p: -2
-  }], ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fl48pg9:not(:focus-within)::before,.fl48pg9:hover:not(:focus-within)::before{border-top-color:var(--colorPaletteRedBorder2);}", ".f1a168p3:not(:focus-within)::before,.f1a168p3:hover:not(:focus-within)::before{border-right-color:var(--colorPaletteRedBorder2);}", ".f1pvdymy:not(:focus-within)::before,.f1pvdymy:hover:not(:focus-within)::before{border-left-color:var(--colorPaletteRedBorder2);}", ".f11knvgl:not(:focus-within)::before,.f11knvgl:hover:not(:focus-within)::before{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
-  h: [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1xqt08:hover::before,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover::before,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover::before,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover::before,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
-  a: [".f6lmxco:active::before,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active::before,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active::before,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1ipdth8:active::before,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
+  }], ".f1e5utr6{background-color:var(--ctrl-token-SpinButton-1717, var(--semantic-token-SpinButton-1718, var(--colorNeutralBackground3)));}", ".fcco06x{background-color:var(--ctrl-token-SpinButton-1719, var(--semantic-token-SpinButton-1720, var(--colorNeutralBackground1)));}", ".fl48pg9:not(:focus-within)::before,.fl48pg9:hover:not(:focus-within)::before{border-top-color:var(--colorPaletteRedBorder2);}", ".f1a168p3:not(:focus-within)::before,.f1a168p3:hover:not(:focus-within)::before{border-right-color:var(--colorPaletteRedBorder2);}", ".f1pvdymy:not(:focus-within)::before,.f1pvdymy:hover:not(:focus-within)::before{border-left-color:var(--colorPaletteRedBorder2);}", ".f11knvgl:not(:focus-within)::before,.f11knvgl:hover:not(:focus-within)::before{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fdrzuqr{cursor:not-allowed;}", ".f15wxwvh{background-color:var(--ctrl-token-SpinButton-1721, var(--semantic-token-SpinButton-1722, var(--colorTransparentBackground)));}", ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fas2e61::before{border-bottom-color:var(--colorNeutralStrokeDisabled);}"],
+  h: [".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}", ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1lfd2ic:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1705, var(--semantic-token-SpinButton-1706, var(--colorNeutralStrokeAccessibleHover)));}", ".f1iwfssu:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1711, var(--semantic-token-SpinButton-1712, var(--colorNeutralStrokeAccessibleHover)));}", ".f1xqt08:hover::before,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fzt5lgo:hover::before,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f8tv3r9:hover::before,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fyhrops:hover::before,.fyhrops:focus-within::before{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
+  a: [".f6lmxco:active::before,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fcoc0mf:active::before,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f15r4wkl:active::before,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1v3sfeo:active::before,.f1v3sfeo:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1707, var(--semantic-token-SpinButton-1708, var(--colorNeutralStrokeAccessiblePressed)));}", ".f1qekkkg:active::before,.f1qekkkg:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1713, var(--semantic-token-SpinButton-1714, var(--colorNeutralStrokeAccessiblePressed)));}"],
   m: [["@media (forced-colors: active){.flb8es4::before{border-top-color:GrayText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1lclws::before{border-right-color:GrayText;}.frjp63v::before{border-left-color:GrayText;}}", {
@@ -125,28 +125,28 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }]]
 });
-const useInputClassName = /*#__PURE__*/__resetStyles("r1ljrqje", null, [".r1ljrqje{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;outline-style:none;border:0;padding:0;color:var(--colorNeutralForeground1);background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;width:100%;}", ".r1ljrqje::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r1ljrqje::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r1ljrqje::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
+const useInputClassName = /*#__PURE__*/__resetStyles("r2hmsw2", null, [".r2hmsw2{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;outline-style:none;border:0;padding:0;color:var(--ctrl-token-SpinButton-1723, var(--semantic-token-SpinButton-1724, var(--colorNeutralForeground1)));background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;width:100%;}", ".r2hmsw2::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}", ".r2hmsw2::-moz-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}", ".r2hmsw2::placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}"]);
 const useInputStyles = /*#__PURE__*/__styles({
   disabled: {
-    sj55zd: "f1s2aq7o",
+    sj55zd: "f1xwzfv3",
     Bceei9c: "fdrzuqr",
-    De3pzq: "f1c21dwh",
-    yvdlaj: "fahhnxm"
+    De3pzq: "fwiaa8s",
+    yvdlaj: "fv3kiq7"
   }
 }, {
-  d: [".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
+  d: [".f1xwzfv3{color:var(--ctrl-token-SpinButton-1727, var(--semantic-token-SpinButton-1728, var(--colorNeutralForegroundDisabled)));}", ".fdrzuqr{cursor:not-allowed;}", ".fwiaa8s{background-color:var(--ctrl-token-SpinButton-1729, var(--semantic-token-SpinButton-1730, var(--colorTransparentBackground)));}", ".fv3kiq7::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}", ".fv3kiq7::-moz-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}"]
 });
-const useBaseButtonClassName = /*#__PURE__*/__resetStyles("r1g4chgs", null, [".r1g4chgs{display:inline-flex;width:24px;align-items:center;justify-content:center;border:0;position:absolute;outline-style:none;height:16px;background-color:transparent;color:var(--colorNeutralForeground3);grid-column-start:2;border-radius:0;padding:0 5px 0 5px;}", ".r1g4chgs:active{outline-style:none;}", ".r1g4chgs:enabled:hover{cursor:pointer;color:var(--colorNeutralForeground3Hover);background-color:var(--colorSubtleBackgroundHover);}", ".r1g4chgs:enabled:active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1g4chgs:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".r1g4chgs:disabled{cursor:not-allowed;color:var(--colorNeutralForegroundDisabled);}"]);
+const useBaseButtonClassName = /*#__PURE__*/__resetStyles("r1bfueos", null, [".r1bfueos{display:inline-flex;width:24px;align-items:center;justify-content:center;border:0;position:absolute;outline-style:none;height:16px;background-color:transparent;color:var(--ctrl-token-SpinButton-1733, var(--semantic-token-SpinButton-1734, var(--colorNeutralForeground3)));grid-column-start:2;border-radius:0;padding:0 5px 0 5px;}", ".r1bfueos:active{outline-style:none;}", ".r1bfueos:enabled:hover{cursor:pointer;color:var(--ctrl-token-SpinButton-1735, var(--semantic-token-SpinButton-1736, var(--colorNeutralForeground3Hover)));background-color:var(--ctrl-token-SpinButton-1737, var(--semantic-token-SpinButton-1738, var(--colorSubtleBackgroundHover)));}", ".r1bfueos:enabled:active{color:var(--ctrl-token-SpinButton-1739, var(--semantic-token-SpinButton-1740, var(--colorNeutralForeground3Pressed)));background-color:var(--ctrl-token-SpinButton-1741, var(--semantic-token-SpinButton-1742, var(--colorSubtleBackgroundPressed)));}", ".r1bfueos:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1743, var(--semantic-token-SpinButton-1744, var(--colorNeutralForeground3Pressed)));background-color:var(--ctrl-token-SpinButton-1745, var(--semantic-token-SpinButton-1746, var(--colorSubtleBackgroundPressed)));}", ".r1bfueos:disabled{cursor:not-allowed;color:var(--ctrl-token-SpinButton-1747, var(--semantic-token-SpinButton-1748, var(--colorNeutralForegroundDisabled)));}"]);
 const useButtonStyles = /*#__PURE__*/__styles({
   increment: {
     Ijaq50: "f16hsg94",
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    B7oj6ja: ["f14jfzwc", "f1p51xtu"],
     z8tnut: "f10ra9hq",
     Byoj8tv: "f1brlhvm"
   },
   decrement: {
     Ijaq50: "faunodf",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Bbmb7ep: ["f1gl9ztj", "fekja2g"],
     z8tnut: "f1sl3k7w",
     Byoj8tv: "f1y2xyjm"
   },
@@ -169,37 +169,37 @@ const useButtonStyles = /*#__PURE__*/__styles({
   outline: {},
   underline: {
     De3pzq: "f3rmtva",
-    sj55zd: "f11d4kpn",
-    r4wkhp: "f1no7wuu",
-    B95qlz1: "f1bifk9c",
-    p743kt: "fp1zg4s",
-    B7xitij: "fo6hitd",
-    B6siaa6: "f1wiab75",
-    Ba9qmo4: "fj9zm5z",
-    Dyrjrp: "f1cqwcg4"
+    sj55zd: "ftjtjgg",
+    r4wkhp: "fmxr6h1",
+    B95qlz1: "f159rbb9",
+    p743kt: "f1f61phu",
+    B7xitij: "f11bru7e",
+    B6siaa6: "f1wnbjcb",
+    Ba9qmo4: "f19zu09e",
+    Dyrjrp: "f59gf7h"
   },
   "filled-darker": {
     De3pzq: "f3rmtva",
-    sj55zd: "f11d4kpn",
-    r4wkhp: "f1no7wuu",
-    B95qlz1: "fwwxidx",
-    p743kt: "fp1zg4s",
-    B7xitij: "f14i52sd",
-    B6siaa6: "f1wiab75",
-    Ba9qmo4: "fwry2ka",
-    Dyrjrp: "f1cqwcg4"
+    sj55zd: "ftz87y7",
+    r4wkhp: "fyzdehd",
+    B95qlz1: "f1t0huit",
+    p743kt: "fqvhx9d",
+    B7xitij: "f52eh0d",
+    B6siaa6: "fzhlmla",
+    Ba9qmo4: "f3v2m6a",
+    Dyrjrp: "f50q7fd"
   },
   "filled-lighter": {
     De3pzq: "f3rmtva",
-    sj55zd: "f11d4kpn",
-    r4wkhp: "f1no7wuu",
-    B95qlz1: "f1yywxnv",
-    drw0cw: "fzaa11h",
-    idzz8t: "f4fpmm9",
-    Dyrjrp: "f1cqwcg4"
+    sj55zd: "ff0mds",
+    r4wkhp: "fc4lrwn",
+    B95qlz1: "fwg3vk8",
+    drw0cw: "fzac2m3",
+    idzz8t: "fdfsw6w",
+    Dyrjrp: "f9zhxxo"
   }
 }, {
-  d: [".f16hsg94{grid-row-start:1;}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10ra9hq{padding-top:4px;}", ".f1brlhvm{padding-bottom:1px;}", ".faunodf{grid-row-start:2;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1sl3k7w{padding-top:1px;}", ".f1y2xyjm{padding-bottom:4px;}", [".f4lv8q1{padding:3px 6px 0px 4px;}", {
+  d: [".f16hsg94{grid-row-start:1;}", ".f14jfzwc{border-top-right-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}", ".f1p51xtu{border-top-left-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}", ".f10ra9hq{padding-top:4px;}", ".f1brlhvm{padding-bottom:1px;}", ".faunodf{grid-row-start:2;}", ".f1gl9ztj{border-bottom-right-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}", ".fekja2g{border-bottom-left-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}", ".f1sl3k7w{padding-top:1px;}", ".f1y2xyjm{padding-bottom:4px;}", [".f4lv8q1{padding:3px 6px 0px 4px;}", {
     p: -1
   }], [".fm3uwd2{padding:3px 4px 0px 6px;}", {
     p: -1
@@ -207,7 +207,7 @@ const useButtonStyles = /*#__PURE__*/__styles({
     p: -1
   }], [".frkrfqj{padding:0px 4px 3px 6px;}", {
     p: -1
-  }], ".f3rmtva{background-color:transparent;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1no7wuu:enabled:hover{color:var(--colorNeutralForeground3Hover);}", ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fp1zg4s:enabled:active{color:var(--colorNeutralForeground3Pressed);}", ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1wiab75:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}", ".fj9zm5z:enabled.fui-SpinButton__button_active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1cqwcg4:disabled{color:var(--colorNeutralForegroundDisabled);}", ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}", ".fwry2ka:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground3Pressed);}", ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fzaa11h:enabled:active,.fzaa11h:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}", ".f4fpmm9:enabled:active,.f4fpmm9:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground1Pressed);}"]
+  }], ".f3rmtva{background-color:transparent;}", ".ftjtjgg{color:var(--ctrl-token-SpinButton-1753, var(--semantic-token-SpinButton-1754, var(--colorNeutralForeground3)));}", ".fmxr6h1:enabled:hover{color:var(--ctrl-token-SpinButton-1755, var(--semantic-token-SpinButton-1756, var(--colorNeutralForeground3Hover)));}", ".f159rbb9:enabled:hover{background-color:var(--ctrl-token-SpinButton-1757, var(--semantic-token-SpinButton-1758, var(--colorSubtleBackgroundHover)));}", ".f1f61phu:enabled:active{color:var(--ctrl-token-SpinButton-1759, var(--semantic-token-SpinButton-1760, var(--colorNeutralForeground3Pressed)));}", ".f11bru7e:enabled:active{background-color:var(--ctrl-token-SpinButton-1761, var(--semantic-token-SpinButton-1762, var(--colorSubtleBackgroundPressed)));}", ".f1wnbjcb:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1763, var(--semantic-token-SpinButton-1764, var(--colorNeutralForeground3Pressed)));}", ".f19zu09e:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1765, var(--semantic-token-SpinButton-1766, var(--colorSubtleBackgroundPressed)));}", ".f59gf7h:disabled{color:var(--ctrl-token-SpinButton-1767, var(--semantic-token-SpinButton-1768, var(--colorNeutralForegroundDisabled)));}", ".ftz87y7{color:var(--ctrl-token-SpinButton-1769, var(--semantic-token-SpinButton-1770, var(--colorNeutralForeground3)));}", ".fyzdehd:enabled:hover{color:var(--ctrl-token-SpinButton-1771, var(--semantic-token-SpinButton-1772, var(--colorNeutralForeground3Hover)));}", ".f1t0huit:enabled:hover{background-color:var(--ctrl-token-SpinButton-1773, var(--semantic-token-SpinButton-1774, var(--colorNeutralBackground3Hover)));}", ".fqvhx9d:enabled:active{color:var(--ctrl-token-SpinButton-1775, var(--semantic-token-SpinButton-1776, var(--colorNeutralForeground3Pressed)));}", ".f52eh0d:enabled:active{background-color:var(--ctrl-token-SpinButton-1777, var(--semantic-token-SpinButton-1778, var(--colorNeutralBackground3Pressed)));}", ".fzhlmla:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1779, var(--semantic-token-SpinButton-1780, var(--colorNeutralForeground3Pressed)));}", ".f3v2m6a:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1781, var(--semantic-token-SpinButton-1782, var(--colorNeutralBackground3Pressed)));}", ".f50q7fd:disabled{color:var(--ctrl-token-SpinButton-1783, var(--semantic-token-SpinButton-1784, var(--colorNeutralForegroundDisabled)));}", ".ff0mds{color:var(--ctrl-token-SpinButton-1785, var(--semantic-token-SpinButton-1786, var(--colorNeutralForeground3)));}", ".fc4lrwn:enabled:hover{color:var(--ctrl-token-SpinButton-1787, var(--semantic-token-SpinButton-1788, var(--colorNeutralForeground3Hover)));}", ".fwg3vk8:enabled:hover{background-color:var(--ctrl-token-SpinButton-1789, var(--semantic-token-SpinButton-1790, var(--colorNeutralBackground1Hover)));}", ".fzac2m3:enabled:active,.fzac2m3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1791, var(--semantic-token-SpinButton-1792, var(--colorNeutralForeground3Pressed)));}", ".fdfsw6w:enabled:active,.fdfsw6w:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1793, var(--semantic-token-SpinButton-1794, var(--colorNeutralBackground1Pressed)));}", ".f9zhxxo:disabled{color:var(--ctrl-token-SpinButton-1795, var(--semantic-token-SpinButton-1796, var(--colorNeutralForegroundDisabled)));}"]
 });
 // Cannot just disable button as they need to remain
 // exposed to ATs like screen readers.
@@ -217,43 +217,43 @@ const useButtonDisabledStyles = /*#__PURE__*/__styles({
     eoavqd: "fphbwmw"
   },
   outline: {
-    sj55zd: "f1s2aq7o",
-    r4wkhp: "few7wvn",
+    sj55zd: "flmj02y",
+    r4wkhp: "fdrpovn",
     B95qlz1: "f110wuh6",
-    p743kt: "f9s4mys",
+    p743kt: "frkll7s",
     B7xitij: "f10404rc",
-    B6siaa6: "fwzu9cz",
+    B6siaa6: "fdjk730",
     Ba9qmo4: "f1snwkb6"
   },
   underline: {
-    sj55zd: "f1s2aq7o",
-    r4wkhp: "few7wvn",
+    sj55zd: "f1sgg4g9",
+    r4wkhp: "f1v7pcia",
     B95qlz1: "f110wuh6",
-    p743kt: "f9s4mys",
+    p743kt: "f1813qqb",
     B7xitij: "f10404rc",
-    B6siaa6: "fwzu9cz",
+    B6siaa6: "f1hs5qo3",
     Ba9qmo4: "f1snwkb6"
   },
   "filled-darker": {
-    sj55zd: "f1s2aq7o",
-    r4wkhp: "few7wvn",
+    sj55zd: "f1ig0yi1",
+    r4wkhp: "f1x19cl1",
     B95qlz1: "f110wuh6",
-    p743kt: "f9s4mys",
+    p743kt: "fxqoy03",
     B7xitij: "f10404rc",
-    B6siaa6: "fwzu9cz",
+    B6siaa6: "fbp5f9",
     Ba9qmo4: "f1snwkb6"
   },
   "filled-lighter": {
-    sj55zd: "f1s2aq7o",
-    r4wkhp: "few7wvn",
+    sj55zd: "fmmuwj6",
+    r4wkhp: "f14oh8th",
     B95qlz1: "f110wuh6",
-    p743kt: "f9s4mys",
+    p743kt: "f1wn8trp",
     B7xitij: "f10404rc",
-    B6siaa6: "fwzu9cz",
+    B6siaa6: "f1n6vm53",
     Ba9qmo4: "f1snwkb6"
   }
 }, {
-  d: [".fdrzuqr{cursor:not-allowed;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".few7wvn:enabled:hover{color:var(--colorNeutralForegroundDisabled);}", ".f110wuh6:enabled:hover{background-color:transparent;}", ".f9s4mys:enabled:active{color:var(--colorNeutralForegroundDisabled);}", ".f10404rc:enabled:active{background-color:transparent;}", ".fwzu9cz:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForegroundDisabled);}", ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}"],
+  d: [".fdrzuqr{cursor:not-allowed;}", ".flmj02y{color:var(--ctrl-token-SpinButton-1797, var(--semantic-token-SpinButton-1798, var(--colorNeutralForegroundDisabled)));}", ".fdrpovn:enabled:hover{color:var(--ctrl-token-SpinButton-1799, var(--semantic-token-SpinButton-1800, var(--colorNeutralForegroundDisabled)));}", ".f110wuh6:enabled:hover{background-color:transparent;}", ".frkll7s:enabled:active{color:var(--ctrl-token-SpinButton-1801, var(--semantic-token-SpinButton-1802, var(--colorNeutralForegroundDisabled)));}", ".f10404rc:enabled:active{background-color:transparent;}", ".fdjk730:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1803, var(--semantic-token-SpinButton-1804, var(--colorNeutralForegroundDisabled)));}", ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}", ".f1sgg4g9{color:var(--ctrl-token-SpinButton-1805, var(--semantic-token-SpinButton-1806, var(--colorNeutralForegroundDisabled)));}", ".f1v7pcia:enabled:hover{color:var(--ctrl-token-SpinButton-1807, var(--semantic-token-SpinButton-1808, var(--colorNeutralForegroundDisabled)));}", ".f1813qqb:enabled:active{color:var(--ctrl-token-SpinButton-1809, var(--semantic-token-SpinButton-1810, var(--colorNeutralForegroundDisabled)));}", ".f1hs5qo3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1811, var(--semantic-token-SpinButton-1812, var(--colorNeutralForegroundDisabled)));}", ".f1ig0yi1{color:var(--ctrl-token-SpinButton-1813, var(--semantic-token-SpinButton-1814, var(--colorNeutralForegroundDisabled)));}", ".f1x19cl1:enabled:hover{color:var(--ctrl-token-SpinButton-1815, var(--semantic-token-SpinButton-1816, var(--colorNeutralForegroundDisabled)));}", ".fxqoy03:enabled:active{color:var(--ctrl-token-SpinButton-1817, var(--semantic-token-SpinButton-1818, var(--colorNeutralForegroundDisabled)));}", ".fbp5f9:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1819, var(--semantic-token-SpinButton-1820, var(--colorNeutralForegroundDisabled)));}", ".fmmuwj6{color:var(--ctrl-token-SpinButton-1821, var(--semantic-token-SpinButton-1822, var(--colorNeutralForegroundDisabled)));}", ".f14oh8th:enabled:hover{color:var(--ctrl-token-SpinButton-1823, var(--semantic-token-SpinButton-1824, var(--colorNeutralForegroundDisabled)));}", ".f1wn8trp:enabled:active{color:var(--ctrl-token-SpinButton-1825, var(--semantic-token-SpinButton-1826, var(--colorNeutralForegroundDisabled)));}", ".f1n6vm53:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1827, var(--semantic-token-SpinButton-1828, var(--colorNeutralForegroundDisabled)));}"],
   h: [".fphbwmw:hover{cursor:not-allowed;}"]
 });
 /**

package/lib/components/SpinButton/useSpinButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","r","s","useRootStyles","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","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className"],"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: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    position: 'relative',\n    isolation: 'isolate',\n    verticalAlign: 'middle',\n    backgroundColor: tokens.colorNeutralBackground1,\n    minHeight: fieldHeights.medium,\n    padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n    borderRadius: 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: tokens.colorNeutralStrokeAccessible,\n        borderRadius: 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: tokens.borderRadiusMedium,\n        borderBottomRightRadius: 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: tokens.durationUltraFast,\n        transitionDelay: 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: tokens.durationNormal,\n        transitionDelay: 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: 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: tokens.spacingHorizontalS\n    },\n    medium: {\n    },\n    outline: {\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    underline: {\n        '::before': {\n            ...shorthands.borderWidth(0, 0, '1px', 0),\n            borderRadius: tokens.borderRadiusNone\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\n        }\n    },\n    filled: {\n        '::before': {\n            border: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: 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: 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: 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: tokens.colorNeutralForeground4,\n        opacity: 1\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});\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: 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: 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        cursor: 'not-allowed',\n        color: tokens.colorNeutralForegroundDisabled\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    decrementButtonSmall: {\n        padding: '0px 6px 3px 4px',\n        height: '12px'\n    },\n    outline: {\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        ':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        ':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// 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: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    underline: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    'filled-darker': {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    'filled-lighter': {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","r","s","useRootStyles","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","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -30,26 +30,26 @@ const fieldHeights = {
     small: '24px',
     medium: '32px'
 };
-const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r109xulx", "r1h2jnch", {
+const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rh3jdeq", "r5s979w", {
     r: [
-        ".r109xulx{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--borderRadiusMedium);}",
-        ".r109xulx::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);}",
-        ".r109xulx::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
-        ".r109xulx:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
-        ".r109xulx:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
-        ".r109xulx:focus-within{outline:2px solid transparent;}",
-        ".r1h2jnch{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--borderRadiusMedium);}",
-        ".r1h2jnch::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);}",
-        ".r1h2jnch::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);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
-        ".r1h2jnch:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
-        ".r1h2jnch:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
-        ".r1h2jnch:focus-within{outline:2px solid transparent;}"
+        ".rh3jdeq{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, var(--spacingHorizontalXS)));row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, var(--colorNeutralBackground1)));min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, var(--borderRadiusMedium)));}",
+        ".rh3jdeq::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(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, var(--colorNeutralStrokeAccessible)));border-radius:var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, var(--borderRadiusMedium)));}",
+        ".rh3jdeq::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(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, var(--borderRadiusMedium)));border-bottom-right-radius:var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, var(--durationUltraFast)));transition-delay:var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, var(--curveAccelerateMid)));}",
+        ".rh3jdeq:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, var(--durationNormal)));transition-delay:var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, var(--curveDecelerateMid)));}",
+        ".rh3jdeq:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}",
+        ".rh3jdeq:focus-within{outline:2px solid transparent;}",
+        ".r5s979w{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;column-gap:var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, var(--spacingHorizontalXS)));row-gap:0;position:relative;isolation:isolate;vertical-align:middle;background-color:var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, var(--colorNeutralBackground1)));min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, var(--borderRadiusMedium)));}",
+        ".r5s979w::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(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, var(--colorNeutralStrokeAccessible)));border-radius:var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, var(--borderRadiusMedium)));}",
+        ".r5s979w::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(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, var(--borderRadiusMedium)));border-bottom-left-radius:var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, var(--borderRadiusMedium)));border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, var(--durationUltraFast)));transition-delay:var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, var(--curveAccelerateMid)));}",
+        ".r5s979w:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, var(--durationNormal)));transition-delay:var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, var(--curveDecelerateMid)));}",
+        ".r5s979w:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}",
+        ".r5s979w:focus-within{outline:2px solid transparent;}"
     ],
     s: [
-        "@media screen and (prefers-reduced-motion: reduce){.r109xulx::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.r109xulx:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
+        "@media screen and (prefers-reduced-motion: reduce){.rh3jdeq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.rh3jdeq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r5s979w::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r5s979w:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
     ]
 });
 const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -60,8 +60,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         Bhrd7zp: "figsok6",
         Bg96gwp: "fwrc4pm",
         uwmqm3: [
-            "f1f5gg8d",
-            "f1vdfbxk"
+            "f1j8zwyv",
+            "f1vlli27"
         ]
     },
     medium: {},
@@ -72,7 +72,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f1gofhvl",
             "f18htlvq"
         ],
-        Bx11ytk: "ffcnd28",
+        Bx11ytk: "f1lfd2ic",
         B1rg0w0: [
             "f18htlvq",
             "f1gofhvl"
@@ -82,7 +82,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "fcoc0mf",
             "f15r4wkl"
         ],
-        xcfy85: "f1ipdth8",
+        xcfy85: "f1v3sfeo",
         Bcc6kan: [
             "f15r4wkl",
             "fcoc0mf"
@@ -103,16 +103,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         Budzafs: 0,
         ck0cow: 0,
         n07z76: 0,
-        Gng75u: "f1xyh2jw"
+        Gng75u: "f1dg5oo6"
     },
     underlineInteractive: {
-        Bx11ytk: "ffcnd28",
-        xcfy85: "f1ipdth8",
+        Bx11ytk: "f1iwfssu",
+        xcfy85: "f1qekkkg",
         d9w3h3: 0,
         B3778ie: 0,
         B4j8arr: 0,
         Bl18szs: 0,
-        Blrzh8d: "fkp7w9h"
+        Blrzh8d: "f1se4ths"
     },
     filled: {
         Bcgcnre: 0,
@@ -134,10 +134,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         kj8mxx: "f1kc0wz4"
     },
     "filled-darker": {
-        De3pzq: "f16xq7d1"
+        De3pzq: "f1e5utr6"
     },
     "filled-lighter": {
-        De3pzq: "fxugw4r"
+        De3pzq: "fcco06x"
     },
     filledInteractive: {
         B05mzqr: "f1xqt08",
@@ -165,7 +165,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     },
     disabled: {
         Bceei9c: "fdrzuqr",
-        De3pzq: "f1c21dwh",
+        De3pzq: "f15wxwvh",
         Bq4z7u6: "f1a0lfh7",
         Bk5zm6e: [
             "f1p2ejm6",
@@ -194,20 +194,20 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fy9rknc{font-size:var(--fontSizeBase200);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
         ".fwrc4pm{line-height:var(--lineHeightBase200);}",
-        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
-        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1j8zwyv{padding-left:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}",
+        ".f1vlli27{padding-right:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}",
         ".f1o236ok::before{border-top-width:0;}",
         ".faeg28l::before{border-right-width:0;}",
         ".f64aojp::before{border-left-width:0;}",
         ".fdw6hkg::before{border-bottom-width:1px;}",
         [
-            ".f1xyh2jw::before{border-radius:var(--borderRadiusNone);}",
+            ".f1dg5oo6::before{border-radius:var(--ctrl-token-SpinButton-1709, var(--semantic-token-SpinButton-1710, var(--borderRadiusNone)));}",
             {
                 p: -1
             }
         ],
         [
-            ".fkp7w9h::after{border-radius:var(--borderRadiusNone);}",
+            ".f1se4ths::after{border-radius:var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, var(--borderRadiusNone)));}",
             {
                 p: -1
             }
@@ -218,14 +218,14 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
                 p: -2
             }
         ],
-        ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
-        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        ".f1e5utr6{background-color:var(--ctrl-token-SpinButton-1717, var(--semantic-token-SpinButton-1718, var(--colorNeutralBackground3)));}",
+        ".fcco06x{background-color:var(--ctrl-token-SpinButton-1719, var(--semantic-token-SpinButton-1720, var(--colorNeutralBackground1)));}",
         ".fl48pg9:not(:focus-within)::before,.fl48pg9:hover:not(:focus-within)::before{border-top-color:var(--colorPaletteRedBorder2);}",
         ".f1a168p3:not(:focus-within)::before,.f1a168p3:hover:not(:focus-within)::before{border-right-color:var(--colorPaletteRedBorder2);}",
         ".f1pvdymy:not(:focus-within)::before,.f1pvdymy:hover:not(:focus-within)::before{border-left-color:var(--colorPaletteRedBorder2);}",
         ".f11knvgl:not(:focus-within)::before,.f11knvgl:hover:not(:focus-within)::before{border-bottom-color:var(--colorPaletteRedBorder2);}",
         ".fdrzuqr{cursor:not-allowed;}",
-        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f15wxwvh{background-color:var(--ctrl-token-SpinButton-1721, var(--semantic-token-SpinButton-1722, var(--colorTransparentBackground)));}",
         ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}",
         ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}",
         ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}",
@@ -235,7 +235,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}",
         ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}",
         ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}",
-        ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".f1lfd2ic:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1705, var(--semantic-token-SpinButton-1706, var(--colorNeutralStrokeAccessibleHover)));}",
+        ".f1iwfssu:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1711, var(--semantic-token-SpinButton-1712, var(--colorNeutralStrokeAccessibleHover)));}",
         ".f1xqt08:hover::before,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}",
         ".fzt5lgo:hover::before,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}",
         ".f8tv3r9:hover::before,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}",
@@ -245,7 +246,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".f6lmxco:active::before,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}",
         ".fcoc0mf:active::before,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}",
         ".f15r4wkl:active::before,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}",
-        ".f1ipdth8:active::before,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
+        ".f1v3sfeo:active::before,.f1v3sfeo:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1707, var(--semantic-token-SpinButton-1708, var(--colorNeutralStrokeAccessiblePressed)));}",
+        ".f1qekkkg:active::before,.f1qekkkg:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1713, var(--semantic-token-SpinButton-1714, var(--colorNeutralStrokeAccessiblePressed)));}"
     ],
     m: [
         [
@@ -268,42 +270,42 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ]
     ]
 });
-const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1ljrqje", null, [
-    ".r1ljrqje{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;outline-style:none;border:0;padding:0;color:var(--colorNeutralForeground1);background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;width:100%;}",
-    ".r1ljrqje::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
-    ".r1ljrqje::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
-    ".r1ljrqje::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
+const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2hmsw2", null, [
+    ".r2hmsw2{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;outline-style:none;border:0;padding:0;color:var(--ctrl-token-SpinButton-1723, var(--semantic-token-SpinButton-1724, var(--colorNeutralForeground1)));background-color:transparent;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;width:100%;}",
+    ".r2hmsw2::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}",
+    ".r2hmsw2::-moz-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}",
+    ".r2hmsw2::placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}"
 ]);
 const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
     disabled: {
-        sj55zd: "f1s2aq7o",
+        sj55zd: "f1xwzfv3",
         Bceei9c: "fdrzuqr",
-        De3pzq: "f1c21dwh",
-        yvdlaj: "fahhnxm"
+        De3pzq: "fwiaa8s",
+        yvdlaj: "fv3kiq7"
     }
 }, {
     d: [
-        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1xwzfv3{color:var(--ctrl-token-SpinButton-1727, var(--semantic-token-SpinButton-1728, var(--colorNeutralForegroundDisabled)));}",
         ".fdrzuqr{cursor:not-allowed;}",
-        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
-        ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
-        ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
+        ".fwiaa8s{background-color:var(--ctrl-token-SpinButton-1729, var(--semantic-token-SpinButton-1730, var(--colorTransparentBackground)));}",
+        ".fv3kiq7::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}",
+        ".fv3kiq7::-moz-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}"
     ]
 });
-const useBaseButtonClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1g4chgs", null, [
-    ".r1g4chgs{display:inline-flex;width:24px;align-items:center;justify-content:center;border:0;position:absolute;outline-style:none;height:16px;background-color:transparent;color:var(--colorNeutralForeground3);grid-column-start:2;border-radius:0;padding:0 5px 0 5px;}",
-    ".r1g4chgs:active{outline-style:none;}",
-    ".r1g4chgs:enabled:hover{cursor:pointer;color:var(--colorNeutralForeground3Hover);background-color:var(--colorSubtleBackgroundHover);}",
-    ".r1g4chgs:enabled:active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
-    ".r1g4chgs:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
-    ".r1g4chgs:disabled{cursor:not-allowed;color:var(--colorNeutralForegroundDisabled);}"
+const useBaseButtonClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1bfueos", null, [
+    ".r1bfueos{display:inline-flex;width:24px;align-items:center;justify-content:center;border:0;position:absolute;outline-style:none;height:16px;background-color:transparent;color:var(--ctrl-token-SpinButton-1733, var(--semantic-token-SpinButton-1734, var(--colorNeutralForeground3)));grid-column-start:2;border-radius:0;padding:0 5px 0 5px;}",
+    ".r1bfueos:active{outline-style:none;}",
+    ".r1bfueos:enabled:hover{cursor:pointer;color:var(--ctrl-token-SpinButton-1735, var(--semantic-token-SpinButton-1736, var(--colorNeutralForeground3Hover)));background-color:var(--ctrl-token-SpinButton-1737, var(--semantic-token-SpinButton-1738, var(--colorSubtleBackgroundHover)));}",
+    ".r1bfueos:enabled:active{color:var(--ctrl-token-SpinButton-1739, var(--semantic-token-SpinButton-1740, var(--colorNeutralForeground3Pressed)));background-color:var(--ctrl-token-SpinButton-1741, var(--semantic-token-SpinButton-1742, var(--colorSubtleBackgroundPressed)));}",
+    ".r1bfueos:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1743, var(--semantic-token-SpinButton-1744, var(--colorNeutralForeground3Pressed)));background-color:var(--ctrl-token-SpinButton-1745, var(--semantic-token-SpinButton-1746, var(--colorSubtleBackgroundPressed)));}",
+    ".r1bfueos:disabled{cursor:not-allowed;color:var(--ctrl-token-SpinButton-1747, var(--semantic-token-SpinButton-1748, var(--colorNeutralForegroundDisabled)));}"
 ]);
 const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
     increment: {
         Ijaq50: "f16hsg94",
         B7oj6ja: [
-            "f1jar5jt",
-            "fyu767a"
+            "f14jfzwc",
+            "f1p51xtu"
         ],
         z8tnut: "f10ra9hq",
         Byoj8tv: "f1brlhvm"
@@ -311,8 +313,8 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
     decrement: {
         Ijaq50: "faunodf",
         Bbmb7ep: [
-            "f1aa9q02",
-            "f16jpd5f"
+            "f1gl9ztj",
+            "fekja2g"
         ],
         z8tnut: "f1sl3k7w",
         Byoj8tv: "f1y2xyjm"
@@ -342,45 +344,45 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
     outline: {},
     underline: {
         De3pzq: "f3rmtva",
-        sj55zd: "f11d4kpn",
-        r4wkhp: "f1no7wuu",
-        B95qlz1: "f1bifk9c",
-        p743kt: "fp1zg4s",
-        B7xitij: "fo6hitd",
-        B6siaa6: "f1wiab75",
-        Ba9qmo4: "fj9zm5z",
-        Dyrjrp: "f1cqwcg4"
+        sj55zd: "ftjtjgg",
+        r4wkhp: "fmxr6h1",
+        B95qlz1: "f159rbb9",
+        p743kt: "f1f61phu",
+        B7xitij: "f11bru7e",
+        B6siaa6: "f1wnbjcb",
+        Ba9qmo4: "f19zu09e",
+        Dyrjrp: "f59gf7h"
     },
     "filled-darker": {
         De3pzq: "f3rmtva",
-        sj55zd: "f11d4kpn",
-        r4wkhp: "f1no7wuu",
-        B95qlz1: "fwwxidx",
-        p743kt: "fp1zg4s",
-        B7xitij: "f14i52sd",
-        B6siaa6: "f1wiab75",
-        Ba9qmo4: "fwry2ka",
-        Dyrjrp: "f1cqwcg4"
+        sj55zd: "ftz87y7",
+        r4wkhp: "fyzdehd",
+        B95qlz1: "f1t0huit",
+        p743kt: "fqvhx9d",
+        B7xitij: "f52eh0d",
+        B6siaa6: "fzhlmla",
+        Ba9qmo4: "f3v2m6a",
+        Dyrjrp: "f50q7fd"
     },
     "filled-lighter": {
         De3pzq: "f3rmtva",
-        sj55zd: "f11d4kpn",
-        r4wkhp: "f1no7wuu",
-        B95qlz1: "f1yywxnv",
-        drw0cw: "fzaa11h",
-        idzz8t: "f4fpmm9",
-        Dyrjrp: "f1cqwcg4"
+        sj55zd: "ff0mds",
+        r4wkhp: "fc4lrwn",
+        B95qlz1: "fwg3vk8",
+        drw0cw: "fzac2m3",
+        idzz8t: "fdfsw6w",
+        Dyrjrp: "f9zhxxo"
     }
 }, {
     d: [
         ".f16hsg94{grid-row-start:1;}",
-        ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
-        ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
+        ".f14jfzwc{border-top-right-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}",
+        ".f1p51xtu{border-top-left-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}",
         ".f10ra9hq{padding-top:4px;}",
         ".f1brlhvm{padding-bottom:1px;}",
         ".faunodf{grid-row-start:2;}",
-        ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
-        ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
+        ".f1gl9ztj{border-bottom-right-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}",
+        ".fekja2g{border-bottom-left-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}",
         ".f1sl3k7w{padding-top:1px;}",
         ".f1y2xyjm{padding-bottom:4px;}",
         [
@@ -409,20 +411,28 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
             }
         ],
         ".f3rmtva{background-color:transparent;}",
-        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
-        ".f1no7wuu:enabled:hover{color:var(--colorNeutralForeground3Hover);}",
-        ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}",
-        ".fp1zg4s:enabled:active{color:var(--colorNeutralForeground3Pressed);}",
-        ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}",
-        ".f1wiab75:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}",
-        ".fj9zm5z:enabled.fui-SpinButton__button_active{background-color:var(--colorSubtleBackgroundPressed);}",
-        ".f1cqwcg4:disabled{color:var(--colorNeutralForegroundDisabled);}",
-        ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}",
-        ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}",
-        ".fwry2ka:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground3Pressed);}",
-        ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}",
-        ".fzaa11h:enabled:active,.fzaa11h:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}",
-        ".f4fpmm9:enabled:active,.f4fpmm9:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground1Pressed);}"
+        ".ftjtjgg{color:var(--ctrl-token-SpinButton-1753, var(--semantic-token-SpinButton-1754, var(--colorNeutralForeground3)));}",
+        ".fmxr6h1:enabled:hover{color:var(--ctrl-token-SpinButton-1755, var(--semantic-token-SpinButton-1756, var(--colorNeutralForeground3Hover)));}",
+        ".f159rbb9:enabled:hover{background-color:var(--ctrl-token-SpinButton-1757, var(--semantic-token-SpinButton-1758, var(--colorSubtleBackgroundHover)));}",
+        ".f1f61phu:enabled:active{color:var(--ctrl-token-SpinButton-1759, var(--semantic-token-SpinButton-1760, var(--colorNeutralForeground3Pressed)));}",
+        ".f11bru7e:enabled:active{background-color:var(--ctrl-token-SpinButton-1761, var(--semantic-token-SpinButton-1762, var(--colorSubtleBackgroundPressed)));}",
+        ".f1wnbjcb:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1763, var(--semantic-token-SpinButton-1764, var(--colorNeutralForeground3Pressed)));}",
+        ".f19zu09e:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1765, var(--semantic-token-SpinButton-1766, var(--colorSubtleBackgroundPressed)));}",
+        ".f59gf7h:disabled{color:var(--ctrl-token-SpinButton-1767, var(--semantic-token-SpinButton-1768, var(--colorNeutralForegroundDisabled)));}",
+        ".ftz87y7{color:var(--ctrl-token-SpinButton-1769, var(--semantic-token-SpinButton-1770, var(--colorNeutralForeground3)));}",
+        ".fyzdehd:enabled:hover{color:var(--ctrl-token-SpinButton-1771, var(--semantic-token-SpinButton-1772, var(--colorNeutralForeground3Hover)));}",
+        ".f1t0huit:enabled:hover{background-color:var(--ctrl-token-SpinButton-1773, var(--semantic-token-SpinButton-1774, var(--colorNeutralBackground3Hover)));}",
+        ".fqvhx9d:enabled:active{color:var(--ctrl-token-SpinButton-1775, var(--semantic-token-SpinButton-1776, var(--colorNeutralForeground3Pressed)));}",
+        ".f52eh0d:enabled:active{background-color:var(--ctrl-token-SpinButton-1777, var(--semantic-token-SpinButton-1778, var(--colorNeutralBackground3Pressed)));}",
+        ".fzhlmla:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1779, var(--semantic-token-SpinButton-1780, var(--colorNeutralForeground3Pressed)));}",
+        ".f3v2m6a:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1781, var(--semantic-token-SpinButton-1782, var(--colorNeutralBackground3Pressed)));}",
+        ".f50q7fd:disabled{color:var(--ctrl-token-SpinButton-1783, var(--semantic-token-SpinButton-1784, var(--colorNeutralForegroundDisabled)));}",
+        ".ff0mds{color:var(--ctrl-token-SpinButton-1785, var(--semantic-token-SpinButton-1786, var(--colorNeutralForeground3)));}",
+        ".fc4lrwn:enabled:hover{color:var(--ctrl-token-SpinButton-1787, var(--semantic-token-SpinButton-1788, var(--colorNeutralForeground3Hover)));}",
+        ".fwg3vk8:enabled:hover{background-color:var(--ctrl-token-SpinButton-1789, var(--semantic-token-SpinButton-1790, var(--colorNeutralBackground1Hover)));}",
+        ".fzac2m3:enabled:active,.fzac2m3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1791, var(--semantic-token-SpinButton-1792, var(--colorNeutralForeground3Pressed)));}",
+        ".fdfsw6w:enabled:active,.fdfsw6w:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1793, var(--semantic-token-SpinButton-1794, var(--colorNeutralBackground1Pressed)));}",
+        ".f9zhxxo:disabled{color:var(--ctrl-token-SpinButton-1795, var(--semantic-token-SpinButton-1796, var(--colorNeutralForegroundDisabled)));}"
     ]
 });
 // Cannot just disable button as they need to remain
@@ -433,51 +443,63 @@ const useButtonDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({
         eoavqd: "fphbwmw"
     },
     outline: {
-        sj55zd: "f1s2aq7o",
-        r4wkhp: "few7wvn",
+        sj55zd: "flmj02y",
+        r4wkhp: "fdrpovn",
         B95qlz1: "f110wuh6",
-        p743kt: "f9s4mys",
+        p743kt: "frkll7s",
         B7xitij: "f10404rc",
-        B6siaa6: "fwzu9cz",
+        B6siaa6: "fdjk730",
         Ba9qmo4: "f1snwkb6"
     },
     underline: {
-        sj55zd: "f1s2aq7o",
-        r4wkhp: "few7wvn",
+        sj55zd: "f1sgg4g9",
+        r4wkhp: "f1v7pcia",
         B95qlz1: "f110wuh6",
-        p743kt: "f9s4mys",
+        p743kt: "f1813qqb",
         B7xitij: "f10404rc",
-        B6siaa6: "fwzu9cz",
+        B6siaa6: "f1hs5qo3",
         Ba9qmo4: "f1snwkb6"
     },
     "filled-darker": {
-        sj55zd: "f1s2aq7o",
-        r4wkhp: "few7wvn",
+        sj55zd: "f1ig0yi1",
+        r4wkhp: "f1x19cl1",
         B95qlz1: "f110wuh6",
-        p743kt: "f9s4mys",
+        p743kt: "fxqoy03",
         B7xitij: "f10404rc",
-        B6siaa6: "fwzu9cz",
+        B6siaa6: "fbp5f9",
         Ba9qmo4: "f1snwkb6"
     },
     "filled-lighter": {
-        sj55zd: "f1s2aq7o",
-        r4wkhp: "few7wvn",
+        sj55zd: "fmmuwj6",
+        r4wkhp: "f14oh8th",
         B95qlz1: "f110wuh6",
-        p743kt: "f9s4mys",
+        p743kt: "f1wn8trp",
         B7xitij: "f10404rc",
-        B6siaa6: "fwzu9cz",
+        B6siaa6: "f1n6vm53",
         Ba9qmo4: "f1snwkb6"
     }
 }, {
     d: [
         ".fdrzuqr{cursor:not-allowed;}",
-        ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
-        ".few7wvn:enabled:hover{color:var(--colorNeutralForegroundDisabled);}",
+        ".flmj02y{color:var(--ctrl-token-SpinButton-1797, var(--semantic-token-SpinButton-1798, var(--colorNeutralForegroundDisabled)));}",
+        ".fdrpovn:enabled:hover{color:var(--ctrl-token-SpinButton-1799, var(--semantic-token-SpinButton-1800, var(--colorNeutralForegroundDisabled)));}",
         ".f110wuh6:enabled:hover{background-color:transparent;}",
-        ".f9s4mys:enabled:active{color:var(--colorNeutralForegroundDisabled);}",
+        ".frkll7s:enabled:active{color:var(--ctrl-token-SpinButton-1801, var(--semantic-token-SpinButton-1802, var(--colorNeutralForegroundDisabled)));}",
         ".f10404rc:enabled:active{background-color:transparent;}",
-        ".fwzu9cz:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForegroundDisabled);}",
-        ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}"
+        ".fdjk730:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1803, var(--semantic-token-SpinButton-1804, var(--colorNeutralForegroundDisabled)));}",
+        ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}",
+        ".f1sgg4g9{color:var(--ctrl-token-SpinButton-1805, var(--semantic-token-SpinButton-1806, var(--colorNeutralForegroundDisabled)));}",
+        ".f1v7pcia:enabled:hover{color:var(--ctrl-token-SpinButton-1807, var(--semantic-token-SpinButton-1808, var(--colorNeutralForegroundDisabled)));}",
+        ".f1813qqb:enabled:active{color:var(--ctrl-token-SpinButton-1809, var(--semantic-token-SpinButton-1810, var(--colorNeutralForegroundDisabled)));}",
+        ".f1hs5qo3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1811, var(--semantic-token-SpinButton-1812, var(--colorNeutralForegroundDisabled)));}",
+        ".f1ig0yi1{color:var(--ctrl-token-SpinButton-1813, var(--semantic-token-SpinButton-1814, var(--colorNeutralForegroundDisabled)));}",
+        ".f1x19cl1:enabled:hover{color:var(--ctrl-token-SpinButton-1815, var(--semantic-token-SpinButton-1816, var(--colorNeutralForegroundDisabled)));}",
+        ".fxqoy03:enabled:active{color:var(--ctrl-token-SpinButton-1817, var(--semantic-token-SpinButton-1818, var(--colorNeutralForegroundDisabled)));}",
+        ".fbp5f9:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1819, var(--semantic-token-SpinButton-1820, var(--colorNeutralForegroundDisabled)));}",
+        ".fmmuwj6{color:var(--ctrl-token-SpinButton-1821, var(--semantic-token-SpinButton-1822, var(--colorNeutralForegroundDisabled)));}",
+        ".f14oh8th:enabled:hover{color:var(--ctrl-token-SpinButton-1823, var(--semantic-token-SpinButton-1824, var(--colorNeutralForegroundDisabled)));}",
+        ".f1wn8trp:enabled:active{color:var(--ctrl-token-SpinButton-1825, var(--semantic-token-SpinButton-1826, var(--colorNeutralForegroundDisabled)));}",
+        ".f1n6vm53:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1827, var(--semantic-token-SpinButton-1828, var(--colorNeutralForegroundDisabled)));}"
     ],
     h: [
         ".fphbwmw:hover{cursor:not-allowed;}"

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

@@ -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: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    position: 'relative',\n    isolation: 'isolate',\n    verticalAlign: 'middle',\n    backgroundColor: tokens.colorNeutralBackground1,\n    minHeight: fieldHeights.medium,\n    padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n    borderRadius: 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: tokens.colorNeutralStrokeAccessible,\n        borderRadius: 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: tokens.borderRadiusMedium,\n        borderBottomRightRadius: 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: tokens.durationUltraFast,\n        transitionDelay: 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: tokens.durationNormal,\n        transitionDelay: 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: 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: tokens.spacingHorizontalS\n    },\n    medium: {\n    },\n    outline: {\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    underline: {\n        '::before': {\n            ...shorthands.borderWidth(0, 0, '1px', 0),\n            borderRadius: tokens.borderRadiusNone\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\n        }\n    },\n    filled: {\n        '::before': {\n            border: `1px solid ${tokens.colorTransparentStroke}`\n        }\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3\n    },\n    'filled-lighter': {\n        backgroundColor: 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: 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: 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: tokens.colorNeutralForeground4,\n        opacity: 1\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});\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: 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: 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        cursor: 'not-allowed',\n        color: tokens.colorNeutralForegroundDisabled\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    decrementButtonSmall: {\n        padding: '0px 6px 3px 4px',\n        height: '12px'\n    },\n    outline: {\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        ':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        ':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// 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: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    underline: {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    'filled-darker': {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            }\n        }\n    },\n    'filled-lighter': {\n        color: tokens.colorNeutralForegroundDisabled,\n        ':enabled': {\n            ':hover': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            ':active': {\n                color: tokens.colorNeutralForegroundDisabled,\n                backgroundColor: 'transparent'\n            },\n            [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n                color: 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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"}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "0.0.0-nightly-20240731-0407.1",
+  "version": "0.0.0-nightly-20240816-2133.1",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,20 +26,20 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-label": "0.0.0-nightly-20240731-0407.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-label": "0.0.0-nightly-20240816-2133.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-field": "0.0.0-nightly-20240731-0407.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-field": "0.0.0-nightly-20240816-2133.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20240731-0407.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240731-0407.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },