npm - @fluentui/react-tags - Versions diffs - 9.8.1 → 9.9.1 - Mend

@fluentui/react-tags 9.8.1 → 9.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,44 @@
 # Change Log - @fluentui/react-tags
-This log was last generated on Thu, 23 Apr 2026 11:59:34 GMT and should not be manually modified.
+This log was last generated on Wed, 27 May 2026 11:18:29 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.9.1)
+Wed, 27 May 2026 11:18:29 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.9.0..@fluentui/react-tags_v9.9.1)
+### Patches
+- fix: decouple useTagGroupBase_unstable from Tabster; export contexts. This is technically a breaking change, but the prior Tabster coupling was a programmatic mistake and not intended public behavior. If you run into issues, please bump to the next version. ([PR #36228](https://github.com/microsoft/fluentui/pull/36228) by vgenaev@gmail.com)
+## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.9.0)
+Tue, 26 May 2026 09:39:09 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.8.1..@fluentui/react-tags_v9.9.0)
+### Minor changes
+- feat: export contexts for headless ([PR #36229](https://github.com/microsoft/fluentui/pull/36229) by vgenaev@gmail.com)
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-avatar to v9.11.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.1)
-Thu, 23 Apr 2026 11:59:34 GMT
+Thu, 23 Apr 2026 14:21:08 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.8.0..@fluentui/react-tags_v9.8.1)
 ### Patches
-- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-avatar to v9.11.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-avatar to v9.11.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.8.0)

package/dist/index.d.ts CHANGED Viewed

@@ -29,10 +29,12 @@ export declare type InteractionTagBaseState<Value = TagValue> = Omit<Interaction
 export declare const interactionTagClassNames: SlotClassNames<InteractionTagSlots>;
+export declare const InteractionTagContextProvider: React_2.Provider<InteractionTagContextValue<string> | undefined>;
 /**
  * Context shared between InteractionTag and its children components
  */
-declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {
+export declare type InteractionTagContextValue<Value = string> = Required<Pick<InteractionTagState, 'appearance' | 'disabled' | 'selected' | 'selectedValues' | 'shape' | 'size'> & {
     handleTagDismiss: TagDismissHandler<Value>;
     interactionTagPrimaryId: string;
     value?: Value;
@@ -252,7 +254,7 @@ export declare type TagBaseState = DistributiveOmit<TagState, 'appearance' | 'si
 export declare const tagClassNames: SlotClassNames<TagSlots>;
-declare type TagContextValues = TagAvatarContextValues;
+export declare type TagContextValues = TagAvatarContextValues;
 export declare type TagDismissData<Value = TagValue> = {
     value: Value;
@@ -280,10 +282,12 @@ export declare type TagGroupBaseState<Value = TagValue> = Omit<TagGroupState<Val
 export declare const tagGroupClassNames: SlotClassNames<TagGroupSlots>;
+export declare const TagGroupContextProvider: React_2.Provider<TagGroupContextValue | undefined>;
 /**
  * Context shared between TagGroup and its children components
  */
-declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>>;
+export declare type TagGroupContextValue = Required<Pick<TagGroupState, 'handleTagDismiss' | 'size'>> & Partial<Pick<TagGroupState, 'disabled' | 'appearance' | 'dismissible' | 'handleTagSelect' | 'role' | 'selectedValues'>>;
 export declare type TagGroupContextValues = {
     tagGroup: TagGroupContextValue;
@@ -441,6 +445,8 @@ export declare const useInteractionTag_unstable: (props: InteractionTagProps, re
  */
 export declare const useInteractionTagBase_unstable: (props: InteractionTagBaseProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagBaseState;
+export declare const useInteractionTagContext_unstable: () => InteractionTagContextValue;
 export declare function useInteractionTagContextValues_unstable(state: InteractionTagState): InteractionTagContextValues;
 /**
@@ -535,6 +541,8 @@ export declare const useTagGroup_unstable: (props: TagGroupProps, ref: React_2.R
  */
 export declare const useTagGroupBase_unstable: (props: TagGroupBaseProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupBaseState;
+export declare const useTagGroupContext_unstable: () => TagGroupContextValue;
 export declare function useTagGroupContextValues_unstable(state: TagGroupState): TagGroupContextValues;
 /**

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

@@ -49,6 +49,7 @@ export const useInteractionTagStyles_unstable = state => {
     shape,
     size
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
   return state;
 };

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

	@@ -1 +1 @@
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":["'use client';\nimport { 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 'use no memo';\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,YAAY;;AACZ,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,aAAa;;EACb,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":[]}
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":["'use client';\nimport { 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 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const { shape, size } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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,aAAa;;EACb,MAAMC,iBAAiB,GAAGhB,oBAAoB,CAAC,CAAC;EAChD,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEiB,KAAK;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAC7B;EACAA,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/InteractionTag/useInteractionTagStyles.styles.raw.js CHANGED Viewed

@@ -34,6 +34,7 @@ const useRootStyles = makeStyles({
     const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
     const { shape, size } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
     return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InteractionTag/useInteractionTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {\n root: 'fui-InteractionTag',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content',\n});\n\nconst useRootStyles = makeStyles({\n rounded: { borderRadius: tokens.borderRadiusMedium },\n circular: { 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/*\n Apply styling to the InteractionTag slots based on the state\n */\nexport const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n const { shape, size } = state;\n\n state.root.className = mergeClasses(\n interactionTagClassNames.root,\n rootBaseClassName,\n rootStyles[shape],\n rootStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","display","alignItems","boxSizing","width","useRootStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","medium","height","small","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,OAAO;AACT;AAEA,MAAMC,gBAAgBV,WAAW;IAC/BW,SAAS;QAAEC,cAAcV,OAAOW,kBAAkB;IAAC;IACnDC,UAAU;QAAEF,cAAcV,OAAOa,oBAAoB;IAAC;IAEtDC,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBhB;IAC1B,MAAMiB,aAAaZ;IAEnB,MAAM,EAAEa,KAAK,EAAEC,IAAI,EAAE,GAAGJ;~~IAExBA~~,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,yBAAyBC,IAAI,EAC7BiB,mBACAC,UAAU,CAACC,MAAM,EACjBD,UAAU,CAACE,KAAK,EAChBJ,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/InteractionTag/useInteractionTagStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { InteractionTagSlots, InteractionTagState } from './InteractionTag.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagClassNames: SlotClassNames<InteractionTagSlots> = {\n root: 'fui-InteractionTag',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n width: 'fit-content',\n});\n\nconst useRootStyles = makeStyles({\n rounded: { borderRadius: tokens.borderRadiusMedium },\n circular: { 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/*\n Apply styling to the InteractionTag slots based on the state\n */\nexport const useInteractionTagStyles_unstable = (state: InteractionTagState): InteractionTagState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n\n const { shape, size } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n interactionTagClassNames.root,\n rootBaseClassName,\n rootStyles[shape],\n rootStyles[size],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","interactionTagClassNames","root","useRootBaseClassName","display","alignItems","boxSizing","width","useRootStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","medium","height","small","useInteractionTagStyles_unstable","state","rootBaseClassName","rootStyles","shape","size","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,uBAAuBN,gBAAgB;IAC3CO,SAAS;IACTC,YAAY;IACZC,WAAW;IACXC,OAAO;AACT;AAEA,MAAMC,gBAAgBV,WAAW;IAC/BW,SAAS;QAAEC,cAAcV,OAAOW,kBAAkB;IAAC;IACnDC,UAAU;QAAEF,cAAcV,OAAOa,oBAAoB;IAAC;IAEtDC,QAAQ;QACNC,QAAQ;IACV;IACAC,OAAO;QACLD,QAAQ;IACV;IACA,eAAe;QACbA,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,oBAAoBhB;IAC1B,MAAMiB,aAAaZ;IAEnB,MAAM,EAAEa,KAAK,EAAEC,IAAI,EAAE,GAAGJ;IAExB,oDAAoD;IACpDA,MAAMhB,IAAI,CAACqB,SAAS,GAAGxB,aACrBE,yBAAyBC,IAAI,EAC7BiB,mBACAC,UAAU,CAACC,MAAM,EACjBD,UAAU,CAACE,KAAK,EAChBJ,MAAMhB,IAAI,CAACqB,SAAS;IAGtB,OAAOL;AACT,EAAE"}

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

@@ -294,17 +294,22 @@ export const useInteractionTagPrimaryStyles_unstable = state => {
     appearance,
     selected
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
   if (state.media) {
+    // eslint-disable-next-line react-hooks/immutability
     state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
   }
   if (state.primaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
   }
   if (state.secondaryText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
   }
   return state;

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","Bvgf1ty","Cqojjj","dd5wkx","Bdzpf8n","ibz501","Bs8828g","Bn0yx1x","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bbkh6qg","Cnge2b","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","medium","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /*\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n / const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for InteractionTagPrimary without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/\n Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0'\n }\n }\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","withoutSecondaryAction","Bvgf1ty","Cqojjj","dd5wkx","Bdzpf8n","ibz501","Bs8828g","Bn0yx1x","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bbkh6qg","Cnge2b","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","medium","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /*\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n / const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for InteractionTagPrimary without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/\n Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0'\n }\n }\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledAppearances = useRootDisabledAppearances();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n const { disabled, shape, size, appearance, selected } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js CHANGED Viewed

@@ -297,17 +297,22 @@ export const useInteractionTagPrimaryStyles_unstable = (state)=>{
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const rootCircularContrastStyles = useRootCircularContrastStyles();
     const { disabled, shape, size, appearance, selected } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
     if (state.media) {
+        // eslint-disable-next-line react-hooks/immutability
         state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
     }
     if (state.primaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
     }
     if (state.secondaryText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
     }
     return state;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelResetStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n useIconStyles,\n useMediaStyles,\n usePrimaryTextStyles,\n useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\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};\n\nconst baseStyles: GriffelResetStyle = {\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\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\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 /\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium,\n },\n },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\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 /\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular,\n },\n },\n});\n\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n /\nconst 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});\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\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\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n },\n medium: {\n paddingRight: '7px',\n },\n small: {\n paddingRight: '5px',\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%',\n },\n '&:before': {\n bottom: '100%',\n },\n '&:after': {\n top: '100%',\n },\n },\n },\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n});\n\n/\n Styles for InteractionTagPrimary without leading media/icon\n /\nconst 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 */\nconst useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0',\n },\n },\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n 'use no memo';\n\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\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n const { disabled, shape, size, appearance, selected } = state;\n\n state.root.className = mergeClasses(\n interactionTagPrimaryClassNames.root,\n\n shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n selected && !disabled && rootStyles.selected,\n rootStyles[size],\n\n !state.media && !state.icon && rootWithoutMediaStyles[size],\n state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n state.root.className,\n );\n\n if (state.media) {\n state.media.className = mergeClasses(\n interactionTagPrimaryClassNames.media,\n mediaStyles.base,\n mediaStyles[size],\n state.media.className,\n );\n }\n if (state.icon) {\n state.icon.className = mergeClasses(\n interactionTagPrimaryClassNames.icon,\n iconStyles.base,\n iconStyles[size],\n state.icon.className,\n );\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.primaryText,\n\n primaryTextStyles.base,\n primaryTextStyles[size],\n\n state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n state.primaryText.className,\n );\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.secondaryText,\n secondaryTextBaseClassName,\n state.secondaryText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","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","borderRadius","borderRadiusMedium","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","left","width","bottom","top","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { GriffelResetStyle } from '@griffel/react';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n useIconStyles,\n useMediaStyles,\n usePrimaryTextStyles,\n useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\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};\n\nconst baseStyles: GriffelResetStyle = {\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\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1,\n }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\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 /\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium,\n },\n },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\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 /\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n inset: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular,\n },\n },\n});\n\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n /\nconst 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});\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\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\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n },\n medium: {\n paddingRight: '7px',\n },\n small: {\n paddingRight: '5px',\n },\n 'extra-small': {\n paddingRight: '5px',\n position: 'relative',\n\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%',\n },\n '&:before': {\n bottom: '100%',\n },\n '&:after': {\n top: '100%',\n },\n },\n },\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n});\n\n/\n Styles for InteractionTagPrimary without leading media/icon\n /\nconst 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 */\nconst useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n }),\n '@media (forced-colors: active)': {\n '::before': {\n borderTopRightRadius: '0',\n },\n },\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS,\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge,\n },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n 'use no memo';\n\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\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n const { disabled, shape, size, appearance, selected } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n interactionTagPrimaryClassNames.root,\n\n shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n selected && !disabled && rootStyles.selected,\n rootStyles[size],\n\n !state.media && !state.icon && rootWithoutMediaStyles[size],\n state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n state.root.className,\n );\n\n if (state.media) {\n // eslint-disable-next-line react-hooks/immutability\n state.media.className = mergeClasses(\n interactionTagPrimaryClassNames.media,\n mediaStyles.base,\n mediaStyles[size],\n state.media.className,\n );\n }\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(\n interactionTagPrimaryClassNames.icon,\n iconStyles.base,\n iconStyles[size],\n state.icon.className,\n );\n }\n if (state.primaryText) {\n // eslint-disable-next-line react-hooks/immutability\n state.primaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.primaryText,\n\n primaryTextStyles.base,\n primaryTextStyles[size],\n\n state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n state.primaryText.className,\n );\n }\n if (state.secondaryText) {\n // eslint-disable-next-line react-hooks/immutability\n state.secondaryText.className = mergeClasses(\n interactionTagPrimaryClassNames.secondaryText,\n secondaryTextBaseClassName,\n state.secondaryText.className,\n );\n }\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","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","borderRadius","borderRadiusMedium","position","content","borderTop","inset","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","left","width","bottom","top","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"mappings":"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"}

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

@@ -205,6 +205,7 @@ export const useInteractionTagSecondaryStyles_unstable = state => {
     size,
     appearance
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);
   return state;
 };

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","B4j52fo","Bn0qgzm","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","kr9cjb","u9orzk","Bbkh6qg","Cnge2b","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2\n },\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n },\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px'\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px'\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { disabled, selected, shape, size, appearance } = state;\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","B4j52fo","Bn0qgzm","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","kr9cjb","u9orzk","Bbkh6qg","Cnge2b","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","B8gzw0y","By8wz76","B7iucu3","Bahaeuw","Boo3t63","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","qhf8xq","Ie5t1m","G6hvz8","wgw0td","Bbwa3xj","m3mfg4","B9s7hj8","B9e1dac","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n },\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText'\n }\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2\n },\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n },\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px'\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px'\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\n }\n }\n }\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled\n }\n});\nexport const useInteractionTagSecondaryStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const { disabled, selected, shape, size, appearance } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -199,6 +199,7 @@ export const useInteractionTagSecondaryStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const rootDisabledStyles = useRootDisabledStyles();
     const { disabled, selected, shape, size, appearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);
     return state;
 };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagSecondarySlots, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagSecondaryClassNames: SlotClassNames<InteractionTagSecondarySlots> = {\n root: 'fui-InteractionTagSecondary',\n};\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\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\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n }),\n\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n});\n\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2, // divider\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular,\n },\n\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px',\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%',\n },\n '&:before': {\n bottom: '100%',\n },\n '&:after': {\n top: '100%',\n },\n },\n },\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled, // divider\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, // divider\n },\n});\n\nexport const useInteractionTagSecondaryStyles_unstable = (\n state: InteractionTagSecondaryState,\n): InteractionTagSecondaryState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n\n const { disabled, selected, shape, size, appearance } = state;\n\n state.root.className = mergeClasses(\n interactionTagSecondaryClassNames.root,\n rootBaseClassName,\n disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n rootStyles[shape],\n rootStyles[size],\n selected && !disabled && rootStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","outline","strokeWidthThick","colorStrokeFocus2","border","strokeWidthThin","colorTransparentStroke","borderLeftColor","colorNeutralStroke1","borderTopLeftRadius","borderRadiusNone","borderBottomLeftRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","borderTopWidth","borderBottomWidth","cursor","colorNeutralBackground3Hover","colorNeutralForeground2BrandHover","colorNeutralBackground3Pressed","colorNeutralForeground2BrandPressed","colorSubtleBackground","borderColor","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","colorNeutralStrokeOnBrand2","rounded","borderTopRightRadius","borderRadiusMedium","borderBottomRightRadius","circular","borderRadiusCircular","medium","fontSize","paddingLeft","paddingRight","small","position","content","left","width","bottom","top","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","className"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagSecondarySlots, InteractionTagSecondaryState } from './InteractionTagSecondary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const interactionTagSecondaryClassNames: SlotClassNames<InteractionTagSecondarySlots> = {\n root: 'fui-InteractionTagSecondary',\n};\n\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\n\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\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n }),\n\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone,\n});\n\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2, // divider\n borderTopWidth: 0,\n borderBottomWidth: 0,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n '@media (forced-colors: active)': {\n borderTopWidth: `${tokens.strokeWidthThin}`,\n borderBottomWidth: `${tokens.strokeWidthThin}`,\n ':hover': {\n backgroundColor: 'HighlightText',\n },\n ':active': {\n backgroundColor: 'HighlightText',\n },\n },\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n },\n },\n // divider\n borderLeftColor: tokens.colorNeutralStrokeOnBrand2,\n },\n\n rounded: {\n borderTopRightRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n },\n circular: {\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular,\n },\n\n medium: {\n fontSize: mediumIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n },\n small: {\n fontSize: smallIconSize,\n paddingLeft: '3px',\n paddingRight: '3px',\n },\n 'extra-small': {\n fontSize: extraSmallIconSize,\n paddingLeft: '5px',\n paddingRight: '5px',\n position: 'relative',\n\n '@media (forced-colors: none)': {\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n left: '0',\n width: '100%',\n },\n '&:before': {\n bottom: '100%',\n },\n '&:after': {\n top: '100%',\n },\n },\n },\n});\nconst useRootDisabledStyles = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n borderLeftColor: tokens.colorNeutralStrokeDisabled, // divider\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, // divider\n },\n});\n\nexport const useInteractionTagSecondaryStyles_unstable = (\n state: InteractionTagSecondaryState,\n): InteractionTagSecondaryState => {\n 'use no memo';\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n\n const { disabled, selected, shape, size, appearance } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n interactionTagSecondaryClassNames.root,\n rootBaseClassName,\n disabled ? rootDisabledStyles[appearance] : rootStyles[appearance],\n rootStyles[shape],\n rootStyles[size],\n selected && !disabled && rootStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","outline","strokeWidthThick","colorStrokeFocus2","border","strokeWidthThin","colorTransparentStroke","borderLeftColor","colorNeutralStroke1","borderTopLeftRadius","borderRadiusNone","borderBottomLeftRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","borderTopWidth","borderBottomWidth","cursor","colorNeutralBackground3Hover","colorNeutralForeground2BrandHover","colorNeutralBackground3Pressed","colorNeutralForeground2BrandPressed","colorSubtleBackground","borderColor","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","colorNeutralStrokeOnBrand2","rounded","borderTopRightRadius","borderRadiusMedium","borderBottomRightRadius","circular","borderRadiusCircular","medium","fontSize","paddingLeft","paddingRight","small","position","content","left","width","bottom","top","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","className"],"mappings":"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"}