@fluentui/react-tags 9.7.11 → 9.7.13

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 (14) hide show
  1. package/CHANGELOG.md +30 -2
  2. package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js +49 -49
  3. package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map +1 -1
  4. package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js +42 -42
  5. package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map +1 -1
  6. package/lib/components/Tag/useTagStyles.styles.js +24 -24
  7. package/lib/components/Tag/useTagStyles.styles.js.map +1 -1
  8. package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js +62 -62
  9. package/lib-commonjs/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map +1 -1
  10. package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js +45 -45
  11. package/lib-commonjs/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map +1 -1
  12. package/lib-commonjs/components/Tag/useTagStyles.styles.js +27 -27
  13. package/lib-commonjs/components/Tag/useTagStyles.styles.js.map +1 -1
  14. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,12 +1,40 @@
1
1
  # Change Log - @fluentui/react-tags
2
2
 
3
- This log was last generated on Thu, 06 Nov 2025 14:57:01 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.7.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.13)
8
+
9
+ Wed, 17 Dec 2025 18:06:04 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.12..@fluentui/react-tags_v9.7.13)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-aria to v9.17.7 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
15
+ - Bump @fluentui/react-avatar to v9.9.13 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
19
+
20
+ ## [9.7.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.12)
21
+
22
+ Tue, 11 Nov 2025 19:18:12 GMT
23
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.11..@fluentui/react-tags_v9.7.12)
24
+
25
+ ### Patches
26
+
27
+ - chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
28
+ - Bump @fluentui/react-aria to v9.17.6 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
29
+ - Bump @fluentui/react-avatar to v9.9.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
30
+ - Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
31
+ - Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
32
+ - Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
33
+ - Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
34
+
7
35
  ## [9.7.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.11)
8
36
 
9
- Thu, 06 Nov 2025 14:57:01 GMT
37
+ Thu, 06 Nov 2025 15:01:25 GMT
10
38
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.7.10..@fluentui/react-tags_v9.7.11)
11
39
 
12
40
  ### Patches
package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js CHANGED
@@ -47,23 +47,23 @@ const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r132q0f6", "r15
47
47
  */
48
48
  const useRootCircularContrastStyles = /*#__PURE__*/__styles({
49
49
  withoutSecondaryAction: {
50
- Bglfifq: "ff3fe07",
51
- hxi8he: 0,
52
- B33s42s: 0,
53
- G4pote: 0,
54
- gw1m2h: ["f19rnj73", "f1jjg5yc"],
55
- w20ur: ["f6k8nl2", "f1ik0cvg"],
56
- Byczuf6: ["f10f1qdh", "fmb7qm7"]
50
+ Bvgf1ty: "f135udas",
51
+ Cqojjj: 0,
52
+ dd5wkx: 0,
53
+ Bdzpf8n: 0,
54
+ ibz501: ["f1i3lrd2", "fbpt94e"],
55
+ Bs8828g: ["f14bn3u", "fdhx3t9"],
56
+ Bn0yx1x: ["fu87gj3", "f631p13"]
57
57
  }
58
58
  }, {
59
- m: [["@media (forced-colors: active){.ff3fe07{position:relative;}}", {
59
+ m: [["@media (forced-colors: active){.f135udas{position:relative;}}", {
60
60
  m: "(forced-colors: active)"
61
- }], ["@media (forced-colors: active){.f19rnj73::before{border-right:var(--strokeWidthThin) solid transparent;}.f1jjg5yc::before{border-left:var(--strokeWidthThin) solid transparent;}}", {
61
+ }], ["@media (forced-colors: active){.f1i3lrd2::before{border-right:var(--strokeWidthThin) solid transparent;}.fbpt94e::before{border-left:var(--strokeWidthThin) solid transparent;}}", {
62
62
  p: -1,
63
63
  m: "(forced-colors: active)"
64
- }], ["@media (forced-colors: active){.f1ik0cvg::before{border-top-left-radius:var(--borderRadiusCircular);}.f6k8nl2::before{border-top-right-radius:var(--borderRadiusCircular);}}", {
64
+ }], ["@media (forced-colors: active){.f14bn3u::before{border-top-right-radius:var(--borderRadiusCircular);}.fdhx3t9::before{border-top-left-radius:var(--borderRadiusCircular);}}", {
65
65
  m: "(forced-colors: active)"
66
- }], ["@media (forced-colors: active){.f10f1qdh::before{border-bottom-right-radius:var(--borderRadiusCircular);}.fmb7qm7::before{border-bottom-left-radius:var(--borderRadiusCircular);}}", {
66
+ }], ["@media (forced-colors: active){.f631p13::before{border-bottom-left-radius:var(--borderRadiusCircular);}.fu87gj3::before{border-bottom-right-radius:var(--borderRadiusCircular);}}", {
67
67
  m: "(forced-colors: active)"
68
68
  }]]
69
69
  });
@@ -76,8 +76,8 @@ const useRootStyles = /*#__PURE__*/__styles({
76
76
  Bi91k9c: "fnwyq0v",
77
77
  ecr2s2: "fwdzr64",
78
78
  lj723h: "flvvhsy",
79
- Bqrx1nm: "fq7113v",
80
- kx9iu6: "fp3oj7s"
79
+ Bbkh6qg: "fkiggi6",
80
+ Cnge2b: "f8zknr1"
81
81
  },
82
82
  outline: {
83
83
  De3pzq: "fhovq9v",
@@ -97,8 +97,8 @@ const useRootStyles = /*#__PURE__*/__styles({
97
97
  Bnrwwps: "fvpl5sy",
98
98
  weioyw: "f1xblose",
99
99
  Bpre390: "f8upcvr",
100
- Bqrx1nm: "fq7113v",
101
- kx9iu6: "fp3oj7s"
100
+ Bbkh6qg: "fkiggi6",
101
+ Cnge2b: "f8zknr1"
102
102
  },
103
103
  brand: {
104
104
  De3pzq: "f16xkysk",
@@ -108,8 +108,8 @@ const useRootStyles = /*#__PURE__*/__styles({
108
108
  Bi91k9c: "f3ymbdj",
109
109
  ecr2s2: "fy3sl2y",
110
110
  lj723h: "fryz5bw",
111
- Bqrx1nm: "fq7113v",
112
- kx9iu6: "fp3oj7s"
111
+ Bbkh6qg: "fkiggi6",
112
+ Cnge2b: "f8zknr1"
113
113
  },
114
114
  selected: {
115
115
  Bgh53k4: 0,
@@ -128,19 +128,19 @@ const useRootStyles = /*#__PURE__*/__styles({
128
128
  h3c5rm: ["f1vfbj5f", "f1qpacp7"],
129
129
  B9xav0g: "fdf0ba2",
130
130
  zhjwy3: ["f1qpacp7", "f1vfbj5f"],
131
- ycbfsm: "fkc42ay",
132
- Bsw6fvg: "f1rirnrt",
133
- Bbusuzp: "f1lkg8j3",
131
+ B8gzw0y: "f1h3a8gf",
132
+ By8wz76: "f1nz3ub2",
133
+ B7iucu3: "fqc85l4",
134
134
  Jwef8y: "f15wkkf3",
135
135
  Bi91k9c: "f1rq72xc",
136
136
  I6i3kg: "f10jvnl4",
137
- Bqrx1nm: "fiu8gst",
138
- ze5xyy: "f1byx217",
137
+ Bbkh6qg: "f1tx4pjd",
138
+ Bahaeuw: "fu37p9p",
139
139
  ecr2s2: "fsp1bjw",
140
140
  lj723h: "f18otbis",
141
141
  weioyw: "f3wpj5r",
142
- kx9iu6: "fkk6lp6",
143
- oy3o9n: "f1ojl2j2"
142
+ Cnge2b: "f16z8z4r",
143
+ Boo3t63: "f7ydw7o"
144
144
  },
145
145
  medium: {
146
146
  z189sj: ["f18k1jr3", "f1rtp3s9"]
@@ -151,13 +151,13 @@ const useRootStyles = /*#__PURE__*/__styles({
151
151
  "extra-small": {
152
152
  z189sj: ["fwiuce9", "f15vdbe4"],
153
153
  qhf8xq: "f10pi13n",
154
- Bkdsyek: "fqiv1u6",
155
- Brfojbq: "fl6l3ok",
156
- B1yn5a7: "fiuoxex",
157
- Bihq2av: ["f1f187wz", "f12z4n6f"],
158
- B2k102m: "fxnjm4l",
159
- B1l11lz: "fa2n458",
160
- Bgr9gxd: "f1nrpwwh"
154
+ Ie5t1m: "fru8nlv",
155
+ G6hvz8: "f5nasji",
156
+ wgw0td: "f45hpys",
157
+ Bbwa3xj: ["f1sbfcjn", "f1le4i14"],
158
+ m3mfg4: "fq6y7a1",
159
+ B9s7hj8: "f1jr4pq3",
160
+ B9e1dac: "f1tfer7m"
161
161
  }
162
162
  }, {
163
163
  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
@@ -165,37 +165,37 @@ const useRootStyles = /*#__PURE__*/__styles({
165
165
  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f10pi13n{position:relative;}"],
166
166
  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fqbfmpb:hover .fui-Icon-filled{color:var(--colorNeutralForeground2BrandHover);}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f10jvnl4:hover .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
167
167
  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fvpl5sy:active .fui-Icon-filled{display:inline;}", ".f1xblose:active .fui-Icon-filled{color:var(--colorNeutralForeground2BrandPressed);}", ".f8upcvr:active .fui-Icon-regular{display:none;}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f3wpj5r:active .fui-Icon-filled{color:var(--colorNeutralForegroundOnBrand);}"],
168
- m: [["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
168
+ m: [["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
169
169
  m: "(forced-colors: active)"
170
- }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
170
+ }], ["@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}", {
171
171
  m: "(forced-colors: active)"
172
- }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
172
+ }], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
173
173
  m: "(forced-colors: active)"
174
- }], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
174
+ }], ["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
175
175
  m: "(forced-colors: active)"
176
- }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
176
+ }], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
177
177
  m: "(forced-colors: active)"
178
- }], ["@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}", {
178
+ }], ["@media (forced-colors: active){.f1tx4pjd:hover{background-color:Highlight;}}", {
179
179
  m: "(forced-colors: active)"
180
- }], ["@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}", {
180
+ }], ["@media (forced-colors: active){.fu37p9p:hover{color:HighlightText;}}", {
181
181
  m: "(forced-colors: active)"
182
- }], ["@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}", {
182
+ }], ["@media (forced-colors: active){.f16z8z4r:active{background-color:Highlight;}}", {
183
183
  m: "(forced-colors: active)"
184
- }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
184
+ }], ["@media (forced-colors: active){.f7ydw7o:active{color:HighlightText;}}", {
185
185
  m: "(forced-colors: active)"
186
- }], ["@media (forced-colors: none){.fqiv1u6:before,.fqiv1u6:after{content:\"\";}}", {
186
+ }], ["@media (forced-colors: none){.fru8nlv:before,.fru8nlv:after{content:\"\";}}", {
187
187
  m: "(forced-colors: none)"
188
- }], ["@media (forced-colors: none){.fl6l3ok:before,.fl6l3ok:after{position:absolute;}}", {
188
+ }], ["@media (forced-colors: none){.f5nasji:before,.f5nasji:after{position:absolute;}}", {
189
189
  m: "(forced-colors: none)"
190
- }], ["@media (forced-colors: none){.fiuoxex:before,.fiuoxex:after{height:2px;}}", {
190
+ }], ["@media (forced-colors: none){.f45hpys:before,.f45hpys:after{height:2px;}}", {
191
191
  m: "(forced-colors: none)"
192
- }], ["@media (forced-colors: none){.f12z4n6f:before,.f12z4n6f:after{right:0;}.f1f187wz:before,.f1f187wz:after{left:0;}}", {
192
+ }], ["@media (forced-colors: none){.f1le4i14:before,.f1le4i14:after{right:0;}.f1sbfcjn:before,.f1sbfcjn:after{left:0;}}", {
193
193
  m: "(forced-colors: none)"
194
- }], ["@media (forced-colors: none){.fxnjm4l:before,.fxnjm4l:after{width:100%;}}", {
194
+ }], ["@media (forced-colors: none){.fq6y7a1:before,.fq6y7a1:after{width:100%;}}", {
195
195
  m: "(forced-colors: none)"
196
- }], ["@media (forced-colors: none){.fa2n458:before{bottom:100%;}}", {
196
+ }], ["@media (forced-colors: none){.f1jr4pq3:before{bottom:100%;}}", {
197
197
  m: "(forced-colors: none)"
198
- }], ["@media (forced-colors: none){.f1nrpwwh:after{top:100%;}}", {
198
+ }], ["@media (forced-colors: none){.f1tfer7m:after{top:100%;}}", {
199
199
  m: "(forced-colors: none)"
200
200
  }]]
201
201
  });
@@ -256,7 +256,7 @@ const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
256
256
  vrafjx: ["f1n71otn", "f1deefiw"],
257
257
  B6xbmo0: ["f146y5a9", "f1k2ftg"],
258
258
  kdpuga: ["f1ndz5i7", "f1co4qro"],
259
- w20ur: ["fjoni7s", "f1xmedr4"]
259
+ Bs8828g: ["fyvfifd", "fbkbt8g"]
260
260
  },
261
261
  medium: {
262
262
  z189sj: ["f1vdfbxk", "f1f5gg8d"]
@@ -269,7 +269,7 @@ const useRootWithSecondaryActionStyles = /*#__PURE__*/__styles({
269
269
  }
270
270
  }, {
271
271
  d: [".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"],
272
- m: [["@media (forced-colors: active){.f1xmedr4::before{border-top-left-radius:0;}.fjoni7s::before{border-top-right-radius:0;}}", {
272
+ m: [["@media (forced-colors: active){.fbkbt8g::before{border-top-left-radius:0;}.fyvfifd::before{border-top-right-radius:0;}}", {
273
273
  m: "(forced-colors: active)"
274
274
  }]]
275
275
  });
package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","ycbfsm","Bsw6fvg","Bbusuzp","ze5xyy","oy3o9n","medium","z189sj","small","qhf8xq","Bkdsyek","Brfojbq","B1yn5a7","Bihq2av","B2k102m","B1l11lz","Bgr9gxd","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0'\n }\n }\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bvgf1ty","Cqojjj","dd5wkx","Bdzpf8n","ibz501","Bs8828g","Bn0yx1x","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bbkh6qg","Cnge2b","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","medium","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /**\n * Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n */ '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */ const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */ const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0'\n }\n }\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js CHANGED
@@ -21,10 +21,10 @@ const useRootStyles = /*#__PURE__*/__styles({
21
21
  Bi91k9c: "f139oj5f",
22
22
  ecr2s2: "fwdzr64",
23
23
  lj723h: "f19au66r",
24
- gwxt9v: "fah2lgh",
25
- Bc736ss: "fx7har",
26
- Bqrx1nm: "fq7113v",
27
- kx9iu6: "fp3oj7s"
24
+ kr9cjb: "fmvl6o9",
25
+ u9orzk: "fb8cdra",
26
+ Bbkh6qg: "fkiggi6",
27
+ Cnge2b: "f8zknr1"
28
28
  },
29
29
  outline: {
30
30
  De3pzq: "fhovq9v",
@@ -38,8 +38,8 @@ const useRootStyles = /*#__PURE__*/__styles({
38
38
  Bi91k9c: "f139oj5f",
39
39
  ecr2s2: "f1wfn5kd",
40
40
  lj723h: "f19au66r",
41
- Bqrx1nm: "fq7113v",
42
- kx9iu6: "fp3oj7s"
41
+ Bbkh6qg: "fkiggi6",
42
+ Cnge2b: "f8zknr1"
43
43
  },
44
44
  brand: {
45
45
  De3pzq: "f16xkysk",
@@ -52,10 +52,10 @@ const useRootStyles = /*#__PURE__*/__styles({
52
52
  Bi91k9c: "f3ymbdj",
53
53
  ecr2s2: "fy3sl2y",
54
54
  lj723h: "fryz5bw",
55
- gwxt9v: "fah2lgh",
56
- Bc736ss: "fx7har",
57
- Bqrx1nm: "fq7113v",
58
- kx9iu6: "fp3oj7s"
55
+ kr9cjb: "fmvl6o9",
56
+ u9orzk: "fb8cdra",
57
+ Bbkh6qg: "fkiggi6",
58
+ Cnge2b: "f8zknr1"
59
59
  },
60
60
  selected: {
61
61
  Bgh53k4: 0,
@@ -74,17 +74,17 @@ const useRootStyles = /*#__PURE__*/__styles({
74
74
  h3c5rm: ["f1vfbj5f", "f1qpacp7"],
75
75
  B9xav0g: "fdf0ba2",
76
76
  zhjwy3: ["f4j9k2g", "f1mg2euo"],
77
- ycbfsm: "fkc42ay",
78
- Bsw6fvg: "f1rirnrt",
79
- Bbusuzp: "f1lkg8j3",
77
+ B8gzw0y: "f1h3a8gf",
78
+ By8wz76: "f1nz3ub2",
79
+ B7iucu3: "fqc85l4",
80
80
  Jwef8y: "f15wkkf3",
81
81
  Bi91k9c: "f1rq72xc",
82
- Bqrx1nm: "fiu8gst",
83
- ze5xyy: "f1byx217",
82
+ Bbkh6qg: "f1tx4pjd",
83
+ Bahaeuw: "fu37p9p",
84
84
  ecr2s2: "fsp1bjw",
85
85
  lj723h: "f18otbis",
86
- kx9iu6: "fkk6lp6",
87
- oy3o9n: "f1ojl2j2"
86
+ Cnge2b: "f16z8z4r",
87
+ Boo3t63: "f7ydw7o"
88
88
  },
89
89
  rounded: {
90
90
  B7oj6ja: ["f1jar5jt", "fyu767a"],
@@ -109,13 +109,13 @@ const useRootStyles = /*#__PURE__*/__styles({
109
109
  uwmqm3: ["f15vdbe4", "fwiuce9"],
110
110
  z189sj: ["fwiuce9", "f15vdbe4"],
111
111
  qhf8xq: "f10pi13n",
112
- Bkdsyek: "fqiv1u6",
113
- Brfojbq: "fl6l3ok",
114
- B1yn5a7: "fiuoxex",
115
- Bihq2av: ["f1f187wz", "f12z4n6f"],
116
- B2k102m: "fxnjm4l",
117
- B1l11lz: "fa2n458",
118
- Bgr9gxd: "f1nrpwwh"
112
+ Ie5t1m: "fru8nlv",
113
+ G6hvz8: "f5nasji",
114
+ wgw0td: "f45hpys",
115
+ Bbwa3xj: ["f1sbfcjn", "f1le4i14"],
116
+ m3mfg4: "fq6y7a1",
117
+ B9s7hj8: "f1jr4pq3",
118
+ B9e1dac: "f1tfer7m"
119
119
  }
120
120
  }, {
121
121
  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fre7gi1{border-top-width:0;}", ".fqdk4by{border-bottom-width:0;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", [".f1tdnksq{background:var(--colorBrandBackground);}", {
@@ -123,41 +123,41 @@ const useRootStyles = /*#__PURE__*/__styles({
123
123
  }], ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f4j9k2g{border-left-color:var(--colorNeutralStrokeOnBrand2);}", ".f1mg2euo{border-right-color:var(--colorNeutralStrokeOnBrand2);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".f4ybsrx{font-size:16px;}", ".f2lugmd{padding-left:3px;}", ".f6zblan{padding-right:3px;}", ".f1ugzwwg{font-size:12px;}", ".f10pi13n{position:relative;}"],
124
124
  h: [".f8491dx:hover{cursor:pointer;}", ".f1h648pw:hover{background-color:var(--colorNeutralBackground3Hover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1yj72w4:hover{background-color:var(--colorBrandBackground2Hover);}", ".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}"],
125
125
  a: [".fwdzr64:active{background-color:var(--colorNeutralBackground3Pressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".fy3sl2y:active{background-color:var(--colorBrandBackground2Pressed);}", ".fryz5bw:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}"],
126
- m: [["@media (forced-colors: active){.fah2lgh{border-top-width:var(--strokeWidthThin);}}", {
126
+ m: [["@media (forced-colors: active){.fmvl6o9{border-top-width:var(--strokeWidthThin);}}", {
127
127
  m: "(forced-colors: active)"
128
- }], ["@media (forced-colors: active){.fx7har{border-bottom-width:var(--strokeWidthThin);}}", {
128
+ }], ["@media (forced-colors: active){.fb8cdra{border-bottom-width:var(--strokeWidthThin);}}", {
129
129
  m: "(forced-colors: active)"
130
- }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
130
+ }], ["@media (forced-colors: active){.fkiggi6:hover{background-color:HighlightText;}}", {
131
131
  m: "(forced-colors: active)"
132
- }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
132
+ }], ["@media (forced-colors: active){.f8zknr1:active{background-color:HighlightText;}}", {
133
133
  m: "(forced-colors: active)"
134
- }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
134
+ }], ["@media (forced-colors: active){.f1h3a8gf{forced-color-adjust:none;}}", {
135
135
  m: "(forced-colors: active)"
136
- }], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
136
+ }], ["@media (forced-colors: active){.f1nz3ub2{background-color:Highlight;}}", {
137
137
  m: "(forced-colors: active)"
138
- }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
138
+ }], ["@media (forced-colors: active){.fqc85l4{color:HighlightText;}}", {
139
139
  m: "(forced-colors: active)"
140
- }], ["@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}", {
140
+ }], ["@media (forced-colors: active){.f1tx4pjd:hover{background-color:Highlight;}}", {
141
141
  m: "(forced-colors: active)"
142
- }], ["@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}", {
142
+ }], ["@media (forced-colors: active){.fu37p9p:hover{color:HighlightText;}}", {
143
143
  m: "(forced-colors: active)"
144
- }], ["@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}", {
144
+ }], ["@media (forced-colors: active){.f16z8z4r:active{background-color:Highlight;}}", {
145
145
  m: "(forced-colors: active)"
146
- }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
146
+ }], ["@media (forced-colors: active){.f7ydw7o:active{color:HighlightText;}}", {
147
147
  m: "(forced-colors: active)"
148
- }], ["@media (forced-colors: none){.fqiv1u6:before,.fqiv1u6:after{content:\"\";}}", {
148
+ }], ["@media (forced-colors: none){.fru8nlv:before,.fru8nlv:after{content:\"\";}}", {
149
149
  m: "(forced-colors: none)"
150
- }], ["@media (forced-colors: none){.fl6l3ok:before,.fl6l3ok:after{position:absolute;}}", {
150
+ }], ["@media (forced-colors: none){.f5nasji:before,.f5nasji:after{position:absolute;}}", {
151
151
  m: "(forced-colors: none)"
152
- }], ["@media (forced-colors: none){.fiuoxex:before,.fiuoxex:after{height:2px;}}", {
152
+ }], ["@media (forced-colors: none){.f45hpys:before,.f45hpys:after{height:2px;}}", {
153
153
  m: "(forced-colors: none)"
154
- }], ["@media (forced-colors: none){.f12z4n6f:before,.f12z4n6f:after{right:0;}.f1f187wz:before,.f1f187wz:after{left:0;}}", {
154
+ }], ["@media (forced-colors: none){.f1le4i14:before,.f1le4i14:after{right:0;}.f1sbfcjn:before,.f1sbfcjn:after{left:0;}}", {
155
155
  m: "(forced-colors: none)"
156
- }], ["@media (forced-colors: none){.fxnjm4l:before,.fxnjm4l:after{width:100%;}}", {
156
+ }], ["@media (forced-colors: none){.fq6y7a1:before,.fq6y7a1:after{width:100%;}}", {
157
157
  m: "(forced-colors: none)"
158
- }], ["@media (forced-colors: none){.fa2n458:before{bottom:100%;}}", {
158
+ }], ["@media (forced-colors: none){.f1jr4pq3:before{bottom:100%;}}", {
159
159
  m: "(forced-colors: none)"
160
- }], ["@media (forced-colors: none){.f1nrpwwh:after{top:100%;}}", {
160
+ }], ["@media (forced-colors: none){.f1tfer7m:after{top:100%;}}", {
161
161
  m: "(forced-colors: none)"
162
162
  }]]
163
163
  });
package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","B4j52fo","Bn0qgzm","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","gwxt9v","Bc736ss","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","ycbfsm","Bsw6fvg","Bbusuzp","ze5xyy","oy3o9n","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","qhf8xq","Bkdsyek","Brfojbq","B1yn5a7","Bihq2av","B2k102m","B1l11lz","Bgr9gxd","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2\n },\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n },\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px'\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px'\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { disabled, selected, shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","B4j52fo","Bn0qgzm","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","kr9cjb","u9orzk","Bbkh6qg","Cnge2b","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2\n },\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n },\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px'\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px'\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { disabled, selected, shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}