@fluentui/react-spinbutton 9.1.6 → 9.2.0

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSpinButtonStyles_unstable = exports.spinButtonClassNames = void 0;
 const react_1 = /*#__PURE__*/require("@griffel/react");
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-const react_input_1 = /*#__PURE__*/require("@fluentui/react-input");
 exports.spinButtonClassNames = {
   root: 'fui-SpinButton',
   input: 'fui-SpinButton__input',
@@ -16,56 +15,22 @@ exports.spinButtonClassNames = {
 const spinButtonExtraClassNames = {
   buttonActive: 'fui-SpinButton__button_active'
 };
+const fieldHeights = {
+  small: '24px',
+  medium: '32px'
+};
+const useRootClassName = /*#__PURE__*/react_1.__resetStyles("rkqmps4", "r1trw52p", [".rkqmps4{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 0 0 var(--spacingHorizontalMNudge);border-radius:var(--borderRadiusMedium);}", ".rkqmps4::before{content:\"\";box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusMedium);}", ".rkqmps4::after{box-sizing:border-box;content:\"\";position:absolute;right:0;bottom:0;left:0;z-index:20;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rkqmps4::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rkqmps4:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.rkqmps4:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".rkqmps4:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".rkqmps4:focus-within{outline:2px solid transparent;}", ".r1trw52p{display:inline-grid;grid-template-columns:1fr 24px;grid-template-rows:1fr 1fr;-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);row-gap:0;position:relative;isolation:isolate;background-color:var(--colorNeutralBackground1);min-height:32px;padding:0 var(--spacingHorizontalMNudge) 0 0;border-radius:var(--borderRadiusMedium);}", ".r1trw52p::before{content:\"\";box-sizing:border-box;position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none;z-index:10;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);border-radius:var(--borderRadiusMedium);}", ".r1trw52p::after{box-sizing:border-box;content:\"\";position:absolute;left:0;bottom:0;right:0;z-index:20;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1trw52p::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1trw52p:focus-within::after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", "@media screen and (prefers-reduced-motion: reduce){.r1trw52p:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", ".r1trw52p:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1trw52p:focus-within{outline:2px solid transparent;}"]);
 const useRootStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "fwk3njj",
-    Budl1dq: "f1sr6ibj",
-    wkccdc: "fio9c21",
-    i8kkvl: "f1ufnopg",
-    Belr9w4: "f1sff6ri",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    qhf8xq: "f10pi13n",
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
-    gd4gdo: "f1ngn1p8",
-    Ftih45: "f1wl9k8s",
-    Bcvre1j: "fyl8oag",
-    Brfgrao: "f1j7ml58",
-    Bciustq: "ffi060y",
-    mdwyqc: ["f1f351id", "f1fzr1x6"],
-    lawp4y: "fchca7p",
-    Fbdkly: ["f1fzr1x6", "f1f351id"],
-    Budzafs: ["f1pl9g23", "f3orl67"],
-    r59vdv: ["f3orl67", "f1pl9g23"],
-    n07z76: ["f2gop1n", "f11nyhth"],
-    ck0cow: ["f11nyhth", "f2gop1n"],
-    Cgzuqd: "fxuihnu",
-    Ehzi8l: "fzjygzn",
-    B1piin3: ["f15yvnhg", "f1n6gb5g"],
-    By385i5: "fo72kxq",
-    Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
-    t2ki1e: "f5yjgw6"
-  },
   small: {
+    sshi5w: "f1pha7fy",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
     uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
   },
   medium: {},
-  outline: {
-    B0qfbqy: "f1fjh9ub",
-    B4f6apu: ["ff9c942", "f6rdg5o"],
-    y0oebl: "fdw6hkg",
-    uvfttm: ["f6rdg5o", "ff9c942"],
-    Bdkvgpv: "f163fonl",
-    m598lv: ["f1yq6w5o", "f1jpmc5p"],
-    qa3bma: "f11yjt3y",
-    Bbv0w2i: ["f1jpmc5p", "f1yq6w5o"],
-    Bq4z7u6: "f10tv6oz",
-    Bk5zm6e: ["f16xp3sf", "f1seuxxq"],
-    Bqjgrrk: "fchs65t",
-    Bm6vgfq: ["f1seuxxq", "f16xp3sf"]
-  },
+  outline: {},
   outlineInteractive: {
     Bo3r8zu: "f1w2y1rc",
     Hpvxnh: ["f1gofhvl", "f18htlvq"],
@@ -77,17 +42,22 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Bcc6kan: ["f15r4wkl", "fcoc0mf"]
   },
   underline: {
-    Budzafs: ["fw32bj", "fziivox"],
-    r59vdv: ["fziivox", "fw32bj"],
-    n07z76: ["feccbv4", "f1jqz70h"],
-    ck0cow: ["f1jqz70h", "feccbv4"],
+    B0qfbqy: "f1o236ok",
+    B4f6apu: ["faeg28l", "f64aojp"],
     y0oebl: "fdw6hkg",
-    qa3bma: "f11yjt3y",
-    Bqjgrrk: "fchs65t"
+    uvfttm: ["f64aojp", "faeg28l"],
+    Budzafs: ["f1vk4jnx", "f1v3v894"],
+    r59vdv: ["f1v3v894", "f1vk4jnx"],
+    n07z76: ["fzi2j54", "f1un0uoc"],
+    ck0cow: ["f1un0uoc", "fzi2j54"]
   },
   underlineInteractive: {
     Bx11ytk: "ffcnd28",
-    xcfy85: "f1ipdth8"
+    xcfy85: "f1ipdth8",
+    B3778ie: ["f9pmbr4", "ffh3ws5"],
+    d9w3h3: ["ffh3ws5", "f9pmbr4"],
+    Bl18szs: ["f19438ov", "f1i9y5j"],
+    B4j8arr: ["f1i9y5j", "f19438ov"]
   },
   filled: {
     B0qfbqy: "f1fjh9ub",
@@ -103,6 +73,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Bqjgrrk: "f1172wan",
     Bm6vgfq: ["fszsv3f", "f1edeodt"]
   },
+  "filled-darker": {
+    De3pzq: "f16xq7d1"
+  },
+  "filled-lighter": {
+    De3pzq: "fxugw4r"
+  },
   filledInteractive: {
     B05mzqr: "f1xqt08",
     tb9y6h: ["fzt5lgo", "f8tv3r9"],
@@ -116,6 +92,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Ba322q7: ["f1pvdymy", "f1a168p3"]
   },
   disabled: {
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1c21dwh",
     Bq4z7u6: "f1a0lfh7",
     Bk5zm6e: ["f1p2ejm6", "fmzytvz"],
     Bqjgrrk: "fas2e61",
@@ -126,7 +104,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Imo2if: ["frjp63v", "f1lclws"]
   }
 }, {
-  d: [".fwk3njj{display:inline-grid;}", ".f1sr6ibj{grid-template-columns:1fr 24px;}", ".fio9c21{grid-template-rows:1fr 1fr;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f1sff6ri{row-gap:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f10pi13n{position:relative;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1ngn1p8{isolation:isolate;}", ".f1wl9k8s::before{content:\"\";}", ".fyl8oag::before{box-sizing:border-box;}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1f351id::before{right:0;}", ".f1fzr1x6::before{left:0;}", ".fchca7p::before{bottom:0;}", ".f1pl9g23::before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f3orl67::before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2gop1n::before{border-top-right-radius:var(--borderRadiusMedium);}", ".f11nyhth::before{border-top-left-radius:var(--borderRadiusMedium);}", ".fxuihnu::before{pointer-events:none;}", ".fzjygzn::before{z-index:10;}", ".f15yvnhg::after{right:0;}", ".f1n6gb5g::after{left:0;}", ".fo72kxq::after{bottom:0;}", ".f5yjgw6::after{z-index:20;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fchs65t::before{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fw32bj::before{border-bottom-right-radius:0;}", ".fziivox::before{border-bottom-left-radius:0;}", ".feccbv4::before{border-top-right-radius:0;}", ".f1jqz70h::before{border-top-left-radius:0;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".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);}", ".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);}"],
+  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;}", ".f1vk4jnx::before{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1v3v894::before{border-bottom-left-radius:var(--borderRadiusNone);}", ".fzi2j54::before{border-top-right-radius:var(--borderRadiusNone);}", ".f1un0uoc::before{border-top-left-radius:var(--borderRadiusNone);}", ".f9pmbr4::after{border-bottom-right-radius:var(--borderRadiusNone);}", ".ffh3ws5::after{border-bottom-left-radius:var(--borderRadiusNone);}", ".f19438ov::after{border-top-right-radius:var(--borderRadiusNone);}", ".f1i9y5j::after{border-top-left-radius:var(--borderRadiusNone);}", ".f1fjh9ub::before{border-top-width:1px;}", ".ff9c942::before{border-right-width:1px;}", ".f6rdg5o::before{border-left-width:1px;}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f7dgwnz::before{border-top-color:var(--colorTransparentStroke);}", ".f1edeodt::before{border-right-color:var(--colorTransparentStroke);}", ".fszsv3f::before{border-left-color:var(--colorTransparentStroke);}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".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);}"],
   m: [["@media (forced-colors: active){.flb8es4::before{border-top-color:GrayText;}}", {
@@ -139,93 +117,46 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     m: "(forced-colors: active)"
   }]]
 });
+const useInputClassName = /*#__PURE__*/react_1.__resetStyles("rekhnij", null, [".rekhnij{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;}", ".rekhnij::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rekhnij::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rekhnij:-ms-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".rekhnij::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
 const useInputStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    Br312pm: "fwpfdsa",
-    Bw0ie65: "f1e2fz10",
-    Ijaq50: "f16hsg94",
-    nk6f5a: "fcu02xx",
-    oeaueh: "f1s6fcnf",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr",
+    De3pzq: "f1c21dwh",
+    yvdlaj: "fahhnxm"
   }
 }, {
-  d: [".fwpfdsa{grid-column-start:1;}", ".f1e2fz10{grid-column-end:2;}", ".f16hsg94{grid-row-start:1;}", ".fcu02xx{grid-row-end:3;}", ".f1s6fcnf{outline-style:none;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}"]
+  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);}"]
 });
+const useBaseButtonClassName = /*#__PURE__*/react_1.__resetStyles("r1g4chgs", null, [".r1g4chgs{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:24px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content: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 useButtonStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "ftuwxu6",
-    a9b677: "fq4mcun",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    B4j52fo: "fre7gi1",
-    Bekrc4i: ["f1358rze", "f1rvrf73"],
-    Bn0qgzm: "fqdk4by",
-    ibv6hh: ["f1rvrf73", "f1358rze"],
-    qhf8xq: "f1euv43f",
-    oeaueh: "f1s6fcnf",
-    Bqenvij: "f1l02sjl",
-    Bfnh471: "fe4wpbb",
-    zwc60e: "fb0xa7e",
-    ezr58z: "f9f7vaa"
-  },
-  incrementButton: {
-    Br312pm: "fd46tj4",
-    Bw0ie65: "fz1yyy6",
+  increment: {
     Ijaq50: "f16hsg94",
-    nk6f5a: "f88nxoq",
-    Bbmb7ep: ["f1krrbdw", "f1deotkl"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
     B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"]
+    z8tnut: "f10ra9hq",
+    Byoj8tv: "f1brlhvm"
+  },
+  decrement: {
+    Ijaq50: "faunodf",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1y2xyjm"
   },
   incrementButtonSmall: {
     z8tnut: "f1khb0e9",
     z189sj: ["f1sgzk6v", "f1bg5zqg"],
     Byoj8tv: "f1ov4xf1",
-    uwmqm3: ["fycuoez", "f8wuabp"]
-  },
-  incrementButtonMedium: {
-    z8tnut: "f10ra9hq",
-    z189sj: ["fwiuce9", "f15vdbe4"],
-    Byoj8tv: "f1brlhvm",
-    uwmqm3: ["f15vdbe4", "fwiuce9"]
-  },
-  decrementButton: {
-    Br312pm: "fd46tj4",
-    Bw0ie65: "fz1yyy6",
-    Ijaq50: "faunodf",
-    nk6f5a: "fcu02xx",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f1deotkl", "f1krrbdw"],
-    B7oj6ja: ["f10ostut", "f1ozlkrg"],
-    Btl43ni: ["f1ozlkrg", "f10ostut"]
+    uwmqm3: ["fycuoez", "f8wuabp"],
+    Bqenvij: "fvblgha"
   },
   decrementButtonSmall: {
     z8tnut: "f1nbblvp",
     z189sj: ["f1sgzk6v", "f1bg5zqg"],
     Byoj8tv: "f1jnq6q7",
-    uwmqm3: ["fycuoez", "f8wuabp"]
-  },
-  decrementButtonMedium: {
-    z8tnut: "f1sl3k7w",
-    z189sj: ["fwiuce9", "f15vdbe4"],
-    Byoj8tv: "f1y2xyjm",
-    uwmqm3: ["f15vdbe4", "fwiuce9"]
-  },
-  outline: {
-    De3pzq: "f3rmtva",
-    sj55zd: "f11d4kpn",
-    r4wkhp: "f1no7wuu",
-    B95qlz1: "f1bifk9c",
-    p743kt: "fp1zg4s",
-    B7xitij: "fo6hitd",
-    B6siaa6: "f1wiab75",
-    Ba9qmo4: "fj9zm5z",
-    Dyrjrp: "f1cqwcg4"
+    uwmqm3: ["fycuoez", "f8wuabp"],
+    Bqenvij: "fvblgha"
   },
+  outline: {},
   underline: {
     De3pzq: "f3rmtva",
     sj55zd: "f11d4kpn",
@@ -258,8 +189,7 @@ const useButtonStyles = /*#__PURE__*/react_1.__styles({
     Dyrjrp: "f1cqwcg4"
   }
 }, {
-  d: [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fq4mcun{width:24px;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fre7gi1{border-top-width:0;}", ".f1358rze{border-right-width:0;}", ".f1rvrf73{border-left-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".f1euv43f{position:absolute;}", ".f1s6fcnf{outline-style:none;}", ".f1l02sjl{height:100%;}", ".fe4wpbb:enabled:hover{cursor:pointer;}", ".f9f7vaa:disabled{cursor:not-allowed;}", ".fd46tj4{grid-column-start:2;}", ".fz1yyy6{grid-column-end:3;}", ".f16hsg94{grid-row-start:1;}", ".f88nxoq{grid-row-end:2;}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ozlkrg{border-top-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1khb0e9{padding-top:3px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1ov4xf1{padding-bottom:0px;}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".f10ra9hq{padding-top:4px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f1brlhvm{padding-bottom:1px;}", ".faunodf{grid-row-start:2;}", ".fcu02xx{grid-row-end:3;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1nbblvp{padding-top:0px;}", ".f1jnq6q7{padding-bottom:3px;}", ".f1sl3k7w{padding-top:1px;}", ".f1y2xyjm{padding-bottom:4px;}", ".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);}"],
-  a: [".fb0xa7e:active{outline-style:none;}"]
+  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;}", ".f1khb0e9{padding-top:3px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1ov4xf1{padding-bottom:0px;}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".fvblgha{height:12px;}", ".f1nbblvp{padding-top:0px;}", ".f1jnq6q7{padding-bottom:3px;}", ".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);}"]
 });
 // Cannot just disable button as they need to remain
 // exposed to ATs like screen readers.
@@ -325,28 +255,10 @@ const useSpinButtonStyles_unstable = state => {
   const buttonStyles = useButtonStyles();
   const buttonDisabledStyles = useButtonDisabledStyles();
   const inputStyles = useInputStyles();
-  // Grab the root className here so we can be sure to merge is last
-  const rootClassName = state.root.className;
-  state.root.className = undefined;
-  // Reuse react-input's styles without re-using the Input component.
-  react_input_1.useInputStyles_unstable({
-    size,
-    appearance,
-    input: state.input,
-    root: state.root,
-    components: {
-      root: 'span',
-      input: 'input',
-      contentBefore: 'span',
-      contentAfter: 'span'
-    }
-  });
-  state.root.className = react_1.mergeClasses(state.root.className,
-  // Get the classes from useInputStyles_unstable
-  exports.spinButtonClassNames.root, rootStyles.base, rootStyles[size], appearance === 'outline' && rootStyles.outline, appearance === 'underline' && rootStyles.underline, filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, rootClassName);
-  state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.incrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
-  state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, buttonStyles.base, buttonStyles.decrementButton, buttonStyles[appearance], size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
-  state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, state.input.className, inputStyles.base);
+  state.root.className = react_1.mergeClasses(exports.spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+  state.incrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);
+  state.decrementButton.className = react_1.mergeClasses(exports.spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);
+  state.input.className = react_1.mergeClasses(exports.spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);
   return state;
 };
 exports.useSpinButtonStyles_unstable = useSpinButtonStyles_unstable;

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","useRootStyles","react_1","useInputStyles","useButtonStyles","useButtonDisabledStyles","useSpinButtonStyles_unstable","state","appearance","atBound","spinState","size","disabled","invalid","filled","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","rootClassName","className","undefined","react_input_1","components","contentBefore","contentAfter","base","outline","underline","outlineInteractive","underlineInteractive","filledInteractive","incrementButtonSmall","incrementButtonMedium","decrementButtonSmall","decrementButtonMedium"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useInputStyles_unstable } from '@fluentui/react-input';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridTemplateColumns: `1fr 24px`,\n    gridTemplateRows: '1fr 1fr',\n    columnGap: tokens.spacingHorizontalXS,\n    rowGap: 0,\n    paddingRight: 0,\n    position: 'relative',\n    // Remove the border styles from react-input\n    ...shorthands.border('0'),\n    isolation: 'isolate',\n\n    // Apply border styles on the ::before pseudo element.\n    // We cannot use ::after since react-input uses that\n    // for the selector styles.\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      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      pointerEvents: 'none',\n      zIndex: 10,\n    },\n\n    '::after': {\n      right: 0,\n      bottom: 0,\n      left: 0,\n      zIndex: 20,\n    },\n  },\n\n  small: {\n    paddingLeft: tokens.spacingHorizontalS,\n  },\n\n  // intentionally empty\n  medium: {},\n\n  outline: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n\n  outlineInteractive: {\n    ':hover': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderRadius(0), // corners look strange if rounded\n      ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    },\n  },\n\n  underlineInteractive: {\n    ':hover': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\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  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n      },\n    },\n  },\n\n  disabled: {\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n      '@media (forced-colors: active)': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    gridColumnStart: '1',\n    gridColumnEnd: '2',\n    gridRowStart: '1',\n    gridRowEnd: '3',\n    outlineStyle: 'none',\n    ...shorthands.padding(0),\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    width: '24px',\n    alignItems: 'center',\n    justifyContent: 'center',\n    ...shorthands.border(0),\n    position: 'absolute',\n\n    outlineStyle: 'none',\n    height: '100%',\n\n    ':enabled:hover': {\n      cursor: 'pointer',\n    },\n\n    ':active': {\n      outlineStyle: 'none',\n    },\n\n    ':disabled': {\n      cursor: 'not-allowed',\n    },\n  },\n\n  incrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '1',\n    gridRowEnd: '2',\n    ...shorthands.borderRadius(0, tokens.borderRadiusMedium, 0, 0),\n  },\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    ...shorthands.padding('3px', '6px', '0px', '4px'),\n  },\n\n  incrementButtonMedium: {\n    ...shorthands.padding('4px', '5px', '1px', '5px'),\n  },\n\n  decrementButton: {\n    gridColumnStart: '2',\n    gridColumnEnd: '3',\n    gridRowStart: '2',\n    gridRowEnd: '3',\n    ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, 0),\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '6px', '3px', '4px'),\n  },\n\n  decrementButtonMedium: {\n    ...shorthands.padding('1px', '5px', '4px', '5px'),\n  },\n\n  outline: {\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\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// 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\n    ':hover': {\n      cursor: 'not-allowed',\n    },\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\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\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\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/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\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\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  // Grab the root className here so we can be sure to merge is last\n  const rootClassName = state.root.className;\n  state.root.className = undefined;\n  // Reuse react-input's styles without re-using the Input component.\n  useInputStyles_unstable({\n    size,\n    appearance,\n    input: state.input,\n    root: state.root,\n    components: {\n      root: 'span',\n      input: 'input',\n      contentBefore: 'span',\n      contentAfter: 'span',\n    },\n  });\n\n  state.root.className = mergeClasses(\n    state.root.className, // Get the classes from useInputStyles_unstable\n    spinButtonClassNames.root,\n    rootStyles.base,\n    rootStyles[size],\n    appearance === 'outline' && rootStyles.outline,\n    appearance === 'underline' && rootStyles.underline,\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    rootClassName, // Make sure any original class name is applied last\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.incrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    buttonStyles.base,\n    buttonStyles.decrementButton,\n    buttonStyles[appearance],\n    size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(spinButtonClassNames.input, state.input.className, inputStyles.base);\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_1","require","react_theme_1","exports","spinButtonClassNames","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","__resetStyles","useRootStyles","__styles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","Budzafs","r59vdv","n07z76","ck0cow","underlineInteractive","B3778ie","d9w3h3","Bl18szs","B4j8arr","filled","Bdkvgpv","m598lv","qa3bma","Bbv0w2i","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","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","mergeClasses"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts"],"sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {\n  root: 'fui-SpinButton',\n  input: 'fui-SpinButton__input',\n  incrementButton: 'fui-SpinButton__incrementButton',\n  decrementButton: 'fui-SpinButton__decrementButton',\n};\n\nconst spinButtonExtraClassNames = {\n  buttonActive: 'fui-SpinButton__button_active',\n};\n\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-grid',\n  gridTemplateColumns: `1fr 24px`,\n  gridTemplateRows: '1fr 1fr',\n  columnGap: tokens.spacingHorizontalXS,\n  rowGap: 0,\n  position: 'relative',\n  isolation: 'isolate',\n\n  backgroundColor: tokens.colorNeutralBackground1,\n  minHeight: fieldHeights.medium,\n  padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n  borderRadius: tokens.borderRadiusMedium,\n\n  // Apply border styles on the ::before pseudo element.\n  // We cannot use ::after since that is used for selection.\n  // Using the pseudo element allows us to place the border\n  // above content in the component which ensures the buttons\n  // line up visually with the border as expected. Without this\n  // there is a bit of a gap which can become very noticeable\n  // at high zoom or when OS zoom levels are not divisible by 2\n  // (e.g., 150% on Windows in Firefox)\n  // This is most noticeable on the \"outline\" appearance which is\n  // also the default so it feels worth the extra ceremony to get right.\n  '::before': {\n    content: '\"\"',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'none',\n    zIndex: 10,\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    borderRadius: tokens.borderRadiusMedium,\n  },\n\n  '::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    right: 0,\n    bottom: 0,\n    left: 0,\n    zIndex: 20,\n\n    // Maintaining the correct corner radius:\n    // Use the whole border-radius as the height and only put radii on the bottom corners.\n    // (Otherwise the radius would be automatically reduced to fit available space.)\n    // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n    height: `max(2px, ${tokens.borderRadiusMedium})`,\n    borderBottomLeftRadius: tokens.borderRadiusMedium,\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n\n    // Flat 2px border:\n    // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n    // (This could be done without trimming using `background: linear-gradient(...)`, but using\n    // borderBottom makes it easier for people to override the color if needed.)\n    borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n    clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n    // Animation for focus OUT\n    transform: 'scaleX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationUltraFast,\n    transitionDelay: tokens.curveAccelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n\n  ':focus-within::after': {\n    // Animation for focus IN\n    transform: 'scaleX(1)',\n    transitionProperty: 'transform',\n    transitionDuration: tokens.durationNormal,\n    transitionDelay: tokens.curveDecelerateMid,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n      transitionDelay: '0.01ms',\n    },\n  },\n  ':focus-within:active::after': {\n    // This is if the user clicks the field again while it's already focused\n    borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n  },\n  ':focus-within': {\n    outline: '2px solid transparent',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  small: {\n    minHeight: fieldHeights.small,\n    ...typographyStyles.caption1,\n    paddingLeft: tokens.spacingHorizontalS,\n  },\n\n  medium: {\n    // set by useRootClassName\n  },\n\n  outline: {\n    // set by useRootClassName\n  },\n\n  outlineInteractive: {\n    ':hover::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  underline: {\n    '::before': {\n      ...shorthands.borderWidth(0, 0, '1px', 0),\n      ...shorthands.borderRadius(tokens.borderRadiusNone), // corners look strange if rounded\n    },\n  },\n\n  underlineInteractive: {\n    ':hover::before': {\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':active,:focus-within': {\n      '::before': {\n        borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n    '::after': shorthands.borderRadius(tokens.borderRadiusNone), // remove rounded corners from focus underline\n  },\n\n  filled: {\n    '::before': {\n      ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    },\n  },\n\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  filledInteractive: {\n    // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n    ':hover,:focus-within': {\n      '::before': {\n        // also handles pressed border color (:active)\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n      },\n    },\n  },\n\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      '::before': {\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n      },\n    },\n  },\n\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::before': {\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n      '@media (forced-colors: active)': {\n        ...shorthands.borderColor('GrayText'),\n      },\n    },\n  },\n});\n\nconst useInputClassName = makeResetStyles({\n  gridColumnStart: '1',\n  gridColumnEnd: '2',\n  gridRowStart: '1',\n  gridRowEnd: '3',\n  outlineStyle: 'none',\n  border: '0',\n  padding: '0',\n  color: tokens.colorNeutralForeground1,\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  fontFamily: 'inherit',\n  fontSize: 'inherit',\n  fontWeight: 'inherit',\n  lineHeight: 'inherit',\n\n  '::placeholder': {\n    color: tokens.colorNeutralForeground4,\n    opacity: 1, // browser style override\n  },\n});\n\nconst useInputStyles = makeStyles({\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    '::placeholder': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\nconst useBaseButtonClassName = makeResetStyles({\n  display: 'inline-flex',\n  width: '24px',\n  alignItems: 'center',\n  justifyContent: 'center',\n  border: '0',\n  position: 'absolute',\n\n  outlineStyle: 'none',\n  height: '16px',\n\n  // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n  backgroundColor: 'transparent',\n  color: tokens.colorNeutralForeground3,\n\n  // common button layout\n  gridColumnStart: '2',\n  borderRadius: '0',\n  padding: '0 5px 0 5px',\n\n  ':active': {\n    outlineStyle: 'none',\n  },\n\n  ':enabled': {\n    ':hover': {\n      cursor: 'pointer',\n      color: tokens.colorNeutralForeground3Hover,\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n    [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n      color: tokens.colorNeutralForeground3Pressed,\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n    },\n  },\n\n  ':disabled': {\n    cursor: 'not-allowed',\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useButtonStyles = makeStyles({\n  increment: {\n    gridRowStart: '1',\n    borderTopRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '4px',\n    paddingBottom: '1px',\n  },\n  decrement: {\n    gridRowStart: '2',\n    borderBottomRightRadius: tokens.borderRadiusMedium,\n    paddingTop: '1px',\n    paddingBottom: '4px',\n  },\n  // Padding values numbers don't align with design specs\n  // but visually the padding aligns.\n  // The icons are set in a 16x16px square but the artwork is inset from that\n  // so these padding values are computed by hand.\n  // Additionally the design uses fractional values so these are\n  // rounded to the nearest integer.\n  incrementButtonSmall: {\n    ...shorthands.padding('3px', '6px', '0px', '4px'),\n    height: '12px',\n  },\n\n  decrementButtonSmall: {\n    ...shorthands.padding('0px', '6px', '3px', '4px'),\n    height: '12px',\n  },\n\n  outline: {\n    // set by useButtonClassName\n  },\n\n  underline: {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-darker': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground3Hover,\n      },\n      ':active': {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n      [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground3Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  'filled-lighter': {\n    backgroundColor: 'transparent',\n    color: tokens.colorNeutralForeground3,\n\n    ':enabled': {\n      ':hover': {\n        color: tokens.colorNeutralForeground3Hover,\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n      },\n      [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n        color: tokens.colorNeutralForeground3Pressed,\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n      },\n    },\n    ':disabled': {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n});\n\n// 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\n    ':hover': {\n      cursor: 'not-allowed',\n    },\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\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\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\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/**\n * Apply styling to the SpinButton slots based on the state\n */\nexport const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {\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\n  const rootStyles = useRootStyles();\n  const buttonStyles = useButtonStyles();\n  const buttonDisabledStyles = useButtonDisabledStyles();\n  const inputStyles = useInputStyles();\n\n  state.root.className = mergeClasses(\n    spinButtonClassNames.root,\n    useRootClassName(),\n    rootStyles[size],\n    rootStyles[appearance],\n    filled && rootStyles.filled,\n    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n    !disabled && filled && rootStyles.filledInteractive,\n    !disabled && invalid && rootStyles.invalid,\n    disabled && rootStyles.disabled,\n    state.root.className,\n  );\n\n  state.incrementButton.className = mergeClasses(\n    spinButtonClassNames.incrementButton,\n    spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.increment,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.incrementButtonSmall,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.incrementButton.className,\n  );\n  state.decrementButton.className = mergeClasses(\n    spinButtonClassNames.decrementButton,\n    spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`,\n    useBaseButtonClassName(),\n    buttonStyles.decrement,\n    buttonStyles[appearance],\n    size === 'small' && buttonStyles.decrementButtonSmall,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,\n    (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],\n    state.decrementButton.className,\n  );\n\n  state.input.className = mergeClasses(\n    spinButtonClassNames.input,\n    useInputClassName(),\n    disabled && inputStyles.disabled,\n    state.input.className,\n  );\n\n  return state;\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AACaA,iCAAyB,gBAAGC,0CAA4B,CAACC,iCAAoB,CAACC,IAAI,CAAC;AAChG;AACaH,uBAAe,gBAA8CC,iCAAmB,CAACC,uBAAU,CAAC","names":["exports","react_field_1","SpinButton_1","root"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"]}
+{"version":3,"names":["react_field_1","require","SpinButton_1","exports","spinButtonFieldClassNames","getDeprecatedFieldClassNames","spinButtonClassNames","root","SpinButtonField","makeDeprecatedField","SpinButton"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { SpinButton, spinButtonClassNames, SpinButtonProps } from '../../SpinButton';\n\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport type SpinButtonFieldProps = DeprecatedFieldProps<SpinButtonProps>;\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const spinButtonFieldClassNames = getDeprecatedFieldClassNames(spinButtonClassNames.root);\n/** @deprecated Use Field with SpinButton: `<Field><SpinButton /></Field>` */\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = makeDeprecatedField(SpinButton);\n"],"mappings":";;;;;;AAAA;AACA,MAAAA,aAAA,gBAAAC,OAAA;AAEA,MAAAC,YAAA,gBAAAD,OAAA;AAIA;AACaE,OAAA,CAAAC,yBAAyB,gBAAGJ,aAAA,CAAAK,4BAA4B,CAACH,YAAA,CAAAI,oBAAoB,CAACC,IAAI,CAAC;AAChG;AACaJ,OAAA,CAAAK,eAAe,gBAA8CR,aAAA,CAAAS,mBAAmB,CAACP,YAAA,CAAAQ,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts"],"sourcesContent":["export * from './SpinButtonField';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts"],"sourcesContent":["export * from './SpinButtonField';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,uBAAAC,OAAA"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,8BAAU;EAAA;AAAA;AACVF;EAAAC;EAAAC;IAAA,6CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,wCAAoB;EAAA;AAAA;AACpBF;EAAAC;EAAAC;IAAA,gDAA4B;EAAA;AAAA;AAC5BF;EAAAC;EAAAC;IAAA,0CAAsB;EAAA;AAAA;AAYxB;AACA;AAASF;EAAAC;EAAAC;IAAA,wCAAe;EAAA;AAAA;AAA8BF;EAAAC;EAAAC;IAAA,kDAAyB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"]}
+{"version":3,"names":["SpinButton_1","require","Object","defineProperty","exports","enumerable","get","SpinButton","renderSpinButton_unstable","spinButtonClassNames","useSpinButtonStyles_unstable","useSpinButton_unstable","SpinButtonField_1","SpinButtonField","spinButtonFieldClassNames"],"sources":["../src/packages/react-components/react-spinbutton/src/index.ts"],"sourcesContent":["export {\n  SpinButton,\n  renderSpinButton_unstable,\n  spinButtonClassNames,\n  useSpinButtonStyles_unstable,\n  useSpinButton_unstable,\n} from './SpinButton';\nexport type {\n  SpinButtonOnChangeData,\n  SpinButtonChangeEvent,\n  SpinButtonProps,\n  SpinButtonSlots,\n  SpinButtonState,\n  SpinButtonSpinState,\n  SpinButtonBounds,\n} from './SpinButton';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField';\n"],"mappings":";;;;;;AAAA,IAAAA,YAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAO,UAAU;EAAA;AAAA;AACVL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAQ,yBAAyB;EAAA;AAAA;AACzBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAS,oBAAoB;EAAA;AAAA;AACpBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAU,4BAA4B;EAAA;AAAA;AAC5BR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,YAAA,CAAAW,sBAAsB;EAAA;AAAA;AAYxB;AACA,IAAAC,iBAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,iBAAA,CAAAC,eAAe;EAAA;AAAA;AAA8BX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,iBAAA,CAAAE,yBAAyB;EAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAO,MAAMA,KAAK,GAAG,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAY;EACzE,IAAIC,SAAS,GAAGH,KAAK;EACrB,IAAIC,GAAG,KAAKG,SAAS,EAAE;IACrB,IAAIF,GAAG,KAAKE,SAAS,IAAIH,GAAG,GAAGC,GAAG,EAAE;MAClC,MAAMG,KAAK,GAAG,IAAIC,KAAK,EAAE;MACzB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACL,KAAK,CACX,CACE,gBAAgBJ,GAAG,kCAAkCC,GAAG,IAAI,EAC5D,4CAA4C,EAC5C,oBAAoBF,KAAK,IAAI,EAC7BK,KAAK,CAACM,KAAK,CACZ,CAACC,IAAI,EAAE,CACT;;MAEH,OAAOZ,KAAK;;IAGdG,SAAS,GAAGU,IAAI,CAACX,GAAG,CAACD,GAAG,EAAEE,SAAS,CAAC;;EAGtC,IAAID,GAAG,KAAKE,SAAS,EAAE;IACrBD,SAAS,GAAGU,IAAI,CAACZ,GAAG,CAACC,GAAG,EAAEC,SAAS,CAAC;;EAGtC,OAAOA,SAAS;AAClB,CAAC;AA3BYW,aAAK","names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"]}
+{"version":3,"names":["clamp","value","min","max","nextValue","undefined","error","Error","process","env","NODE_ENV","console","stack","join","Math","exports"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/clamp.ts"],"sourcesContent":["export const clamp = (value: number, min?: number, max?: number): number => {\n  let nextValue = value;\n  if (min !== undefined) {\n    if (max !== undefined && min > max) {\n      const error = new Error();\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.error(\n          [\n            `\"min\" value \"${min}\" is greater than \"max\" value \"${max}\".`,\n            '\"min\" must be less than or equal to \"max\".',\n            `Returning value \"${value}\".`,\n            error.stack,\n          ].join(),\n        );\n      }\n      return value;\n    }\n\n    nextValue = Math.max(min, nextValue);\n  }\n\n  if (max !== undefined) {\n    nextValue = Math.min(max, nextValue);\n  }\n\n  return nextValue;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,KAAK,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAY;EACzE,IAAIC,SAAS,GAAGH,KAAK;EACrB,IAAIC,GAAG,KAAKG,SAAS,EAAE;IACrB,IAAIF,GAAG,KAAKE,SAAS,IAAIH,GAAG,GAAGC,GAAG,EAAE;MAClC,MAAMG,KAAK,GAAG,IAAIC,KAAK,EAAE;MACzB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;QACzC;QACAC,OAAO,CAACL,KAAK,CACX,CACE,gBAAgBJ,GAAG,kCAAkCC,GAAG,IAAI,EAC5D,4CAA4C,EAC5C,oBAAoBF,KAAK,IAAI,EAC7BK,KAAK,CAACM,KAAK,CACZ,CAACC,IAAI,EAAE,CACT;;MAEH,OAAOZ,KAAK;;IAGdG,SAAS,GAAGU,IAAI,CAACX,GAAG,CAACD,GAAG,EAAEE,SAAS,CAAC;;EAGtC,IAAID,GAAG,KAAKE,SAAS,EAAE;IACrBD,SAAS,GAAGU,IAAI,CAACZ,GAAG,CAACC,GAAG,EAAEC,SAAS,CAAC;;EAGtC,OAAOA,SAAS;AAClB,CAAC;AA3BYW,OAAA,CAAAf,KAAK,GAAAA,KAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAG,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAsB;EACtF,IAAID,GAAG,KAAKE,SAAS,IAAIH,KAAK,KAAKC,GAAG,EAAE;IACtC,IAAIC,GAAG,KAAKD,GAAG,EAAE;MACf,OAAO,MAAM;;IAEf,OAAO,KAAK;GACb,MAAM,IAAIC,GAAG,KAAKC,SAAS,IAAIH,KAAK,KAAKE,GAAG,EAAE;IAC7C,OAAO,KAAK;;EAGd,OAAO,MAAM;AACf,CAAC;AAXYE,gBAAQ","names":["getBound","value","min","max","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"]}
+{"version":3,"names":["getBound","value","min","max","undefined","exports"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/getBound.ts"],"sourcesContent":["import type { SpinButtonBounds } from '../SpinButton';\n\nexport const getBound = (value: number, min?: number, max?: number): SpinButtonBounds => {\n  if (min !== undefined && value === min) {\n    if (max === min) {\n      return 'both';\n    }\n    return 'min';\n  } else if (max !== undefined && value === max) {\n    return 'max';\n  }\n\n  return 'none';\n};\n"],"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAY,EAAEC,GAAY,KAAsB;EACtF,IAAID,GAAG,KAAKE,SAAS,IAAIH,KAAK,KAAKC,GAAG,EAAE;IACtC,IAAIC,GAAG,KAAKD,GAAG,EAAE;MACf,OAAO,MAAM;;IAEf,OAAO,KAAK;GACb,MAAM,IAAIC,GAAG,KAAKC,SAAS,IAAIH,KAAK,KAAKE,GAAG,EAAE;IAC7C,OAAO,KAAK;;EAGd,OAAO,MAAM;AACf,CAAC;AAXYE,OAAA,CAAAL,QAAQ,GAAAA,QAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/index.ts"],"sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/index.ts"],"sourcesContent":["export * from './clamp';\nexport * from './getBound';\nexport * from './precision';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,aAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,iBAAAC,OAAA"}

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

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;;;;;;;AAOA,SAAgBA,kBAAkB,CAACC,KAAsB;EACvD;;;;;;EAMA,MAAMC,MAAM,GAAG,yBAAyB,CAACC,IAAI,CAACC,MAAM,CAACH,KAAK,CAAC,CAAC;EAC5D,IAAI,CAACC,MAAM,EAAE;IACX,OAAO,CAAC;;EAEV,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAO,CAACA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAE1B,IAAIH,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAOA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAEzB,OAAO,CAAC;AACV;AAlBAC;AAoBA;;;;;AAKA,SAAgBC,cAAc,CAACN,KAAa,EAAEO,SAAiB,EAAEC,OAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACZ,KAAK,GAAGS,GAAG,CAAC,GAAGA,GAAG;AACtC;AAHAJ","names":["calculatePrecision","value","groups","exec","String","length","exports","precisionRound","precision","base","exp","Math","pow","round"],"sourceRoot":"../src/","sources":["packages/react-components/react-spinbutton/src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"]}
+{"version":3,"names":["calculatePrecision","value","groups","exec","String","length","exports","precisionRound","precision","base","exp","Math","pow","round"],"sources":["../src/packages/react-components/react-spinbutton/src/utils/precision.ts"],"sourcesContent":["/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value: number | string): number {\n  /**\n   * Group 1:\n   * [1-9]([0]+$) matches trailing zeros\n   * Group 2:\n   * \\.([0-9]*) matches all digits after a decimal point.\n   */\n  const groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n  if (!groups) {\n    return 0;\n  }\n  if (groups[1]) {\n    return -groups[1].length;\n  }\n  if (groups[2]) {\n    return groups[2].length;\n  }\n  return 0;\n}\n\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value: number, precision: number, base: number = 10): number {\n  const exp = Math.pow(base, precision);\n  return Math.round(value * exp) / exp;\n}\n"],"mappings":";;;;;;AAAA;;;;;;;AAOA,SAAgBA,kBAAkBA,CAACC,KAAsB;EACvD;;;;;;EAMA,MAAMC,MAAM,GAAG,yBAAyB,CAACC,IAAI,CAACC,MAAM,CAACH,KAAK,CAAC,CAAC;EAC5D,IAAI,CAACC,MAAM,EAAE;IACX,OAAO,CAAC;;EAEV,IAAIA,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAO,CAACA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAE1B,IAAIH,MAAM,CAAC,CAAC,CAAC,EAAE;IACb,OAAOA,MAAM,CAAC,CAAC,CAAC,CAACG,MAAM;;EAEzB,OAAO,CAAC;AACV;AAlBAC,OAAA,CAAAN,kBAAA,GAAAA,kBAAA;AAoBA;;;;;AAKA,SAAgBO,cAAcA,CAACN,KAAa,EAAEO,SAAiB,EAAEC,IAAA,GAAe,EAAE;EAChF,MAAMC,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACH,IAAI,EAAED,SAAS,CAAC;EACrC,OAAOG,IAAI,CAACE,KAAK,CAACZ,KAAK,GAAGS,GAAG,CAAC,GAAGA,GAAG;AACtC;AAHAJ,OAAA,CAAAC,cAAA,GAAAA,cAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinbutton",
-  "version": "9.1.6",
+  "version": "9.2.0",
   "description": "Fluent UI React SpinButton component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -28,19 +28,18 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
-    "@fluentui/react-label": "^9.0.22",
+    "@fluentui/react-label": "^9.1.0",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@griffel/react": "^1.5.2",
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-field": "9.0.0-alpha.21",
+    "@fluentui/react-field": "9.0.0-alpha.22",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-input": "^9.3.6",
-    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.6.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {