npm - @fluentui/react-tags - Versions diffs - 9.3.5 → 9.3.7 - Mend

@fluentui/react-tags 9.3.5 → 9.3.7

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 (18) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,18 +1,45 @@
 # Change Log - @fluentui/react-tags
-This log was last generated on Thu, 16 May 2024 09:21:26 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:58:01 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.7)
+Thu, 23 May 2024 07:58:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.6..@fluentui/react-tags_v9.3.7)
+### Patches
+- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-avatar to v9.6.28 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.6)
+Mon, 20 May 2024 12:45:06 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.5..@fluentui/react-tags_v9.3.6)
+### Patches
+- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-avatar to v9.6.27 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
+- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
 ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.5)
-Thu, 16 May 2024 09:21:26 GMT
+Thu, 16 May 2024 09:25:19 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.3.4..@fluentui/react-tags_v9.3.5)
 ### Patches
 -  chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
-- Bump @fluentui/react-avatar to v9.6.26 ([commit](https://github.com/microsoft/fluentui/commit/3ae9ed772fbcedeff1a76e154f6eb7d515785698) by beachball)
+- Bump @fluentui/react-avatar to v9.6.26 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
 ## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.3.4)

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const interactionTagClassNames = {
   root: 'fui-InteractionTag'
@@ -6,16 +6,18 @@ export const interactionTagClassNames = {
 const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1y684pp", null, [".r1y684pp{display:inline-flex;align-items:center;box-sizing:border-box;width:fit-content;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   rounded: {
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"]
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5"
   },
   circular: {
-    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
-    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
-    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
-    Btl43ni: ["f1s8kh49", "f1djnp8u"]
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9"
   },
   medium: {
     Bqenvij: "f1d2rq10"
@@ -27,7 +29,11 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bqenvij: "fjamq6b"
   }
 }, {
-  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".fjamq6b{height:20px;}"]
+  d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".fjamq6b{height:20px;}"]
 });
 /**
  * Apply styling to the InteractionTag slots based on the state

package/lib/components/InteractionTag/useInteractionTagStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","~~shorthands","~~tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Bbmb7ep","~~Beyfa6y~~","B7oj6ja","~~Btl43ni~~","circular","medium","Bqenvij","small","d","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, ~~shorthands~~ } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n rounded: ~~shorthands.~~borderRadius(tokens.borderRadiusMedium),\n circular: ~~shorthands.~~borderRadius(tokens.borderRadiusCircular),\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n height: '20px'\n }\n});\n/*\n Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const { shape, size } = state;\n state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,~~EAAEC,UAAU,~~QAAQ,gBAAgB;~~AACtF~~,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,~~gBAAGP~~,aAAA,iHAK5B,CAAC;AACF,~~MAAMQ~~,aAAa,~~gBAAGP~~,QAAA;~~EAAAQ~~,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;~~IAAAJ~~,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,~~CAYrB~~,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,~~GAAGd~~,oBAAoB,CAAC,CAAC;EAChD,~~MAAMe~~,UAAU,~~GAAGd~~,aAAa,CAAC,CAAC;EAClC,MAAM;~~IAAEe~~,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7BA,KAAK,~~CAACd~~,IAAI,~~CAACmB~~,SAAS,~~GAAGvB~~,YAAY,~~CAACG~~,wBAAwB,CAACC,IAAI,~~EAAEe~~,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,~~CAACd~~,IAAI,~~CAACmB~~,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","useRootStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","circular","medium","Bqenvij","small","d","p","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"sources":["useInteractionTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagClassNames = {\n root: 'fui-InteractionTag'\n};\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content'\n});\nconst useRootStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n height: '20px'\n }\n});\n/*\n Apply styling to the InteractionTag slots based on the state\n */ export const useInteractionTagStyles_unstable = (state)=>{\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const { shape, size } = state;\n state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,iHAK5B,CAAC;AACF,MAAMO,aAAa,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAgBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGhB,oBAAoB,CAAC,CAAC;EAChD,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7BA,KAAK,CAAChB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEiB,iBAAiB,EAAEC,UAAU,CAACC,KAAK,CAAC,EAAED,UAAU,CAACE,IAAI,CAAC,EAAEJ,KAAK,CAAChB,IAAI,CAACqB,SAAS,CAAC;EAChJ,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js CHANGED Viewed

@@ -33,11 +33,11 @@ const baseStyles = {
   })
 };
 const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r1tlgozh", "r80ltmz", {
-  r: [".r1tlgozh{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1tlgozh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r80ltmz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r80ltmz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
+  r: [".r1tlgozh{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1tlgozh[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r80ltmz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r80ltmz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
   s: ["@media (forced-colors: active){.r1tlgozh{position:relative;}.r1tlgozh::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}}", "@media (forced-colors: active){.r80ltmz{position:relative;}.r80ltmz::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}}"]
 });
 const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1cz4vob", "r1awuv7b", {
-  r: [".r1cz4vob{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1cz4vob[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1awuv7b{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1awuv7b[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
+  r: [".r1cz4vob{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1cz4vob[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}", ".r1awuv7b{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:inline-grid;height:100%;align-items:center;grid-template-areas:\"media primary  \" \"media secondary\";border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r1awuv7b[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);z-index:1;}"],
   s: ["@media (forced-colors: active){.r1cz4vob{position:relative;}.r1cz4vob::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusCircular);border-bottom-left-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r1awuv7b{position:relative;}.r1awuv7b::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusCircular);border-bottom-right-radius:var(--borderRadiusCircular);}}"]
 });
 /**
@@ -46,17 +46,18 @@ const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("r1cz4vob", "r1a
 const useRootCircularContrastStyles = /*#__PURE__*/__styles({
   withoutSecondaryAction: {
     Bglfifq: "ff3fe07",
-    G4pote: ["f1b2qn5y", "fw1c3ou"],
-    B33s42s: ["f9bjnkc", "f17ca6ku"],
+    hxi8he: 0,
+    B33s42s: 0,
+    G4pote: 0,
+    gw1m2h: ["f19rnj73", "f1jjg5yc"],
     w20ur: ["f6k8nl2", "f1ik0cvg"],
     Byczuf6: ["f10f1qdh", "fmb7qm7"]
   }
 }, {
   m: [["@media (forced-colors: active){.ff3fe07{position:relative;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1b2qn5y::before{border-right-width:var(--strokeWidthThin);}.fw1c3ou::before{border-left-width:var(--strokeWidthThin);}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f17ca6ku::before{border-left-style:solid;}.f9bjnkc::before{border-right-style:solid;}}", {
+  }], ["@media (forced-colors: active){.f19rnj73::before{border-right:var(--strokeWidthThin) solid transparent;}.f1jjg5yc::before{border-left:var(--strokeWidthThin) solid transparent;}}", {
+    p: -1,
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1ik0cvg::before{border-top-left-radius:var(--borderRadiusCircular);}.f6k8nl2::before{border-top-right-radius:var(--borderRadiusCircular);}}", {
     m: "(forced-colors: active)"

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.js.map CHANGED Viewed

	@@ -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","G4pote","B33s42s","w20ur","Byczuf6","m","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","medium","z189sj","small","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","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { 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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-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 ...shorthands.borderRight(tokens.strokeWidthThin, 'solid'),\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 medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px'\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 },\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 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 { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], 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":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,aAAa,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,6BAA6B,QAAQ,4BAA4B;AAC/H,OAAO,MAAMC,+BAA+B,GAAG;EAC3CC,IAAI,EAAE,2BAA2B;EACjCC,KAAK,EAAE,kCAAkC;EACzCC,IAAI,EAAE,iCAAiC;EACvCC,WAAW,EAAE,wCAAwC;EACrDC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,UAAU,GAAG;EACf;EACAC,KAAK,EAAE,SAAS;EAChBC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,KAAK;EACdC,WAAW,EAAE,MAAM;EACnBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,OAAO;EAClBC,eAAe,EAAE,aAAa;EAC9BC,OAAO,EAAE,aAAa;EACtBC,MAAM,EAAE,MAAM;EACdC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAG;AACxB;AACA;AACA,GAAG;EACCC,MAAM,EAAG,GAAEzB,MAAM,CAAC0B,eAAgB,UAAS1B,MAAM,CAAC2B,sBAAuB,EAAC;EAC1E,iBAAG5B,+BAA+B,CAAC;IAC/B6B,OAAO,EAAG,GAAE5B,MAAM,CAAC6B,gBAAiB,UAAS7B,MAAM,CAAC8B,iBAAkB,EAAC;IACvEC,MAAM,EAAE;EACZ,CAAC;AACL,CAAC;AACD,MAAMC,2BAA2B,gBAAGrC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAoBnC,CAAC;AACF,MAAMC,4BAA4B,gBAAGxC,aAAA;EAAAsC,CAAA;EAAAC,CAAA;AAAA,CAqBpC,CAAC;AACF;AACA;AACA;AAAI,MAAME,6BAA6B,gBAAGxC,QAAA;EAAAyC,sBAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAWzC,CAAC;AACF,MAAMC,aAAa,gBAAGhD,QAAA;EAAAiD,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA1B,OAAA;IAAAkB,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAU,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,OAAA;IAAAC,MAAA;EAAA;EAAAW,KAAA;IAAAnB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAY,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAA5B,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAwFrB,CAAC;AACF,MAAM6B,0BAA0B,gBAAG5E,QAAA;EAAAiD,MAAA;IAAA4B,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA9B,OAAA;IAAA6C,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,KAAA;IAAAQ,OAAA;IAAA3B,MAAA;IAAAC,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAmBlC,CAAC;AACF;AACA;AACA;AAAI,MAAMK,yBAAyB,gBAAG9E,QAAA;EAAAsE,MAAA;IAAAS,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAUrC,CAAC;AACF;AACA;AACA;AAAI,MAAMO,gCAAgC,gBAAGhF,QAAA;EAAAiF,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAhB,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAD,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAmB5C,CAAC;AACF,OAAO,MAAMc,uCAAuC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,wBAAwB,GAAGrD,2BAA2B,CAAC,CAAC;EAC9D,MAAMsD,yBAAyB,GAAGnD,4BAA4B,CAAC,CAAC;EAChE,MAAMoD,UAAU,GAAG3C,aAAa,CAAC,CAAC;EAClC,MAAM4C,uBAAuB,GAAGhB,0BAA0B,CAAC,CAAC;EAC5D,MAAMiB,sBAAsB,GAAGf,yBAAyB,CAAC,CAAC;EAC1D,MAAMgB,6BAA6B,GAAGd,gCAAgC,CAAC,CAAC;EACxE,MAAMe,UAAU,GAAGxF,aAAa,CAAC,CAAC;EAClC,MAAMyF,WAAW,GAAGxF,cAAc,CAAC,CAAC;EACpC,MAAMyF,iBAAiB,GAAGxF,oBAAoB,CAAC,CAAC;EAChD,MAAMyF,0BAA0B,GAAGxF,6BAA6B,CAAC,CAAC;EAClE,MAAMyF,0BAA0B,GAAG3D,6BAA6B,CAAC,CAAC;EAClE,MAAM;IAAE4D,KAAK;IAAEC,IAAI;IAAE/E;EAAW,CAAC,GAAGkE,KAAK;EACzCA,KAAK,CAAC5E,IAAI,CAAC0F,SAAS,GAAGrG,YAAY,CAACU,+BAA+B,CAACC,IAAI,EAAEwF,KAAK,KAAK,SAAS,GAAGX,wBAAwB,GAAGC,yBAAyB,EAAEU,KAAK,KAAK,UAAU,IAAI,CAACZ,KAAK,CAACe,kBAAkB,IAAIJ,0BAA0B,CAAC1D,sBAAsB,EAAE+C,KAAK,CAACgB,QAAQ,GAAGZ,uBAAuB,CAACtE,UAAU,CAAC,GAAGqE,UAAU,CAACrE,UAAU,CAAC,EAAEqE,UAAU,CAACU,IAAI,CAAC,EAAE,CAACb,KAAK,CAAC3E,KAAK,IAAI,CAAC2E,KAAK,CAAC1E,IAAI,IAAI+E,sBAAsB,CAACQ,IAAI,CAAC,EAAEb,KAAK,CAACe,kBAAkB,IAAIT,6BAA6B,CAACb,IAAI,EAAEO,KAAK,CAACe,kBAAkB,IAAIT,6BAA6B,CAACO,IAAI,CAAC,EAAEb,KAAK,CAAC5E,IAAI,CAAC0F,SAAS,CAAC;EACljB,IAAId,KAAK,CAAC3E,KAAK,EAAE;IACb2E,KAAK,CAAC3E,KAAK,CAACyF,SAAS,GAAGrG,YAAY,CAACU,+BAA+B,CAACE,KAAK,EAAEmF,WAAW,CAACf,IAAI,EAAEe,WAAW,CAACK,IAAI,CAAC,EAAEb,KAAK,CAAC3E,KAAK,CAACyF,SAAS,CAAC;EAC3I;EACA,IAAId,KAAK,CAAC1E,IAAI,EAAE;IACZ0E,KAAK,CAAC1E,IAAI,CAACwF,SAAS,GAAGrG,YAAY,CAACU,+BAA+B,CAACG,IAAI,EAAEiF,UAAU,CAACd,IAAI,EAAEc,UAAU,CAACM,IAAI,CAAC,EAAEb,KAAK,CAAC1E,IAAI,CAACwF,SAAS,CAAC;EACtI;EACA,IAAId,KAAK,CAACzE,WAAW,EAAE;IACnByE,KAAK,CAACzE,WAAW,CAACuF,SAAS,GAAGrG,YAAY,CAACU,+BAA+B,CAACI,WAAW,EAAEkF,iBAAiB,CAAChB,IAAI,EAAEgB,iBAAiB,CAACI,IAAI,CAAC,EAAEb,KAAK,CAACxE,aAAa,GAAGiF,iBAAiB,CAACQ,iBAAiB,GAAGR,iBAAiB,CAACS,oBAAoB,EAAElB,KAAK,CAACzE,WAAW,CAACuF,SAAS,CAAC;EAC7Q;EACA,IAAId,KAAK,CAACxE,aAAa,EAAE;IACrBwE,KAAK,CAACxE,aAAa,CAACsF,SAAS,GAAGrG,YAAY,CAACU,+BAA+B,CAACK,aAAa,EAAEkF,0BAA0B,EAAEV,KAAK,CAACxE,aAAa,CAACsF,SAAS,CAAC;EAC1J;EACA,OAAOd,KAAK;AAChB,CAAC","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","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","medium","z189sj","small","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","shape","size","className","hasSecondaryAction","disabled","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { 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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-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 medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px'\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 },\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 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 { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, state.disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], 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 Viewed

@@ -7,7 +7,7 @@ export const interactionTagSecondaryClassNames = {
 const mediumIconSize = '20px';
 const smallIconSize = '16px';
 const extraSmallIconSize = '12px';
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("rxqbxwz", "rdjx360", [".rxqbxwz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);}", ".rxqbxwz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".rdjx360{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);}", ".rdjx360[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rxqbxwz", "rdjx360", [".rxqbxwz{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-left-color:var(--colorNeutralStroke1);border-top-left-radius:var(--borderRadiusNone);border-bottom-left-radius:var(--borderRadiusNone);}", ".rxqbxwz[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".rdjx360{color:inherit;font-family:inherit;padding:0px;border-style:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;background-color:transparent;display:flex;height:100%;align-items:center;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-right-color:var(--colorNeutralStroke1);border-top-right-radius:var(--borderRadiusNone);border-bottom-right-radius:var(--borderRadiusNone);}", ".rdjx360[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
 const useRootStyles = /*#__PURE__*/__styles({
   filled: {
     De3pzq: "f16xq7d1",

package/lib/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","shape","size","appearance","className","disabled"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { 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 ':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 ':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 ':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 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 }\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 const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGX,aAAA,~~soCAoB5B~~,CAAC;AACF,MAAMY,aAAa,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,KAAA;IAAAd,MAAA;IAAAC,MAAA;IAAAY,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGzC,QAAA;EAAAY,MAAA;IAAA8B,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAoB,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAe,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAqB7B,CAAC;AACF,OAAO,MAAMM,yCAAyC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,iBAAiB,GAAGnC,oBAAoB,CAAC,CAAC;EAChD,MAAMoC,UAAU,GAAGnC,aAAa,CAAC,CAAC;EAClC,MAAMoC,kBAAkB,GAAGN,qBAAqB,CAAC,CAAC;EAClD,MAAM;IAAEO,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGN,KAAK;EACzCA,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACI,iCAAiC,CAACC,IAAI,EAAEuC,iBAAiB,EAAED,KAAK,CAACQ,QAAQ,GAAGL,kBAAkB,CAACG,UAAU,CAAC,GAAGJ,UAAU,CAACI,UAAU,CAAC,EAAEJ,UAAU,CAACE,KAAK,CAAC,EAAEF,UAAU,CAACG,IAAI,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACnO,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","shape","size","appearance","className","disabled"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { 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 ':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 ':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 ':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 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 }\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 const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,oBAAoB,gBAAGX,aAAA,0lCAoB5B,CAAC;AACF,MAAMY,aAAa,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAM,KAAA;IAAAd,MAAA;IAAAC,MAAA;IAAAY,MAAA;IAAAX,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAF,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyFrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGzC,QAAA;EAAAY,MAAA;IAAA8B,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAoB,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAe,OAAA;IAAA7B,MAAA;IAAAC,MAAA;IAAAS,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAW,CAAA;AAAA,CAqB7B,CAAC;AACF,OAAO,MAAMM,yCAAyC,GAAIC,KAAK,IAAG;EAC9D,MAAMC,iBAAiB,GAAGnC,oBAAoB,CAAC,CAAC;EAChD,MAAMoC,UAAU,GAAGnC,aAAa,CAAC,CAAC;EAClC,MAAMoC,kBAAkB,GAAGN,qBAAqB,CAAC,CAAC;EAClD,MAAM;IAAEO,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGN,KAAK;EACzCA,KAAK,CAACtC,IAAI,CAAC6C,SAAS,GAAGlD,YAAY,CAACI,iCAAiC,CAACC,IAAI,EAAEuC,iBAAiB,EAAED,KAAK,CAACQ,QAAQ,GAAGL,kBAAkB,CAACG,UAAU,CAAC,GAAGJ,UAAU,CAACI,UAAU,CAAC,EAAEJ,UAAU,CAACE,KAAK,CAAC,EAAEF,UAAU,CAACG,IAAI,CAAC,EAAEL,KAAK,CAACtC,IAAI,CAAC6C,SAAS,CAAC;EACnO,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Tag/useTagStyles.styles.js CHANGED Viewed

@@ -35,11 +35,11 @@ const baseStyles = {
   border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
 };
 const useRootRoundedBaseClassName = /*#__PURE__*/__resetStyles("r1wstn2o", "r7a32g8", {
-  r: [".r1wstn2o{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1wstn2o[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r7a32g8{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r7a32g8[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
+  r: [".r1wstn2o{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r1wstn2o[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r7a32g8{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);}", ".r7a32g8[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
   s: ["@media (forced-colors: active){.r1wstn2o{position:relative;}.r1wstn2o::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);}}", "@media (forced-colors: active){.r7a32g8{position:relative;}.r7a32g8::before{content:\"\";border-top:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);}}"]
 });
 const useRootCircularBaseClassName = /*#__PURE__*/__resetStyles("rlv0lsa", "r18mdwmi", {
-  r: [".rlv0lsa{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".rlv0lsa[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r18mdwmi{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;-ms-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r18mdwmi[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
+  r: [".rlv0lsa{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".rlv0lsa[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", ".r18mdwmi{font-family:inherit;padding:0px;-webkit-appearance:button;-moz-appearance:button;appearance:button;text-align:unset;display:inline-grid;align-items:center;grid-template-areas:\"media primary   dismissIcon\" \"media secondary dismissIcon\";box-sizing:border-box;width:fit-content;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);border-radius:var(--borderRadiusCircular);}", ".r18mdwmi[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"],
   s: ["@media (forced-colors: active){.rlv0lsa{position:relative;}.rlv0lsa::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}", "@media (forced-colors: active){.r18mdwmi{position:relative;}.r18mdwmi::before{content:\"\";border-top:var(--strokeWidthThin) solid;border-right:var(--strokeWidthThin) solid;border-left:var(--strokeWidthThin) solid;position:absolute;top:-1px;right:-1px;left:-1px;bottom:-1px;border-radius:var(--borderRadiusCircular);}}"]
 });
 const useRootStyles = /*#__PURE__*/__styles({
@@ -136,10 +136,11 @@ const useRootWithoutDismissStyles = /*#__PURE__*/__styles({
 });
 export const useIconStyles = /*#__PURE__*/__styles({
   base: {
-    Ijaq50: "f11uok23",
-    Br312pm: "f1qdfnnj",
-    nk6f5a: "f1s27gz",
-    Bw0ie65: "f86d0yl",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fujjg13",
     mc9l5x: "f22iagw"
   },
   medium: {
@@ -161,14 +162,17 @@ export const useIconStyles = /*#__PURE__*/__styles({
     Be2twd7: "f1ugzwwg"
   }
 }, {
-  d: [".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f1rtp3s9{padding-left:7px;}", ".f18k1jr3{padding-right:7px;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f64fuq3{width:20px;}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".f4ybsrx{font-size:16px;}", ".frx94fk{width:12px;}", ".f1ugzwwg{font-size:12px;}"]
+  d: [[".fujjg13{grid-area:media;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f1rtp3s9{padding-left:7px;}", ".f18k1jr3{padding-right:7px;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f64fuq3{width:20px;}", ".fe5j1ua{font-size:20px;}", ".f15vdbe4{padding-left:5px;}", ".fwiuce9{padding-right:5px;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".fjw5fx7{width:16px;}", ".f4ybsrx{font-size:16px;}", ".frx94fk{width:12px;}", ".f1ugzwwg{font-size:12px;}"]
 });
 export const useMediaStyles = /*#__PURE__*/__styles({
   base: {
-    Ijaq50: "f11uok23",
-    Br312pm: "f1qdfnnj",
-    nk6f5a: "f1s27gz",
-    Bw0ie65: "f86d0yl",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fujjg13",
     mc9l5x: "f22iagw",
     uwmqm3: ["f10xn8zz", "f136y8j8"]
   },
@@ -182,14 +186,17 @@ export const useMediaStyles = /*#__PURE__*/__styles({
     z189sj: ["fdw0yi8", "fk8j09s"]
   }
 }, {
-  d: [".f11uok23{grid-row-start:media;}", ".f1qdfnnj{grid-column-start:media;}", ".f1s27gz{grid-row-end:media;}", ".f86d0yl{grid-column-end:media;}", ".f22iagw{display:flex;}", ".f10xn8zz{padding-left:1px;}", ".f136y8j8{padding-right:1px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"]
+  d: [[".fujjg13{grid-area:media;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f10xn8zz{padding-left:1px;}", ".f136y8j8{padding-right:1px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}"]
 });
 const useDismissIconStyles = /*#__PURE__*/__styles({
   base: {
-    Ijaq50: "fneo8i2",
-    Br312pm: "frbqjvc",
-    nk6f5a: "f1a6k60w",
-    Bw0ie65: "f1ay3jj",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f1k1gsvr",
     mc9l5x: "f22iagw",
     ze5xyy: "f4xjyn1",
     oy3o9n: "f1xtr1b3"
@@ -225,7 +232,9 @@ const useDismissIconStyles = /*#__PURE__*/__styles({
     lj723h: "fryz5bw"
   }
 }, {
-  d: [".fneo8i2{grid-row-start:dismissIcon;}", ".frbqjvc{grid-column-start:dismissIcon;}", ".f1a6k60w{grid-row-end:dismissIcon;}", ".f1ay3jj{grid-column-end:dismissIcon;}", ".f22iagw{display:flex;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fe5j1ua{font-size:20px;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f4ybsrx{font-size:16px;}", ".f1ugzwwg{font-size:12px;}"],
+  d: [[".f1k1gsvr{grid-area:dismissIcon;}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fe5j1ua{font-size:20px;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".f4ybsrx{font-size:16px;}", ".f1ugzwwg{font-size:12px;}"],
   m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1xtr1b3:active{color:Highlight;}}", {
@@ -265,10 +274,11 @@ export const usePrimaryTextStyles = /*#__PURE__*/__styles({
     Byoj8tv: "f1g03r3y"
   },
   withSecondaryText: {
-    Ijaq50: "f1q3ipgb",
-    Br312pm: "faqcfhe",
-    nk6f5a: "fs32cm1",
-    Bw0ie65: "f1bo7viq",
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "f1ebragv",
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
@@ -276,7 +286,9 @@ export const usePrimaryTextStyles = /*#__PURE__*/__styles({
     B6of3ja: "f1ryq6si"
   }
 }, {
-  d: [".fz5stix{white-space:nowrap;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".faqcfhe{grid-column-start:primary;}", ".f1q3ipgb{grid-row-start:primary;}", ".fc0ab3q{grid-row-end:secondary;}", ".f1g03r3y{padding-bottom:var(--spacingHorizontalXXS);}", ".fs32cm1{grid-row-end:primary;}", ".f1bo7viq{grid-column-end:primary;}", ".f1ryq6si{margin-top:-2px;}"]
+  d: [".fz5stix{white-space:nowrap;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".faqcfhe{grid-column-start:primary;}", ".f1q3ipgb{grid-row-start:primary;}", ".fc0ab3q{grid-row-end:secondary;}", ".f1g03r3y{padding-bottom:var(--spacingHorizontalXXS);}", [".f1ebragv{grid-area:primary;}", {
+    p: -1
+  }], ".f1ryq6si{margin-top:-2px;}"]
 });
 export const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r7hv1ps", "rnrslm9", [".r7hv1ps{grid-area:secondary;padding-left:var(--spacingHorizontalXXS);padding-right:var(--spacingHorizontalXXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);white-space:nowrap;}", ".rnrslm9{grid-area:secondary;padding-right:var(--spacingHorizontalXXS);padding-left:var(--spacingHorizontalXXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase100);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase100);white-space:nowrap;}"]);
 /**

package/lib/components/Tag/useTagStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","medium","Bqenvij","small","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Ijaq50","Br312pm","nk6f5a","Bw0ie65","mc9l5x","a9b677","Be2twd7","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","shape","size","className","disabled"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\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 borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n height: '20px'\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 },\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 root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n ...shorthands.gridArea('media'),\n display: 'flex'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n ...shorthands.gridArea('media'),\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n ...shorthands.gridArea('dismissIcon'),\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n ...shorthands.gridArea('primary'),\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","medium","Bqenvij","small","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","mc9l5x","a9b677","Be2twd7","p","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","shape","size","className","disabled"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\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 top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\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 borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n height: '20px'\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 },\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 root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n gridArea: 'dismissIcon',\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n gridArea: 'primary',\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { shape, size, appearance } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, state.disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !state.disabled && dismissIconStyles[appearance], state.dismissIcon.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,aAAa,GAAG;EACzBC,IAAI,EAAE,SAAS;EACfC,KAAK,EAAE,gBAAgB;EACvBC,IAAI,EAAE,eAAe;EACrBC,WAAW,EAAE,sBAAsB;EACnCC,aAAa,EAAE,wBAAwB;EACvCC,WAAW,EAAE;AACjB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,GAAG,KAAK;AAClC,MAAMC,eAAe,GAAG,KAAK;AAC7B,MAAMC,oBAAoB,GAAG,KAAK;AAClC,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,aAAa,GAAG,MAAM;AAC5B,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,UAAU,GAAG;EACf;EACAC,UAAU,EAAE,SAAS;EACrBC,OAAO,EAAE,KAAK;EACdC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE,OAAO;EAClBC,OAAO,EAAE,aAAa;EACtBC,UAAU,EAAE,QAAQ;EACpBC,iBAAiB,EAAG;AACxB;AACA;AACA,GAAG;EACCC,SAAS,EAAE,YAAY;EACvBC,KAAK,EAAE,aAAa;EACpBC,MAAM,EAAG,GAAE1B,MAAM,CAAC2B,eAAgB,UAAS3B,MAAM,CAAC4B,sBAAuB;AAC7E,CAAC;AACD,MAAMC,2BAA2B,gBAAGjC,aAAA;EAAAkC,CAAA;EAAAC,CAAA;AAAA,CAwBnC,CAAC;AACF,MAAMC,4BAA4B,gBAAGpC,aAAA;EAAAkC,CAAA;EAAAC,CAAA;AAAA,CAyBpC,CAAC;AACF,MAAME,aAAa,gBAAGpC,QAAA;EAAAqC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAP,MAAA;IAAAC,MAAA;EAAA;EAAAO,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAuBrB,CAAC;AACF,MAAMC,qBAAqB,gBAAGlD,QAAA;EAAAqC,MAAA;IAAAc,OAAA;IAAAb,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAJ,OAAA;IAAAW,OAAA;IAAAb,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAM,OAAA;IAAAb,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAK,CAAA;AAAA,CAmB7B,CAAC;AACF;AACA;AACA;AAAI,MAAMG,yBAAyB,gBAAGpD,QAAA;EAAA8C,MAAA;IAAAO,MAAA;EAAA;EAAAL,KAAA;IAAAK,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,CAUrC,CAAC;AACF;AACA;AACA;AAAI,MAAMK,2BAA2B,gBAAGtD,QAAA;EAAA8C,MAAA;IAAAS,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAUvC,CAAC;AACF,OAAO,MAAMO,aAAa,gBAAGxD,QAAA;EAAAyD,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjB,MAAA;IAAAO,MAAA;IAAAE,MAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;EAAAjB,KAAA;IAAAK,MAAA;IAAAE,MAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAZ,MAAA;IAAAE,MAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAhB,CAAA;IAAAiB,CAAA;EAAA;AAAA,CAuB5B,CAAC;AACF,OAAO,MAAMC,cAAc,gBAAGnE,QAAA;EAAAyD,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAV,MAAA;EAAA;EAAAP,MAAA;IAAAS,MAAA;EAAA;EAAAP,KAAA;IAAAO,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAN,CAAA;IAAAiB,CAAA;EAAA;AAAA,CAe7B,CAAC;AACF,MAAME,oBAAoB,gBAAGpE,QAAA;EAAAyD,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAM,MAAA;IAAAC,MAAA;EAAA;EAAAxB,MAAA;IAAAO,MAAA;IAAAE,MAAA;IAAAU,OAAA;EAAA;EAAAjB,KAAA;IAAAK,MAAA;IAAAE,MAAA;IAAAU,OAAA;EAAA;EAAA;IAAAZ,MAAA;IAAAE,MAAA;IAAAU,OAAA;EAAA;EAAA5B,MAAA;IAAAkC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjC,OAAA;IAAA+B,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA5B,KAAA;IAAA0B,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAxB,CAAA;IAAAiB,CAAA;EAAA;EAAAQ,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAwD5B,CAAC;AACF,OAAO,MAAMC,oBAAoB,gBAAG7E,QAAA;EAAAyD,IAAA;IAAAqB,MAAA;IAAAzB,MAAA;IAAAE,MAAA;EAAA;EAAAT,MAAA;IAAAiC,OAAA;IAAAd,OAAA;IAAAe,OAAA;IAAAC,OAAA;EAAA;EAAAjC,KAAA;IAAA+B,OAAA;IAAAd,OAAA;IAAAe,OAAA;IAAAC,OAAA;EAAA;EAAA;IAAAF,OAAA;IAAAd,OAAA;IAAAe,OAAA;IAAAC,OAAA;EAAA;EAAAC,oBAAA;IAAAvB,OAAA;IAAAE,MAAA;IAAAD,MAAA;IAAAuB,OAAA;EAAA;EAAAC,iBAAA;IAAA1B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAiB,OAAA;IAAAd,OAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAI,OAAA;EAAA;AAAA;EAAApC,CAAA;IAAAiB,CAAA;EAAA;AAAA,CA0BnC,CAAC;AACF,OAAO,MAAMoB,6BAA6B,gBAAGvF,aAAA,ikBAM5C,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMwF,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,MAAMC,wBAAwB,GAAGzD,2BAA2B,CAAC,CAAC;EAC9D,MAAM0D,yBAAyB,GAAGvD,4BAA4B,CAAC,CAAC;EAChE,MAAMwD,UAAU,GAAGvD,aAAa,CAAC,CAAC;EAClC,MAAMwD,kBAAkB,GAAG1C,qBAAqB,CAAC,CAAC;EAClD,MAAM2C,sBAAsB,GAAGzC,yBAAyB,CAAC,CAAC;EAC1D,MAAM0C,wBAAwB,GAAGxC,2BAA2B,CAAC,CAAC;EAC9D,MAAMyC,UAAU,GAAGvC,aAAa,CAAC,CAAC;EAClC,MAAMwC,WAAW,GAAG7B,cAAc,CAAC,CAAC;EACpC,MAAM8B,iBAAiB,GAAG7B,oBAAoB,CAAC,CAAC;EAChD,MAAM8B,iBAAiB,GAAGrB,oBAAoB,CAAC,CAAC;EAChD,MAAMsB,0BAA0B,GAAGb,6BAA6B,CAAC,CAAC;EAClE,MAAM;IAAEc,KAAK;IAAEC,IAAI;IAAE/E;EAAW,CAAC,GAAGkE,KAAK;EACzCA,KAAK,CAACjF,IAAI,CAAC+F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACC,IAAI,EAAE6F,KAAK,KAAK,SAAS,GAAGX,wBAAwB,GAAGC,yBAAyB,EAAEF,KAAK,CAACe,QAAQ,GAAGX,kBAAkB,CAACtE,UAAU,CAAC,GAAGqE,UAAU,CAACrE,UAAU,CAAC,EAAEqE,UAAU,CAACU,IAAI,CAAC,EAAE,CAACb,KAAK,CAAChF,KAAK,IAAI,CAACgF,KAAK,CAAC/E,IAAI,IAAIoF,sBAAsB,CAACQ,IAAI,CAAC,EAAE,CAACb,KAAK,CAAC5E,WAAW,IAAIkF,wBAAwB,CAACO,IAAI,CAAC,EAAEb,KAAK,CAACjF,IAAI,CAAC+F,SAAS,CAAC;EACxW,IAAId,KAAK,CAAChF,KAAK,EAAE;IACbgF,KAAK,CAAChF,KAAK,CAAC8F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACE,KAAK,EAAEwF,WAAW,CAACvC,IAAI,EAAEuC,WAAW,CAACK,IAAI,CAAC,EAAEb,KAAK,CAAChF,KAAK,CAAC8F,SAAS,CAAC;EACzH;EACA,IAAId,KAAK,CAAC/E,IAAI,EAAE;IACZ+E,KAAK,CAAC/E,IAAI,CAAC6F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACG,IAAI,EAAEsF,UAAU,CAACtC,IAAI,EAAEsC,UAAU,CAACM,IAAI,CAAC,EAAEb,KAAK,CAAC/E,IAAI,CAAC6F,SAAS,CAAC;EACpH;EACA,IAAId,KAAK,CAAC9E,WAAW,EAAE;IACnB8E,KAAK,CAAC9E,WAAW,CAAC4F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACI,WAAW,EAAEwF,iBAAiB,CAACzC,IAAI,EAAEyC,iBAAiB,CAACG,IAAI,CAAC,EAAEb,KAAK,CAAC7E,aAAa,GAAGuF,iBAAiB,CAACd,iBAAiB,GAAGc,iBAAiB,CAAChB,oBAAoB,EAAEM,KAAK,CAAC9E,WAAW,CAAC4F,SAAS,CAAC;EAC3P;EACA,IAAId,KAAK,CAAC7E,aAAa,EAAE;IACrB6E,KAAK,CAAC7E,aAAa,CAAC2F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACK,aAAa,EAAEwF,0BAA0B,EAAEX,KAAK,CAAC7E,aAAa,CAAC2F,SAAS,CAAC;EACxI;EACA,IAAId,KAAK,CAAC5E,WAAW,EAAE;IACnB4E,KAAK,CAAC5E,WAAW,CAAC0F,SAAS,GAAGrG,YAAY,CAACK,aAAa,CAACM,WAAW,EAAEqF,iBAAiB,CAACxC,IAAI,EAAEwC,iBAAiB,CAACI,IAAI,CAAC,EAAE,CAACb,KAAK,CAACe,QAAQ,IAAIN,iBAAiB,CAAC3E,UAAU,CAAC,EAAEkE,KAAK,CAAC5E,WAAW,CAAC0F,SAAS,CAAC;EACzM;EACA,OAAOd,KAAK;AAChB,CAAC","ignoreList":[]}