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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +13 -13
  2. package/lib/components/SpinButton/useSpinButtonStyles.styles.js +67 -67
  3. package/lib/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js +143 -121
  5. package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js.map +1 -1
  6. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,26 +1,26 @@
1
1
  # Change Log - @fluentui/react-spinbutton
2
2
 
3
- This log was last generated on Tue, 30 Jul 2024 04:17:36 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 16 Aug 2024 21:44:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240730-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20240730-0407.1)
7
+ ## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v0.0.0-nightly-20240816-2133.1)
8
8
 
9
- Tue, 30 Jul 2024 04:17:36 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.83..@fluentui/react-spinbutton_v0.0.0-nightly-20240730-0407.1)
9
+ Fri, 16 Aug 2024 21:44:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinbutton_v9.2.83..@fluentui/react-spinbutton_v0.0.0-nightly-20240816-2133.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
16
- - Bump @fluentui/react-field to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
17
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
18
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
19
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
20
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
21
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
23
- - Bump @fluentui/react-label to v0.0.0-nightly-20240730-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/4d2671a092078e3fa69ba2c3b45f2a2948ba7be9) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
16
+ - Bump @fluentui/react-field to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
17
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
18
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
21
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
23
+ - Bump @fluentui/react-label to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
24
24
 
25
25
  ## [9.2.83](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinbutton_v9.2.83)
26
26
 
package/lib/components/SpinButton/useSpinButtonStyles.styles.js CHANGED
@@ -13,9 +13,9 @@ const fieldHeights = {
13
13
  small: '24px',
14
14
  medium: '32px'
15
15
  };
16
- const useRootClassName = /*#__PURE__*/__resetStyles("r109xulx", "r1h2jnch", {
17
- 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;}"],
18
- 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;}}"]
16
+ const useRootClassName = /*#__PURE__*/__resetStyles("rh3jdeq", "r5s979w", {
17
+ 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;}"],
18
+ 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;}}"]
19
19
  });
20
20
  const useRootStyles = /*#__PURE__*/__styles({
21
21
  small: {
@@ -24,18 +24,18 @@ const useRootStyles = /*#__PURE__*/__styles({
24
24
  Be2twd7: "fy9rknc",
25
25
  Bhrd7zp: "figsok6",
26
26
  Bg96gwp: "fwrc4pm",
27
- uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
27
+ uwmqm3: ["f1j8zwyv", "f1vlli27"]
28
28
  },
29
29
  medium: {},
30
30
  outline: {},
31
31
  outlineInteractive: {
32
32
  Bo3r8zu: "f1w2y1rc",
33
33
  Hpvxnh: ["f1gofhvl", "f18htlvq"],
34
- Bx11ytk: "ffcnd28",
34
+ Bx11ytk: "f1lfd2ic",
35
35
  B1rg0w0: ["f18htlvq", "f1gofhvl"],
36
36
  Bsg1tlv: "f6lmxco",
37
37
  Brjw370: ["fcoc0mf", "f15r4wkl"],
38
- xcfy85: "f1ipdth8",
38
+ xcfy85: "f1v3sfeo",
39
39
  Bcc6kan: ["f15r4wkl", "fcoc0mf"]
40
40
  },
41
41
  underline: {
@@ -47,16 +47,16 @@ const useRootStyles = /*#__PURE__*/__styles({
47
47
  Budzafs: 0,
48
48
  ck0cow: 0,
49
49
  n07z76: 0,
50
- Gng75u: "f1xyh2jw"
50
+ Gng75u: "f1dg5oo6"
51
51
  },
52
52
  underlineInteractive: {
53
- Bx11ytk: "ffcnd28",
54
- xcfy85: "f1ipdth8",
53
+ Bx11ytk: "f1iwfssu",
54
+ xcfy85: "f1qekkkg",
55
55
  d9w3h3: 0,
56
56
  B3778ie: 0,
57
57
  B4j8arr: 0,
58
58
  Bl18szs: 0,
59
- Blrzh8d: "fkp7w9h"
59
+ Blrzh8d: "f1se4ths"
60
60
  },
61
61
  filled: {
62
62
  Bcgcnre: 0,
@@ -78,10 +78,10 @@ const useRootStyles = /*#__PURE__*/__styles({
78
78
  kj8mxx: "f1kc0wz4"
79
79
  },
80
80
  "filled-darker": {
81
- De3pzq: "f16xq7d1"
81
+ De3pzq: "f1e5utr6"
82
82
  },
83
83
  "filled-lighter": {
84
- De3pzq: "fxugw4r"
84
+ De3pzq: "fcco06x"
85
85
  },
86
86
  filledInteractive: {
87
87
  B05mzqr: "f1xqt08",
@@ -97,7 +97,7 @@ const useRootStyles = /*#__PURE__*/__styles({
97
97
  },
98
98
  disabled: {
99
99
  Bceei9c: "fdrzuqr",
100
- De3pzq: "f1c21dwh",
100
+ De3pzq: "f15wxwvh",
101
101
  Bq4z7u6: "f1a0lfh7",
102
102
  Bk5zm6e: ["f1p2ejm6", "fmzytvz"],
103
103
  Bqjgrrk: "fas2e61",
@@ -108,15 +108,15 @@ const useRootStyles = /*#__PURE__*/__styles({
108
108
  Imo2if: ["frjp63v", "f1lclws"]
109
109
  }
110
110
  }, {
111
- 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);}", {
111
+ 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)));}", {
112
112
  p: -1
113
- }], [".fkp7w9h::after{border-radius:var(--borderRadiusNone);}", {
113
+ }], [".f1se4ths::after{border-radius:var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, var(--borderRadiusNone)));}", {
114
114
  p: -1
115
115
  }], [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
116
116
  p: -2
117
- }], ".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);}"],
118
- 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);}"],
119
- 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);}"],
117
+ }], ".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);}"],
118
+ 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);}"],
119
+ 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)));}"],
120
120
  m: [["@media (forced-colors: active){.flb8es4::before{border-top-color:GrayText;}}", {
121
121
  m: "(forced-colors: active)"
122
122
  }], ["@media (forced-colors: active){.f1lclws::before{border-right-color:GrayText;}.frjp63v::before{border-left-color:GrayText;}}", {
@@ -125,28 +125,28 @@ const useRootStyles = /*#__PURE__*/__styles({
125
125
  m: "(forced-colors: active)"
126
126
  }]]
127
127
  });
128
- 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;}"]);
128
+ 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;}"]);
129
129
  const useInputStyles = /*#__PURE__*/__styles({
130
130
  disabled: {
131
- sj55zd: "f1s2aq7o",
131
+ sj55zd: "f1xwzfv3",
132
132
  Bceei9c: "fdrzuqr",
133
- De3pzq: "f1c21dwh",
134
- yvdlaj: "fahhnxm"
133
+ De3pzq: "fwiaa8s",
134
+ yvdlaj: "fv3kiq7"
135
135
  }
136
136
  }, {
137
- 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);}"]
137
+ 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)));}"]
138
138
  });
139
- 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);}"]);
139
+ 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)));}"]);
140
140
  const useButtonStyles = /*#__PURE__*/__styles({
141
141
  increment: {
142
142
  Ijaq50: "f16hsg94",
143
- B7oj6ja: ["f1jar5jt", "fyu767a"],
143
+ B7oj6ja: ["f14jfzwc", "f1p51xtu"],
144
144
  z8tnut: "f10ra9hq",
145
145
  Byoj8tv: "f1brlhvm"
146
146
  },
147
147
  decrement: {
148
148
  Ijaq50: "faunodf",
149
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
149
+ Bbmb7ep: ["f1gl9ztj", "fekja2g"],
150
150
  z8tnut: "f1sl3k7w",
151
151
  Byoj8tv: "f1y2xyjm"
152
152
  },
@@ -169,37 +169,37 @@ const useButtonStyles = /*#__PURE__*/__styles({
169
169
  outline: {},
170
170
  underline: {
171
171
  De3pzq: "f3rmtva",
172
- sj55zd: "f11d4kpn",
173
- r4wkhp: "f1no7wuu",
174
- B95qlz1: "f1bifk9c",
175
- p743kt: "fp1zg4s",
176
- B7xitij: "fo6hitd",
177
- B6siaa6: "f1wiab75",
178
- Ba9qmo4: "fj9zm5z",
179
- Dyrjrp: "f1cqwcg4"
172
+ sj55zd: "ftjtjgg",
173
+ r4wkhp: "fmxr6h1",
174
+ B95qlz1: "f159rbb9",
175
+ p743kt: "f1f61phu",
176
+ B7xitij: "f11bru7e",
177
+ B6siaa6: "f1wnbjcb",
178
+ Ba9qmo4: "f19zu09e",
179
+ Dyrjrp: "f59gf7h"
180
180
  },
181
181
  "filled-darker": {
182
182
  De3pzq: "f3rmtva",
183
- sj55zd: "f11d4kpn",
184
- r4wkhp: "f1no7wuu",
185
- B95qlz1: "fwwxidx",
186
- p743kt: "fp1zg4s",
187
- B7xitij: "f14i52sd",
188
- B6siaa6: "f1wiab75",
189
- Ba9qmo4: "fwry2ka",
190
- Dyrjrp: "f1cqwcg4"
183
+ sj55zd: "ftz87y7",
184
+ r4wkhp: "fyzdehd",
185
+ B95qlz1: "f1t0huit",
186
+ p743kt: "fqvhx9d",
187
+ B7xitij: "f52eh0d",
188
+ B6siaa6: "fzhlmla",
189
+ Ba9qmo4: "f3v2m6a",
190
+ Dyrjrp: "f50q7fd"
191
191
  },
192
192
  "filled-lighter": {
193
193
  De3pzq: "f3rmtva",
194
- sj55zd: "f11d4kpn",
195
- r4wkhp: "f1no7wuu",
196
- B95qlz1: "f1yywxnv",
197
- drw0cw: "fzaa11h",
198
- idzz8t: "f4fpmm9",
199
- Dyrjrp: "f1cqwcg4"
194
+ sj55zd: "ff0mds",
195
+ r4wkhp: "fc4lrwn",
196
+ B95qlz1: "fwg3vk8",
197
+ drw0cw: "fzac2m3",
198
+ idzz8t: "fdfsw6w",
199
+ Dyrjrp: "f9zhxxo"
200
200
  }
201
201
  }, {
202
- 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;}", {
202
+ 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;}", {
203
203
  p: -1
204
204
  }], [".fm3uwd2{padding:3px 4px 0px 6px;}", {
205
205
  p: -1
@@ -207,7 +207,7 @@ const useButtonStyles = /*#__PURE__*/__styles({
207
207
  p: -1
208
208
  }], [".frkrfqj{padding:0px 4px 3px 6px;}", {
209
209
  p: -1
210
- }], ".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);}"]
210
+ }], ".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)));}"]
211
211
  });
212
212
  // Cannot just disable button as they need to remain
213
213
  // exposed to ATs like screen readers.
@@ -217,43 +217,43 @@ const useButtonDisabledStyles = /*#__PURE__*/__styles({
217
217
  eoavqd: "fphbwmw"
218
218
  },
219
219
  outline: {
220
- sj55zd: "f1s2aq7o",
221
- r4wkhp: "few7wvn",
220
+ sj55zd: "flmj02y",
221
+ r4wkhp: "fdrpovn",
222
222
  B95qlz1: "f110wuh6",
223
- p743kt: "f9s4mys",
223
+ p743kt: "frkll7s",
224
224
  B7xitij: "f10404rc",
225
- B6siaa6: "fwzu9cz",
225
+ B6siaa6: "fdjk730",
226
226
  Ba9qmo4: "f1snwkb6"
227
227
  },
228
228
  underline: {
229
- sj55zd: "f1s2aq7o",
230
- r4wkhp: "few7wvn",
229
+ sj55zd: "f1sgg4g9",
230
+ r4wkhp: "f1v7pcia",
231
231
  B95qlz1: "f110wuh6",
232
- p743kt: "f9s4mys",
232
+ p743kt: "f1813qqb",
233
233
  B7xitij: "f10404rc",
234
- B6siaa6: "fwzu9cz",
234
+ B6siaa6: "f1hs5qo3",
235
235
  Ba9qmo4: "f1snwkb6"
236
236
  },
237
237
  "filled-darker": {
238
- sj55zd: "f1s2aq7o",
239
- r4wkhp: "few7wvn",
238
+ sj55zd: "f1ig0yi1",
239
+ r4wkhp: "f1x19cl1",
240
240
  B95qlz1: "f110wuh6",
241
- p743kt: "f9s4mys",
241
+ p743kt: "fxqoy03",
242
242
  B7xitij: "f10404rc",
243
- B6siaa6: "fwzu9cz",
243
+ B6siaa6: "fbp5f9",
244
244
  Ba9qmo4: "f1snwkb6"
245
245
  },
246
246
  "filled-lighter": {
247
- sj55zd: "f1s2aq7o",
248
- r4wkhp: "few7wvn",
247
+ sj55zd: "fmmuwj6",
248
+ r4wkhp: "f14oh8th",
249
249
  B95qlz1: "f110wuh6",
250
- p743kt: "f9s4mys",
250
+ p743kt: "f1wn8trp",
251
251
  B7xitij: "f10404rc",
252
- B6siaa6: "fwzu9cz",
252
+ B6siaa6: "f1n6vm53",
253
253
  Ba9qmo4: "f1snwkb6"
254
254
  }
255
255
  }, {
256
- 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;}"],
256
+ 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)));}"],
257
257
  h: [".fphbwmw:hover{cursor:not-allowed;}"]
258
258
  });
259
259
  /**
package/lib/components/SpinButton/useSpinButtonStyles.styles.js.map CHANGED
@@ -1 +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":[]}
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: `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 CHANGED
@@ -30,26 +30,26 @@ const fieldHeights = {
30
30
  small: '24px',
31
31
  medium: '32px'
32
32
  };
33
- const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r109xulx", "r1h2jnch", {
33
+ const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rh3jdeq", "r5s979w", {
34
34
  r: [
35
- ".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);}",
36
- ".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);}",
37
- ".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);}",
38
- ".r109xulx:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
39
- ".r109xulx:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
40
- ".r109xulx:focus-within{outline:2px solid transparent;}",
41
- ".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);}",
42
- ".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);}",
43
- ".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);}",
44
- ".r1h2jnch:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
45
- ".r1h2jnch:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
46
- ".r1h2jnch:focus-within{outline:2px solid transparent;}"
35
+ ".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)));}",
36
+ ".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)));}",
37
+ ".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)));}",
38
+ ".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)));}",
39
+ ".rh3jdeq:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}",
40
+ ".rh3jdeq:focus-within{outline:2px solid transparent;}",
41
+ ".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)));}",
42
+ ".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)));}",
43
+ ".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)));}",
44
+ ".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)));}",
45
+ ".r5s979w:focus-within:active::after{border-bottom-color:var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, var(--colorCompoundBrandStrokePressed)));}",
46
+ ".r5s979w:focus-within{outline:2px solid transparent;}"
47
47
  ],
48
48
  s: [
49
- "@media screen and (prefers-reduced-motion: reduce){.r109xulx::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
50
- "@media screen and (prefers-reduced-motion: reduce){.r109xulx:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
51
- "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
52
- "@media screen and (prefers-reduced-motion: reduce){.r1h2jnch:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
49
+ "@media screen and (prefers-reduced-motion: reduce){.rh3jdeq::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
50
+ "@media screen and (prefers-reduced-motion: reduce){.rh3jdeq:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
51
+ "@media screen and (prefers-reduced-motion: reduce){.r5s979w::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
52
+ "@media screen and (prefers-reduced-motion: reduce){.r5s979w:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
53
53
  ]
54
54
  });
55
55
  const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -60,8 +60,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
60
60
  Bhrd7zp: "figsok6",
61
61
  Bg96gwp: "fwrc4pm",
62
62
  uwmqm3: [
63
- "f1f5gg8d",
64
- "f1vdfbxk"
63
+ "f1j8zwyv",
64
+ "f1vlli27"
65
65
  ]
66
66
  },
67
67
  medium: {},
@@ -72,7 +72,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
72
72
  "f1gofhvl",
73
73
  "f18htlvq"
74
74
  ],
75
- Bx11ytk: "ffcnd28",
75
+ Bx11ytk: "f1lfd2ic",
76
76
  B1rg0w0: [
77
77
  "f18htlvq",
78
78
  "f1gofhvl"
@@ -82,7 +82,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
82
82
  "fcoc0mf",
83
83
  "f15r4wkl"
84
84
  ],
85
- xcfy85: "f1ipdth8",
85
+ xcfy85: "f1v3sfeo",
86
86
  Bcc6kan: [
87
87
  "f15r4wkl",
88
88
  "fcoc0mf"
@@ -103,16 +103,16 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
103
103
  Budzafs: 0,
104
104
  ck0cow: 0,
105
105
  n07z76: 0,
106
- Gng75u: "f1xyh2jw"
106
+ Gng75u: "f1dg5oo6"
107
107
  },
108
108
  underlineInteractive: {
109
- Bx11ytk: "ffcnd28",
110
- xcfy85: "f1ipdth8",
109
+ Bx11ytk: "f1iwfssu",
110
+ xcfy85: "f1qekkkg",
111
111
  d9w3h3: 0,
112
112
  B3778ie: 0,
113
113
  B4j8arr: 0,
114
114
  Bl18szs: 0,
115
- Blrzh8d: "fkp7w9h"
115
+ Blrzh8d: "f1se4ths"
116
116
  },
117
117
  filled: {
118
118
  Bcgcnre: 0,
@@ -134,10 +134,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
134
134
  kj8mxx: "f1kc0wz4"
135
135
  },
136
136
  "filled-darker": {
137
- De3pzq: "f16xq7d1"
137
+ De3pzq: "f1e5utr6"
138
138
  },
139
139
  "filled-lighter": {
140
- De3pzq: "fxugw4r"
140
+ De3pzq: "fcco06x"
141
141
  },
142
142
  filledInteractive: {
143
143
  B05mzqr: "f1xqt08",
@@ -165,7 +165,7 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
165
165
  },
166
166
  disabled: {
167
167
  Bceei9c: "fdrzuqr",
168
- De3pzq: "f1c21dwh",
168
+ De3pzq: "f15wxwvh",
169
169
  Bq4z7u6: "f1a0lfh7",
170
170
  Bk5zm6e: [
171
171
  "f1p2ejm6",
@@ -194,20 +194,20 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
194
194
  ".fy9rknc{font-size:var(--fontSizeBase200);}",
195
195
  ".figsok6{font-weight:var(--fontWeightRegular);}",
196
196
  ".fwrc4pm{line-height:var(--lineHeightBase200);}",
197
- ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
198
- ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
197
+ ".f1j8zwyv{padding-left:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}",
198
+ ".f1vlli27{padding-right:var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, var(--spacingHorizontalS)));}",
199
199
  ".f1o236ok::before{border-top-width:0;}",
200
200
  ".faeg28l::before{border-right-width:0;}",
201
201
  ".f64aojp::before{border-left-width:0;}",
202
202
  ".fdw6hkg::before{border-bottom-width:1px;}",
203
203
  [
204
- ".f1xyh2jw::before{border-radius:var(--borderRadiusNone);}",
204
+ ".f1dg5oo6::before{border-radius:var(--ctrl-token-SpinButton-1709, var(--semantic-token-SpinButton-1710, var(--borderRadiusNone)));}",
205
205
  {
206
206
  p: -1
207
207
  }
208
208
  ],
209
209
  [
210
- ".fkp7w9h::after{border-radius:var(--borderRadiusNone);}",
210
+ ".f1se4ths::after{border-radius:var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, var(--borderRadiusNone)));}",
211
211
  {
212
212
  p: -1
213
213
  }
@@ -218,14 +218,14 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
218
218
  p: -2
219
219
  }
220
220
  ],
221
- ".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
222
- ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
221
+ ".f1e5utr6{background-color:var(--ctrl-token-SpinButton-1717, var(--semantic-token-SpinButton-1718, var(--colorNeutralBackground3)));}",
222
+ ".fcco06x{background-color:var(--ctrl-token-SpinButton-1719, var(--semantic-token-SpinButton-1720, var(--colorNeutralBackground1)));}",
223
223
  ".fl48pg9:not(:focus-within)::before,.fl48pg9:hover:not(:focus-within)::before{border-top-color:var(--colorPaletteRedBorder2);}",
224
224
  ".f1a168p3:not(:focus-within)::before,.f1a168p3:hover:not(:focus-within)::before{border-right-color:var(--colorPaletteRedBorder2);}",
225
225
  ".f1pvdymy:not(:focus-within)::before,.f1pvdymy:hover:not(:focus-within)::before{border-left-color:var(--colorPaletteRedBorder2);}",
226
226
  ".f11knvgl:not(:focus-within)::before,.f11knvgl:hover:not(:focus-within)::before{border-bottom-color:var(--colorPaletteRedBorder2);}",
227
227
  ".fdrzuqr{cursor:not-allowed;}",
228
- ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
228
+ ".f15wxwvh{background-color:var(--ctrl-token-SpinButton-1721, var(--semantic-token-SpinButton-1722, var(--colorTransparentBackground)));}",
229
229
  ".f1a0lfh7::before{border-top-color:var(--colorNeutralStrokeDisabled);}",
230
230
  ".f1p2ejm6::before{border-right-color:var(--colorNeutralStrokeDisabled);}",
231
231
  ".fmzytvz::before{border-left-color:var(--colorNeutralStrokeDisabled);}",
@@ -235,7 +235,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
235
235
  ".f1w2y1rc:hover::before{border-top-color:var(--colorNeutralStroke1Hover);}",
236
236
  ".f1gofhvl:hover::before{border-right-color:var(--colorNeutralStroke1Hover);}",
237
237
  ".f18htlvq:hover::before{border-left-color:var(--colorNeutralStroke1Hover);}",
238
- ".ffcnd28:hover::before{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}",
238
+ ".f1lfd2ic:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1705, var(--semantic-token-SpinButton-1706, var(--colorNeutralStrokeAccessibleHover)));}",
239
+ ".f1iwfssu:hover::before{border-bottom-color:var(--ctrl-token-SpinButton-1711, var(--semantic-token-SpinButton-1712, var(--colorNeutralStrokeAccessibleHover)));}",
239
240
  ".f1xqt08:hover::before,.f1xqt08:focus-within::before{border-top-color:var(--colorTransparentStrokeInteractive);}",
240
241
  ".fzt5lgo:hover::before,.fzt5lgo:focus-within::before{border-right-color:var(--colorTransparentStrokeInteractive);}",
241
242
  ".f8tv3r9:hover::before,.f8tv3r9:focus-within::before{border-left-color:var(--colorTransparentStrokeInteractive);}",
@@ -245,7 +246,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
245
246
  ".f6lmxco:active::before,.f6lmxco:focus-within::before{border-top-color:var(--colorNeutralStroke1Pressed);}",
246
247
  ".fcoc0mf:active::before,.fcoc0mf:focus-within::before{border-right-color:var(--colorNeutralStroke1Pressed);}",
247
248
  ".f15r4wkl:active::before,.f15r4wkl:focus-within::before{border-left-color:var(--colorNeutralStroke1Pressed);}",
248
- ".f1ipdth8:active::before,.f1ipdth8:focus-within::before{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
249
+ ".f1v3sfeo:active::before,.f1v3sfeo:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1707, var(--semantic-token-SpinButton-1708, var(--colorNeutralStrokeAccessiblePressed)));}",
250
+ ".f1qekkkg:active::before,.f1qekkkg:focus-within::before{border-bottom-color:var(--ctrl-token-SpinButton-1713, var(--semantic-token-SpinButton-1714, var(--colorNeutralStrokeAccessiblePressed)));}"
249
251
  ],
250
252
  m: [
251
253
  [
@@ -268,42 +270,42 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
268
270
  ]
269
271
  ]
270
272
  });
271
- const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1ljrqje", null, [
272
- ".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%;}",
273
- ".r1ljrqje::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
274
- ".r1ljrqje::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
275
- ".r1ljrqje::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
273
+ const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r2hmsw2", null, [
274
+ ".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%;}",
275
+ ".r2hmsw2::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}",
276
+ ".r2hmsw2::-moz-placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}",
277
+ ".r2hmsw2::placeholder{color:var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, var(--colorNeutralForeground4)));opacity:1;}"
276
278
  ]);
277
279
  const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
278
280
  disabled: {
279
- sj55zd: "f1s2aq7o",
281
+ sj55zd: "f1xwzfv3",
280
282
  Bceei9c: "fdrzuqr",
281
- De3pzq: "f1c21dwh",
282
- yvdlaj: "fahhnxm"
283
+ De3pzq: "fwiaa8s",
284
+ yvdlaj: "fv3kiq7"
283
285
  }
284
286
  }, {
285
287
  d: [
286
- ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
288
+ ".f1xwzfv3{color:var(--ctrl-token-SpinButton-1727, var(--semantic-token-SpinButton-1728, var(--colorNeutralForegroundDisabled)));}",
287
289
  ".fdrzuqr{cursor:not-allowed;}",
288
- ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
289
- ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
290
- ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
290
+ ".fwiaa8s{background-color:var(--ctrl-token-SpinButton-1729, var(--semantic-token-SpinButton-1730, var(--colorTransparentBackground)));}",
291
+ ".fv3kiq7::-webkit-input-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}",
292
+ ".fv3kiq7::-moz-placeholder{color:var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, var(--colorNeutralForegroundDisabled)));}"
291
293
  ]
292
294
  });
293
- const useBaseButtonClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1g4chgs", null, [
294
- ".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;}",
295
- ".r1g4chgs:active{outline-style:none;}",
296
- ".r1g4chgs:enabled:hover{cursor:pointer;color:var(--colorNeutralForeground3Hover);background-color:var(--colorSubtleBackgroundHover);}",
297
- ".r1g4chgs:enabled:active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
298
- ".r1g4chgs:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);background-color:var(--colorSubtleBackgroundPressed);}",
299
- ".r1g4chgs:disabled{cursor:not-allowed;color:var(--colorNeutralForegroundDisabled);}"
295
+ const useBaseButtonClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1bfueos", null, [
296
+ ".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;}",
297
+ ".r1bfueos:active{outline-style:none;}",
298
+ ".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)));}",
299
+ ".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)));}",
300
+ ".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)));}",
301
+ ".r1bfueos:disabled{cursor:not-allowed;color:var(--ctrl-token-SpinButton-1747, var(--semantic-token-SpinButton-1748, var(--colorNeutralForegroundDisabled)));}"
300
302
  ]);
301
303
  const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
302
304
  increment: {
303
305
  Ijaq50: "f16hsg94",
304
306
  B7oj6ja: [
305
- "f1jar5jt",
306
- "fyu767a"
307
+ "f14jfzwc",
308
+ "f1p51xtu"
307
309
  ],
308
310
  z8tnut: "f10ra9hq",
309
311
  Byoj8tv: "f1brlhvm"
@@ -311,8 +313,8 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
311
313
  decrement: {
312
314
  Ijaq50: "faunodf",
313
315
  Bbmb7ep: [
314
- "f1aa9q02",
315
- "f16jpd5f"
316
+ "f1gl9ztj",
317
+ "fekja2g"
316
318
  ],
317
319
  z8tnut: "f1sl3k7w",
318
320
  Byoj8tv: "f1y2xyjm"
@@ -342,45 +344,45 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
342
344
  outline: {},
343
345
  underline: {
344
346
  De3pzq: "f3rmtva",
345
- sj55zd: "f11d4kpn",
346
- r4wkhp: "f1no7wuu",
347
- B95qlz1: "f1bifk9c",
348
- p743kt: "fp1zg4s",
349
- B7xitij: "fo6hitd",
350
- B6siaa6: "f1wiab75",
351
- Ba9qmo4: "fj9zm5z",
352
- Dyrjrp: "f1cqwcg4"
347
+ sj55zd: "ftjtjgg",
348
+ r4wkhp: "fmxr6h1",
349
+ B95qlz1: "f159rbb9",
350
+ p743kt: "f1f61phu",
351
+ B7xitij: "f11bru7e",
352
+ B6siaa6: "f1wnbjcb",
353
+ Ba9qmo4: "f19zu09e",
354
+ Dyrjrp: "f59gf7h"
353
355
  },
354
356
  "filled-darker": {
355
357
  De3pzq: "f3rmtva",
356
- sj55zd: "f11d4kpn",
357
- r4wkhp: "f1no7wuu",
358
- B95qlz1: "fwwxidx",
359
- p743kt: "fp1zg4s",
360
- B7xitij: "f14i52sd",
361
- B6siaa6: "f1wiab75",
362
- Ba9qmo4: "fwry2ka",
363
- Dyrjrp: "f1cqwcg4"
358
+ sj55zd: "ftz87y7",
359
+ r4wkhp: "fyzdehd",
360
+ B95qlz1: "f1t0huit",
361
+ p743kt: "fqvhx9d",
362
+ B7xitij: "f52eh0d",
363
+ B6siaa6: "fzhlmla",
364
+ Ba9qmo4: "f3v2m6a",
365
+ Dyrjrp: "f50q7fd"
364
366
  },
365
367
  "filled-lighter": {
366
368
  De3pzq: "f3rmtva",
367
- sj55zd: "f11d4kpn",
368
- r4wkhp: "f1no7wuu",
369
- B95qlz1: "f1yywxnv",
370
- drw0cw: "fzaa11h",
371
- idzz8t: "f4fpmm9",
372
- Dyrjrp: "f1cqwcg4"
369
+ sj55zd: "ff0mds",
370
+ r4wkhp: "fc4lrwn",
371
+ B95qlz1: "fwg3vk8",
372
+ drw0cw: "fzac2m3",
373
+ idzz8t: "fdfsw6w",
374
+ Dyrjrp: "f9zhxxo"
373
375
  }
374
376
  }, {
375
377
  d: [
376
378
  ".f16hsg94{grid-row-start:1;}",
377
- ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}",
378
- ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}",
379
+ ".f14jfzwc{border-top-right-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}",
380
+ ".f1p51xtu{border-top-left-radius:var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, var(--borderRadiusMedium)));}",
379
381
  ".f10ra9hq{padding-top:4px;}",
380
382
  ".f1brlhvm{padding-bottom:1px;}",
381
383
  ".faunodf{grid-row-start:2;}",
382
- ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}",
383
- ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}",
384
+ ".f1gl9ztj{border-bottom-right-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}",
385
+ ".fekja2g{border-bottom-left-radius:var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, var(--borderRadiusMedium)));}",
384
386
  ".f1sl3k7w{padding-top:1px;}",
385
387
  ".f1y2xyjm{padding-bottom:4px;}",
386
388
  [
@@ -409,20 +411,28 @@ const useButtonStyles = /*#__PURE__*/ (0, _react.__styles)({
409
411
  }
410
412
  ],
411
413
  ".f3rmtva{background-color:transparent;}",
412
- ".f11d4kpn{color:var(--colorNeutralForeground3);}",
413
- ".f1no7wuu:enabled:hover{color:var(--colorNeutralForeground3Hover);}",
414
- ".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}",
415
- ".fp1zg4s:enabled:active{color:var(--colorNeutralForeground3Pressed);}",
416
- ".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}",
417
- ".f1wiab75:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}",
418
- ".fj9zm5z:enabled.fui-SpinButton__button_active{background-color:var(--colorSubtleBackgroundPressed);}",
419
- ".f1cqwcg4:disabled{color:var(--colorNeutralForegroundDisabled);}",
420
- ".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}",
421
- ".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}",
422
- ".fwry2ka:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground3Pressed);}",
423
- ".f1yywxnv:enabled:hover{background-color:var(--colorNeutralBackground1Hover);}",
424
- ".fzaa11h:enabled:active,.fzaa11h:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForeground3Pressed);}",
425
- ".f4fpmm9:enabled:active,.f4fpmm9:enabled.fui-SpinButton__button_active{background-color:var(--colorNeutralBackground1Pressed);}"
414
+ ".ftjtjgg{color:var(--ctrl-token-SpinButton-1753, var(--semantic-token-SpinButton-1754, var(--colorNeutralForeground3)));}",
415
+ ".fmxr6h1:enabled:hover{color:var(--ctrl-token-SpinButton-1755, var(--semantic-token-SpinButton-1756, var(--colorNeutralForeground3Hover)));}",
416
+ ".f159rbb9:enabled:hover{background-color:var(--ctrl-token-SpinButton-1757, var(--semantic-token-SpinButton-1758, var(--colorSubtleBackgroundHover)));}",
417
+ ".f1f61phu:enabled:active{color:var(--ctrl-token-SpinButton-1759, var(--semantic-token-SpinButton-1760, var(--colorNeutralForeground3Pressed)));}",
418
+ ".f11bru7e:enabled:active{background-color:var(--ctrl-token-SpinButton-1761, var(--semantic-token-SpinButton-1762, var(--colorSubtleBackgroundPressed)));}",
419
+ ".f1wnbjcb:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1763, var(--semantic-token-SpinButton-1764, var(--colorNeutralForeground3Pressed)));}",
420
+ ".f19zu09e:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1765, var(--semantic-token-SpinButton-1766, var(--colorSubtleBackgroundPressed)));}",
421
+ ".f59gf7h:disabled{color:var(--ctrl-token-SpinButton-1767, var(--semantic-token-SpinButton-1768, var(--colorNeutralForegroundDisabled)));}",
422
+ ".ftz87y7{color:var(--ctrl-token-SpinButton-1769, var(--semantic-token-SpinButton-1770, var(--colorNeutralForeground3)));}",
423
+ ".fyzdehd:enabled:hover{color:var(--ctrl-token-SpinButton-1771, var(--semantic-token-SpinButton-1772, var(--colorNeutralForeground3Hover)));}",
424
+ ".f1t0huit:enabled:hover{background-color:var(--ctrl-token-SpinButton-1773, var(--semantic-token-SpinButton-1774, var(--colorNeutralBackground3Hover)));}",
425
+ ".fqvhx9d:enabled:active{color:var(--ctrl-token-SpinButton-1775, var(--semantic-token-SpinButton-1776, var(--colorNeutralForeground3Pressed)));}",
426
+ ".f52eh0d:enabled:active{background-color:var(--ctrl-token-SpinButton-1777, var(--semantic-token-SpinButton-1778, var(--colorNeutralBackground3Pressed)));}",
427
+ ".fzhlmla:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1779, var(--semantic-token-SpinButton-1780, var(--colorNeutralForeground3Pressed)));}",
428
+ ".f3v2m6a:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1781, var(--semantic-token-SpinButton-1782, var(--colorNeutralBackground3Pressed)));}",
429
+ ".f50q7fd:disabled{color:var(--ctrl-token-SpinButton-1783, var(--semantic-token-SpinButton-1784, var(--colorNeutralForegroundDisabled)));}",
430
+ ".ff0mds{color:var(--ctrl-token-SpinButton-1785, var(--semantic-token-SpinButton-1786, var(--colorNeutralForeground3)));}",
431
+ ".fc4lrwn:enabled:hover{color:var(--ctrl-token-SpinButton-1787, var(--semantic-token-SpinButton-1788, var(--colorNeutralForeground3Hover)));}",
432
+ ".fwg3vk8:enabled:hover{background-color:var(--ctrl-token-SpinButton-1789, var(--semantic-token-SpinButton-1790, var(--colorNeutralBackground1Hover)));}",
433
+ ".fzac2m3:enabled:active,.fzac2m3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1791, var(--semantic-token-SpinButton-1792, var(--colorNeutralForeground3Pressed)));}",
434
+ ".fdfsw6w:enabled:active,.fdfsw6w:enabled.fui-SpinButton__button_active{background-color:var(--ctrl-token-SpinButton-1793, var(--semantic-token-SpinButton-1794, var(--colorNeutralBackground1Pressed)));}",
435
+ ".f9zhxxo:disabled{color:var(--ctrl-token-SpinButton-1795, var(--semantic-token-SpinButton-1796, var(--colorNeutralForegroundDisabled)));}"
426
436
  ]
427
437
  });
428
438
  // Cannot just disable button as they need to remain
@@ -433,51 +443,63 @@ const useButtonDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({
433
443
  eoavqd: "fphbwmw"
434
444
  },
435
445
  outline: {
436
- sj55zd: "f1s2aq7o",
437
- r4wkhp: "few7wvn",
446
+ sj55zd: "flmj02y",
447
+ r4wkhp: "fdrpovn",
438
448
  B95qlz1: "f110wuh6",
439
- p743kt: "f9s4mys",
449
+ p743kt: "frkll7s",
440
450
  B7xitij: "f10404rc",
441
- B6siaa6: "fwzu9cz",
451
+ B6siaa6: "fdjk730",
442
452
  Ba9qmo4: "f1snwkb6"
443
453
  },
444
454
  underline: {
445
- sj55zd: "f1s2aq7o",
446
- r4wkhp: "few7wvn",
455
+ sj55zd: "f1sgg4g9",
456
+ r4wkhp: "f1v7pcia",
447
457
  B95qlz1: "f110wuh6",
448
- p743kt: "f9s4mys",
458
+ p743kt: "f1813qqb",
449
459
  B7xitij: "f10404rc",
450
- B6siaa6: "fwzu9cz",
460
+ B6siaa6: "f1hs5qo3",
451
461
  Ba9qmo4: "f1snwkb6"
452
462
  },
453
463
  "filled-darker": {
454
- sj55zd: "f1s2aq7o",
455
- r4wkhp: "few7wvn",
464
+ sj55zd: "f1ig0yi1",
465
+ r4wkhp: "f1x19cl1",
456
466
  B95qlz1: "f110wuh6",
457
- p743kt: "f9s4mys",
467
+ p743kt: "fxqoy03",
458
468
  B7xitij: "f10404rc",
459
- B6siaa6: "fwzu9cz",
469
+ B6siaa6: "fbp5f9",
460
470
  Ba9qmo4: "f1snwkb6"
461
471
  },
462
472
  "filled-lighter": {
463
- sj55zd: "f1s2aq7o",
464
- r4wkhp: "few7wvn",
473
+ sj55zd: "fmmuwj6",
474
+ r4wkhp: "f14oh8th",
465
475
  B95qlz1: "f110wuh6",
466
- p743kt: "f9s4mys",
476
+ p743kt: "f1wn8trp",
467
477
  B7xitij: "f10404rc",
468
- B6siaa6: "fwzu9cz",
478
+ B6siaa6: "f1n6vm53",
469
479
  Ba9qmo4: "f1snwkb6"
470
480
  }
471
481
  }, {
472
482
  d: [
473
483
  ".fdrzuqr{cursor:not-allowed;}",
474
- ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
475
- ".few7wvn:enabled:hover{color:var(--colorNeutralForegroundDisabled);}",
484
+ ".flmj02y{color:var(--ctrl-token-SpinButton-1797, var(--semantic-token-SpinButton-1798, var(--colorNeutralForegroundDisabled)));}",
485
+ ".fdrpovn:enabled:hover{color:var(--ctrl-token-SpinButton-1799, var(--semantic-token-SpinButton-1800, var(--colorNeutralForegroundDisabled)));}",
476
486
  ".f110wuh6:enabled:hover{background-color:transparent;}",
477
- ".f9s4mys:enabled:active{color:var(--colorNeutralForegroundDisabled);}",
487
+ ".frkll7s:enabled:active{color:var(--ctrl-token-SpinButton-1801, var(--semantic-token-SpinButton-1802, var(--colorNeutralForegroundDisabled)));}",
478
488
  ".f10404rc:enabled:active{background-color:transparent;}",
479
- ".fwzu9cz:enabled.fui-SpinButton__button_active{color:var(--colorNeutralForegroundDisabled);}",
480
- ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}"
489
+ ".fdjk730:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1803, var(--semantic-token-SpinButton-1804, var(--colorNeutralForegroundDisabled)));}",
490
+ ".f1snwkb6:enabled.fui-SpinButton__button_active{background-color:transparent;}",
491
+ ".f1sgg4g9{color:var(--ctrl-token-SpinButton-1805, var(--semantic-token-SpinButton-1806, var(--colorNeutralForegroundDisabled)));}",
492
+ ".f1v7pcia:enabled:hover{color:var(--ctrl-token-SpinButton-1807, var(--semantic-token-SpinButton-1808, var(--colorNeutralForegroundDisabled)));}",
493
+ ".f1813qqb:enabled:active{color:var(--ctrl-token-SpinButton-1809, var(--semantic-token-SpinButton-1810, var(--colorNeutralForegroundDisabled)));}",
494
+ ".f1hs5qo3:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1811, var(--semantic-token-SpinButton-1812, var(--colorNeutralForegroundDisabled)));}",
495
+ ".f1ig0yi1{color:var(--ctrl-token-SpinButton-1813, var(--semantic-token-SpinButton-1814, var(--colorNeutralForegroundDisabled)));}",
496
+ ".f1x19cl1:enabled:hover{color:var(--ctrl-token-SpinButton-1815, var(--semantic-token-SpinButton-1816, var(--colorNeutralForegroundDisabled)));}",
497
+ ".fxqoy03:enabled:active{color:var(--ctrl-token-SpinButton-1817, var(--semantic-token-SpinButton-1818, var(--colorNeutralForegroundDisabled)));}",
498
+ ".fbp5f9:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1819, var(--semantic-token-SpinButton-1820, var(--colorNeutralForegroundDisabled)));}",
499
+ ".fmmuwj6{color:var(--ctrl-token-SpinButton-1821, var(--semantic-token-SpinButton-1822, var(--colorNeutralForegroundDisabled)));}",
500
+ ".f14oh8th:enabled:hover{color:var(--ctrl-token-SpinButton-1823, var(--semantic-token-SpinButton-1824, var(--colorNeutralForegroundDisabled)));}",
501
+ ".f1wn8trp:enabled:active{color:var(--ctrl-token-SpinButton-1825, var(--semantic-token-SpinButton-1826, var(--colorNeutralForegroundDisabled)));}",
502
+ ".f1n6vm53:enabled.fui-SpinButton__button_active{color:var(--ctrl-token-SpinButton-1827, var(--semantic-token-SpinButton-1828, var(--colorNeutralForegroundDisabled)));}"
481
503
  ],
482
504
  h: [
483
505
  ".fphbwmw:hover{cursor:not-allowed;}"
package/lib-commonjs/components/SpinButton/useSpinButtonStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n small: '24px',\n medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: 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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"}
1
+ {"version":3,"sources":["useSpinButtonStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinButtonClassNames = {\n root: 'fui-SpinButton',\n input: 'fui-SpinButton__input',\n incrementButton: 'fui-SpinButton__incrementButton',\n decrementButton: 'fui-SpinButton__decrementButton'\n};\nconst spinButtonExtraClassNames = {\n buttonActive: 'fui-SpinButton__button_active'\n};\nconst fieldHeights = {\n small: '24px',\n medium: '32px'\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-grid',\n gridTemplateColumns: `1fr 24px`,\n gridTemplateRows: '1fr 1fr',\n columnGap: `var(--ctrl-token-SpinButton-1679, var(--semantic-token-SpinButton-1680, ${tokens.spacingHorizontalXS}))`,\n rowGap: 0,\n position: 'relative',\n isolation: 'isolate',\n verticalAlign: 'middle',\n backgroundColor: `var(--ctrl-token-SpinButton-1681, var(--semantic-token-SpinButton-1682, ${tokens.colorNeutralBackground1}))`,\n minHeight: fieldHeights.medium,\n padding: `0 0 0 ${tokens.spacingHorizontalMNudge}`,\n borderRadius: `var(--ctrl-token-SpinButton-1683, var(--semantic-token-SpinButton-1684, ${tokens.borderRadiusMedium}))`,\n // Apply border styles on the ::before pseudo element.\n // We cannot use ::after since that is used for selection.\n // Using the pseudo element allows us to place the border\n // above content in the component which ensures the buttons\n // line up visually with the border as expected. Without this\n // there is a bit of a gap which can become very noticeable\n // at high zoom or when OS zoom levels are not divisible by 2\n // (e.g., 150% on Windows in Firefox)\n // This is most noticeable on the \"outline\" appearance which is\n // also the default so it feels worth the extra ceremony to get right.\n '::before': {\n content: '\"\"',\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n zIndex: 10,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: `var(--ctrl-token-SpinButton-1685, var(--semantic-token-SpinButton-1686, ${tokens.colorNeutralStrokeAccessible}))`,\n borderRadius: `var(--ctrl-token-SpinButton-1687, var(--semantic-token-SpinButton-1688, ${tokens.borderRadiusMedium}))`\n },\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: 20,\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: `var(--ctrl-token-SpinButton-1689, var(--semantic-token-SpinButton-1690, ${tokens.borderRadiusMedium}))`,\n borderBottomRightRadius: `var(--ctrl-token-SpinButton-1691, var(--semantic-token-SpinButton-1692, ${tokens.borderRadiusMedium}))`,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n // Animation for focus OUT\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: `var(--ctrl-token-SpinButton-1693, var(--semantic-token-SpinButton-1694, ${tokens.durationUltraFast}))`,\n transitionDelay: `var(--ctrl-token-SpinButton-1695, var(--semantic-token-SpinButton-1696, ${tokens.curveAccelerateMid}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within::after': {\n // Animation for focus IN\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: `var(--ctrl-token-SpinButton-1697, var(--semantic-token-SpinButton-1698, ${tokens.durationNormal}))`,\n transitionDelay: `var(--ctrl-token-SpinButton-1699, var(--semantic-token-SpinButton-1700, ${tokens.curveDecelerateMid}))`,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: `var(--ctrl-token-SpinButton-1701, var(--semantic-token-SpinButton-1702, ${tokens.colorCompoundBrandStrokePressed}))`\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n paddingLeft: `var(--ctrl-token-SpinButton-1703, var(--semantic-token-SpinButton-1704, ${tokens.spacingHorizontalS}))`\n },\n medium: {\n },\n outline: {\n },\n outlineInteractive: {\n ':hover::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: `var(--ctrl-token-SpinButton-1705, var(--semantic-token-SpinButton-1706, ${tokens.colorNeutralStrokeAccessibleHover}))`\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: `var(--ctrl-token-SpinButton-1707, var(--semantic-token-SpinButton-1708, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n }\n },\n underline: {\n '::before': {\n ...shorthands.borderWidth(0, 0, '1px', 0),\n borderRadius: `var(--ctrl-token-SpinButton-1709, var(--semantic-token-SpinButton-1710, ${tokens.borderRadiusNone}))`\n }\n },\n underlineInteractive: {\n ':hover::before': {\n borderBottomColor: `var(--ctrl-token-SpinButton-1711, var(--semantic-token-SpinButton-1712, ${tokens.colorNeutralStrokeAccessibleHover}))`\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n '::before': {\n borderBottomColor: `var(--ctrl-token-SpinButton-1713, var(--semantic-token-SpinButton-1714, ${tokens.colorNeutralStrokeAccessiblePressed}))`\n }\n },\n '::after': {\n borderRadius: `var(--ctrl-token-SpinButton-1715, var(--semantic-token-SpinButton-1716, ${tokens.borderRadiusNone}))`\n }\n },\n filled: {\n '::before': {\n border: `1px solid ${tokens.colorTransparentStroke}`\n }\n },\n 'filled-darker': {\n backgroundColor: `var(--ctrl-token-SpinButton-1717, var(--semantic-token-SpinButton-1718, ${tokens.colorNeutralBackground3}))`\n },\n 'filled-lighter': {\n backgroundColor: `var(--ctrl-token-SpinButton-1719, var(--semantic-token-SpinButton-1720, ${tokens.colorNeutralBackground1}))`\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n '::before': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n '::before': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n }\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: `var(--ctrl-token-SpinButton-1721, var(--semantic-token-SpinButton-1722, ${tokens.colorTransparentBackground}))`,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nconst useInputClassName = makeResetStyles({\n gridColumnStart: '1',\n gridColumnEnd: '2',\n gridRowStart: '1',\n gridRowEnd: '3',\n outlineStyle: 'none',\n border: '0',\n padding: '0',\n color: `var(--ctrl-token-SpinButton-1723, var(--semantic-token-SpinButton-1724, ${tokens.colorNeutralForeground1}))`,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n width: '100%',\n '::placeholder': {\n color: `var(--ctrl-token-SpinButton-1725, var(--semantic-token-SpinButton-1726, ${tokens.colorNeutralForeground4}))`,\n opacity: 1\n }\n});\nconst useInputStyles = makeStyles({\n disabled: {\n color: `var(--ctrl-token-SpinButton-1727, var(--semantic-token-SpinButton-1728, ${tokens.colorNeutralForegroundDisabled}))`,\n cursor: 'not-allowed',\n backgroundColor: `var(--ctrl-token-SpinButton-1729, var(--semantic-token-SpinButton-1730, ${tokens.colorTransparentBackground}))`,\n '::placeholder': {\n color: `var(--ctrl-token-SpinButton-1731, var(--semantic-token-SpinButton-1732, ${tokens.colorNeutralForegroundDisabled}))`\n }\n }\n});\nconst useBaseButtonClassName = makeResetStyles({\n display: 'inline-flex',\n width: '24px',\n alignItems: 'center',\n justifyContent: 'center',\n border: '0',\n position: 'absolute',\n outlineStyle: 'none',\n height: '16px',\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1733, var(--semantic-token-SpinButton-1734, ${tokens.colorNeutralForeground3}))`,\n // common button layout\n gridColumnStart: '2',\n borderRadius: '0',\n padding: '0 5px 0 5px',\n ':active': {\n outlineStyle: 'none'\n },\n ':enabled': {\n ':hover': {\n cursor: 'pointer',\n color: `var(--ctrl-token-SpinButton-1735, var(--semantic-token-SpinButton-1736, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1737, var(--semantic-token-SpinButton-1738, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1739, var(--semantic-token-SpinButton-1740, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1741, var(--semantic-token-SpinButton-1742, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1743, var(--semantic-token-SpinButton-1744, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1745, var(--semantic-token-SpinButton-1746, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n cursor: 'not-allowed',\n color: `var(--ctrl-token-SpinButton-1747, var(--semantic-token-SpinButton-1748, ${tokens.colorNeutralForegroundDisabled}))`\n }\n});\nconst useButtonStyles = makeStyles({\n increment: {\n gridRowStart: '1',\n borderTopRightRadius: `var(--ctrl-token-SpinButton-1749, var(--semantic-token-SpinButton-1750, ${tokens.borderRadiusMedium}))`,\n paddingTop: '4px',\n paddingBottom: '1px'\n },\n decrement: {\n gridRowStart: '2',\n borderBottomRightRadius: `var(--ctrl-token-SpinButton-1751, var(--semantic-token-SpinButton-1752, ${tokens.borderRadiusMedium}))`,\n paddingTop: '1px',\n paddingBottom: '4px'\n },\n // Padding values numbers don't align with design specs\n // but visually the padding aligns.\n // The icons are set in a 16x16px square but the artwork is inset from that\n // so these padding values are computed by hand.\n // Additionally the design uses fractional values so these are\n // rounded to the nearest integer.\n incrementButtonSmall: {\n padding: '3px 6px 0px 4px',\n height: '12px'\n },\n decrementButtonSmall: {\n padding: '0px 6px 3px 4px',\n height: '12px'\n },\n outline: {\n },\n underline: {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1753, var(--semantic-token-SpinButton-1754, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1755, var(--semantic-token-SpinButton-1756, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1757, var(--semantic-token-SpinButton-1758, ${tokens.colorSubtleBackgroundHover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1759, var(--semantic-token-SpinButton-1760, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1761, var(--semantic-token-SpinButton-1762, ${tokens.colorSubtleBackgroundPressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1763, var(--semantic-token-SpinButton-1764, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1765, var(--semantic-token-SpinButton-1766, ${tokens.colorSubtleBackgroundPressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1767, var(--semantic-token-SpinButton-1768, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-darker': {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1769, var(--semantic-token-SpinButton-1770, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1771, var(--semantic-token-SpinButton-1772, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1773, var(--semantic-token-SpinButton-1774, ${tokens.colorNeutralBackground3Hover}))`\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1775, var(--semantic-token-SpinButton-1776, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1777, var(--semantic-token-SpinButton-1778, ${tokens.colorNeutralBackground3Pressed}))`\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1779, var(--semantic-token-SpinButton-1780, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1781, var(--semantic-token-SpinButton-1782, ${tokens.colorNeutralBackground3Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1783, var(--semantic-token-SpinButton-1784, ${tokens.colorNeutralForegroundDisabled}))`\n }\n },\n 'filled-lighter': {\n backgroundColor: 'transparent',\n color: `var(--ctrl-token-SpinButton-1785, var(--semantic-token-SpinButton-1786, ${tokens.colorNeutralForeground3}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1787, var(--semantic-token-SpinButton-1788, ${tokens.colorNeutralForeground3Hover}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1789, var(--semantic-token-SpinButton-1790, ${tokens.colorNeutralBackground1Hover}))`\n },\n [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1791, var(--semantic-token-SpinButton-1792, ${tokens.colorNeutralForeground3Pressed}))`,\n backgroundColor: `var(--ctrl-token-SpinButton-1793, var(--semantic-token-SpinButton-1794, ${tokens.colorNeutralBackground1Pressed}))`\n }\n },\n ':disabled': {\n color: `var(--ctrl-token-SpinButton-1795, var(--semantic-token-SpinButton-1796, ${tokens.colorNeutralForegroundDisabled}))`\n }\n }\n});\n// Cannot just disable button as they need to remain\n// exposed to ATs like screen readers.\nconst useButtonDisabledStyles = makeStyles({\n base: {\n cursor: 'not-allowed',\n ':hover': {\n cursor: 'not-allowed'\n }\n },\n outline: {\n color: `var(--ctrl-token-SpinButton-1797, var(--semantic-token-SpinButton-1798, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1799, var(--semantic-token-SpinButton-1800, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1801, var(--semantic-token-SpinButton-1802, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1803, var(--semantic-token-SpinButton-1804, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n underline: {\n color: `var(--ctrl-token-SpinButton-1805, var(--semantic-token-SpinButton-1806, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1807, var(--semantic-token-SpinButton-1808, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1809, var(--semantic-token-SpinButton-1810, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1811, var(--semantic-token-SpinButton-1812, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-darker': {\n color: `var(--ctrl-token-SpinButton-1813, var(--semantic-token-SpinButton-1814, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1815, var(--semantic-token-SpinButton-1816, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1817, var(--semantic-token-SpinButton-1818, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1819, var(--semantic-token-SpinButton-1820, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n },\n 'filled-lighter': {\n color: `var(--ctrl-token-SpinButton-1821, var(--semantic-token-SpinButton-1822, ${tokens.colorNeutralForegroundDisabled}))`,\n ':enabled': {\n ':hover': {\n color: `var(--ctrl-token-SpinButton-1823, var(--semantic-token-SpinButton-1824, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n ':active': {\n color: `var(--ctrl-token-SpinButton-1825, var(--semantic-token-SpinButton-1826, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n },\n [`&.${spinButtonExtraClassNames.buttonActive}`]: {\n color: `var(--ctrl-token-SpinButton-1827, var(--semantic-token-SpinButton-1828, ${tokens.colorNeutralForegroundDisabled}))`,\n backgroundColor: 'transparent'\n }\n }\n }\n});\n/**\n * Apply styling to the SpinButton slots based on the state\n */ export const useSpinButtonStyles_unstable = (state)=>{\n 'use no memo';\n const { appearance, atBound, spinState, size } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const buttonStyles = useButtonStyles();\n const buttonDisabledStyles = useButtonDisabledStyles();\n const inputStyles = useInputStyles();\n state.root.className = mergeClasses(spinButtonClassNames.root, useRootClassName(), rootStyles[size], rootStyles[appearance], filled && rootStyles.filled, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n state.incrementButton.className = mergeClasses(spinButtonClassNames.incrementButton, spinState === 'up' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.increment, buttonStyles[appearance], size === 'small' && buttonStyles.incrementButtonSmall, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance], state.incrementButton.className);\n state.decrementButton.className = mergeClasses(spinButtonClassNames.decrementButton, spinState === 'down' && `${spinButtonExtraClassNames.buttonActive}`, useBaseButtonClassName(), buttonStyles.decrement, buttonStyles[appearance], size === 'small' && buttonStyles.decrementButtonSmall, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base, (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance], state.decrementButton.className);\n state.input.className = mergeClasses(spinButtonClassNames.input, useInputClassName(), disabled && inputStyles.disabled, state.input.className);\n return state;\n};\n"],"names":["spinButtonClassNames","useSpinButtonStyles_unstable","root","input","incrementButton","decrementButton","spinButtonExtraClassNames","buttonActive","fieldHeights","small","medium","useRootClassName","__resetStyles","r","s","useRootStyles","__styles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","uwmqm3","outline","outlineInteractive","Bo3r8zu","Hpvxnh","Bx11ytk","B1rg0w0","Bsg1tlv","Brjw370","xcfy85","Bcc6kan","underline","B0qfbqy","B4f6apu","y0oebl","uvfttm","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","Bcgcnre","Bqjgrrk","qa3bma","Biqmznv","Bm6vgfq","Bbv0w2i","eqrjj","Bk5zm6e","m598lv","ydt019","Bq4z7u6","Bdkvgpv","kj8mxx","De3pzq","filledInteractive","B05mzqr","tb9y6h","jcehpj","B23o0hn","invalid","emecyz","lz0pba","Bo1k74p","Ba322q7","disabled","Bceei9c","Cffpyd","hxi8he","Bcuq369","Imo2if","d","p","h","a","m","useInputClassName","useInputStyles","sj55zd","yvdlaj","useBaseButtonClassName","useButtonStyles","increment","Ijaq50","B7oj6ja","z8tnut","Byoj8tv","decrement","Bbmb7ep","incrementButtonSmall","z189sj","B0ocmuz","Bqenvij","decrementButtonSmall","r4wkhp","B95qlz1","p743kt","B7xitij","B6siaa6","Ba9qmo4","Dyrjrp","drw0cw","idzz8t","useButtonDisabledStyles","base","eoavqd","state","appearance","atBound","spinState","size","startsWith","rootStyles","buttonStyles","buttonDisabledStyles","inputStyles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinbutton",
3
- "version": "0.0.0-nightly-20240730-0407.1",
3
+ "version": "0.0.0-nightly-20240816-2133.1",
4
4
  "description": "Fluent UI React SpinButton component.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -26,20 +26,20 @@
26
26
  },
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
- "@fluentui/react-conformance": "0.0.0-nightly-20240730-0407.1",
30
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240730-0407.1",
31
- "@fluentui/react-label": "0.0.0-nightly-20240730-0407.1",
29
+ "@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
30
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
31
+ "@fluentui/react-label": "0.0.0-nightly-20240816-2133.1",
32
32
  "@fluentui/scripts-api-extractor": "*",
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/keyboard-keys": "0.0.0-nightly-20240730-0407.1",
37
- "@fluentui/react-field": "0.0.0-nightly-20240730-0407.1",
36
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20240816-2133.1",
37
+ "@fluentui/react-field": "0.0.0-nightly-20240816-2133.1",
38
38
  "@fluentui/react-icons": "^2.0.245",
39
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240730-0407.1",
40
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20240730-0407.1",
41
- "@fluentui/react-theme": "0.0.0-nightly-20240730-0407.1",
42
- "@fluentui/react-utilities": "0.0.0-nightly-20240730-0407.1",
39
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
40
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20240816-2133.1",
41
+ "@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
42
+ "@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
43
43
  "@griffel/react": "^1.5.22",
44
44
  "@swc/helpers": "^0.5.1"
45
45
  },