npm - @fluentui/react-tags - Versions diffs - 9.5.5 → 9.5.7 - Mend

@fluentui/react-tags 9.5.5 → 9.5.7

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

Files changed (14) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,19 +1,42 @@
 # Change Log - @fluentui/react-tags
-This log was last generated on Wed, 14 May 2025 18:45:49 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Jun 2025 22:29:16 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.5.7)
+Wed, 11 Jun 2025 22:29:16 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.5.6..@fluentui/react-tags_v9.5.7)
+### Patches
+- fix: selected Tag and InteractionTag styles are visible in high contrast mode ([PR #34620](https://github.com/microsoft/fluentui/pull/34620) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-avatar to v9.7.9 ([PR #34631](https://github.com/microsoft/fluentui/pull/34631) by beachball)
+## [9.5.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.5.6)
+Fri, 06 Jun 2025 13:15:17 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.5.5..@fluentui/react-tags_v9.5.6)
+### Patches
+- Bump @fluentui/react-aria to v9.14.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-avatar to v9.7.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.55 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-tabster to v9.24.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
+- Bump @fluentui/react-utilities to v9.20.0 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
 ## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.5.5)
-Wed, 14 May 2025 18:45:49 GMT
+Wed, 14 May 2025 18:49:20 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.5.4..@fluentui/react-tags_v9.5.5)
 ### Patches
-- Bump @fluentui/react-aria to v9.14.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
-- Bump @fluentui/react-avatar to v9.7.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
-- Bump @fluentui/react-tabster to v9.24.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
+- Bump @fluentui/react-aria to v9.14.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-avatar to v9.7.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
+- Bump @fluentui/react-tabster to v9.24.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
 ## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.5.4)

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

@@ -126,12 +126,19 @@ const useRootStyles = /*#__PURE__*/__styles({
     h3c5rm: ["f1vfbj5f", "f1qpacp7"],
     B9xav0g: "fdf0ba2",
     zhjwy3: ["f1qpacp7", "f1vfbj5f"],
+    ycbfsm: "fkc42ay",
+    Bsw6fvg: "f1rirnrt",
+    Bbusuzp: "f1lkg8j3",
     Jwef8y: "f15wkkf3",
     Bi91k9c: "f1rq72xc",
     I6i3kg: "f10jvnl4",
+    Bqrx1nm: "fiu8gst",
+    ze5xyy: "f1byx217",
     ecr2s2: "fsp1bjw",
     lj723h: "f18otbis",
-    weioyw: "f3wpj5r"
+    weioyw: "f3wpj5r",
+    kx9iu6: "fkk6lp6",
+    oy3o9n: "f1ojl2j2"
   },
   medium: {
     z189sj: ["f18k1jr3", "f1rtp3s9"]
@@ -152,6 +159,20 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
   }]]
 });
 const useRootDisabledAppearances = /*#__PURE__*/__styles({

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

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

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

@@ -64,10 +64,17 @@ const useRootStyles = /*#__PURE__*/__styles({
     h3c5rm: ["f1vfbj5f", "f1qpacp7"],
     B9xav0g: "fdf0ba2",
     zhjwy3: ["f4j9k2g", "f1mg2euo"],
+    ycbfsm: "fkc42ay",
+    Bsw6fvg: "f1rirnrt",
+    Bbusuzp: "f1lkg8j3",
     Jwef8y: "f15wkkf3",
     Bi91k9c: "f1rq72xc",
+    Bqrx1nm: "fiu8gst",
+    ze5xyy: "f1byx217",
     ecr2s2: "fsp1bjw",
-    lj723h: "f18otbis"
+    lj723h: "f18otbis",
+    kx9iu6: "fkk6lp6",
+    oy3o9n: "f1ojl2j2"
   },
   rounded: {
     B7oj6ja: ["f1jar5jt", "fyu767a"],
@@ -102,6 +109,20 @@ const useRootStyles = /*#__PURE__*/__styles({
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.fp3oj7s:active{background-color:HighlightText;}}", {
     m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
   }]]
 });
 const useRootDisabledStyles = /*#__PURE__*/__styles({

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","interactionTagSecondaryClassNames","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand\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 }\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","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","ycbfsm","Bsw6fvg","Bbusuzp","ze5xyy","oy3o9n","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","p","h","a","m","useRootDisabledStyles","Bceei9c","useInteractionTagSecondaryStyles_unstable","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className"],"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n 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 }\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":[]}

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

@@ -65,7 +65,10 @@ const useRootStyles = /*#__PURE__*/__styles({
     g2u3we: "fk9qgl1",
     h3c5rm: ["f1vfbj5f", "f1qpacp7"],
     B9xav0g: "fdf0ba2",
-    zhjwy3: ["f1qpacp7", "f1vfbj5f"]
+    zhjwy3: ["f1qpacp7", "f1vfbj5f"],
+    ycbfsm: "fkc42ay",
+    Bsw6fvg: "f1rirnrt",
+    Bbusuzp: "f1lkg8j3"
   },
   medium: {
     Bqenvij: "f1d2rq10"
@@ -84,7 +87,14 @@ const useRootStyles = /*#__PURE__*/__styles({
     u6d25: "f1oinwhq"
   }
 }, {
-  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".f10pi13n{position:relative;}", ".fjamq6b{height:20px;}", ".f15j58gw:before,.f15j58gw:after{content:\"\";}", ".fitnkyp:before,.fitnkyp:after{position:absolute;}", ".f12jc7rs:before,.f12jc7rs:after{height:2px;}", ".fitizsl:before,.fitizsl:after{width:100%;}", ".ff8e2ck:before{bottom:100%;}", ".f1oinwhq:after{top:100%;}"]
+  d: [".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fk9qgl1{border-top-color:var(--colorBrandStroke1);}", ".f1vfbj5f{border-right-color:var(--colorBrandStroke1);}", ".f1qpacp7{border-left-color:var(--colorBrandStroke1);}", ".fdf0ba2{border-bottom-color:var(--colorBrandStroke1);}", ".f1d2rq10{height:32px;}", ".frvgh55{height:24px;}", ".f10pi13n{position:relative;}", ".fjamq6b{height:20px;}", ".f15j58gw:before,.f15j58gw:after{content:\"\";}", ".fitnkyp:before,.fitnkyp:after{position:absolute;}", ".f12jc7rs:before,.f12jc7rs:after{height:2px;}", ".fitizsl:before,.fitizsl:after{width:100%;}", ".ff8e2ck:before{bottom:100%;}", ".f1oinwhq:after{top:100%;}"],
+  m: [["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
+    m: "(forced-colors: active)"
+  }]]
 });
 const useRootDisabledStyles = /*#__PURE__*/__styles({
   filled: {

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

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","medium","Bqenvij","small","qhf8xq","b7i14k","Bej73l1","sg3u8k","dpul0f","Bj2wrql","u6d25","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","mc9l5x","B7ck84d","a9b677","Be2twd7","p","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n selected: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n position: 'relative',\n height: '20px',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\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 },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n boxSizing: 'content-box'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n gridArea: 'dismissIcon',\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n selected: {\n ':hover': {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n gridArea: 'primary',\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !disabled && dismissIconStyles[appearance], selected && !disabled && dismissIconStyles.selected, state.dismissIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","createCustomFocusIndicatorStyle","tagClassNames","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","r","s","useRootCircularBaseClassName","useRootStyles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","ycbfsm","Bsw6fvg","Bbusuzp","medium","Bqenvij","small","qhf8xq","b7i14k","Bej73l1","sg3u8k","dpul0f","Bj2wrql","u6d25","d","m","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","useIconStyles","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","mc9l5x","B7ck84d","a9b677","Be2twd7","p","useMediaStyles","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","h","a","usePrimaryTextStyles","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","useSecondaryTextBaseClassName","useTagStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className"],"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n selected: {\n backgroundColor: 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 medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n position: 'relative',\n height: '20px',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\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 },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n boxSizing: 'content-box'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n gridArea: 'dismissIcon',\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n selected: {\n ':hover': {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n gridArea: 'primary',\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !disabled && dismissIconStyles[appearance], selected && !disabled && dismissIconStyles.selected, state.dismissIcon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -196,12 +196,19 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f1qpacp7",
             "f1vfbj5f"
         ],
+        ycbfsm: "fkc42ay",
+        Bsw6fvg: "f1rirnrt",
+        Bbusuzp: "f1lkg8j3",
         Jwef8y: "f15wkkf3",
         Bi91k9c: "f1rq72xc",
         I6i3kg: "f10jvnl4",
+        Bqrx1nm: "fiu8gst",
+        ze5xyy: "f1byx217",
         ecr2s2: "fsp1bjw",
         lj723h: "f18otbis",
-        weioyw: "f3wpj5r"
+        weioyw: "f3wpj5r",
+        kx9iu6: "fkk6lp6",
+        oy3o9n: "f1ojl2j2"
     },
     medium: {
         z189sj: [
@@ -287,6 +294,48 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 m: "(forced-colors: active)"
             }
+        ],
+        [
+            "@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
         ]
     ]
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /*\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n / const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand,\n [`& .${iconFilledClassName}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n },\n medium: {\n paddingRight: '7px'\n },\n small: {\n paddingRight: '5px'\n },\n 'extra-small': {\n paddingRight: '5px'\n }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for InteractionTagPrimary without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/\n Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n })\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n '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"],"names":["interactionTagPrimaryClassNames","useInteractionTagPrimaryStyles_unstable","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","tokens","strokeWidthThin","colorTransparentStroke","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","__resetStyles","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","__styles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","useIconStyles","mediaStyles","useMediaStyles","primaryTextStyles","usePrimaryTextStyles","secondaryTextBaseClassName","useSecondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","mergeClasses","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,+BAA+B;eAA/BA;;IAyPAC,uCAAuC;eAAvCA;;;uBA9PyD;8BACtB;4BACzB;oCAE4E;AAC5F,MAAMD,kCAAkC;IAC3CE,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,aAAa;IACbC,eAAe;AACnB;AACA,MAAMC,aAAa;IACf,8BAAA;IACAC,OAAO;IACPC,YAAY;IACZC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,WAAW;IACXC,iBAAiB;IACjBC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,mBAAmB,CAAA;;;EAGvB,CAAG;IACCC,QAAQ,CAAA,EAAGC,kBAAM,CAACC,eAAe,CAAA,OAAA,EAAUD,kBAAM,CAACE,sBAAsB,CAAA,CAAE;IAC1E,GAAA,WAAA,GAAGC,IAAAA,6CAA+B,EAAC;QAC/BC,SAAS,CAAA,EAAGJ,kBAAM,CAACK,gBAAgB,CAAA,OAAA,EAAUL,kBAAM,CAACM,iBAAiB,CAAA,CAAE;QACvEC,QAAQ;IACZ,EAAC;AACL;AACA,MAAMC,8BAA2B,WAAA,GAAGC,IAAAA,oBAAA,EAAA,YAAA,WAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAqBpC,MAAMC,+BAA4B,WAAA,GAAGH,IAAAA,oBAAA,EAAA,YAAA,YAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA;AAsBrC;;CAEA,GAAI,MAAME,gCAA6B,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,wBAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,OAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;gBAAAD,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAY1C,MAAME,gBAAa,WAAA,GAAGX,IAAAA,eAAA,EAAA;IAAAY,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAA/B,SAAA;QAAAuB,QAAA;QAAAC,QAAA;QAAAQ,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAV,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAS,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAV,QAAA;QAAAC,QAAA;QAAAU,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAX,SAAA;QAAAC,QAAA;IAAA;IAAAW,OAAA;QAAAnB,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAY,UAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAtB,QAAA;QAAAuB,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAA7B,QAAA;QAAAQ,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAT,QAAA;QAAAC,SAAA;QAAAU,QAAA;QAAAT,QAAA;QAAAC,QAAA;QAAAW,QAAA;IAAA;IAAAc,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA,eAAA;QAAAA,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAArC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAsC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAxC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AA4GtB,MAAMyC,6BAA0B,WAAA,GAAGlD,IAAAA,eAAA,EAAA;IAAAY,QAAA;QAAAuC,SAAA;QAAAtC,QAAA;QAAAC,QAAA;QAAAQ,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAnC,SAAA;QAAA6D,SAAA;QAAAtC,QAAA;QAAAC,QAAA;QAAAQ,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAO,OAAA;QAAAmB,SAAA;QAAAtC,QAAA;QAAAC,QAAA;QAAAQ,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAsB,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAoBnC;;CAEA,GAAI,MAAMK,4BAAyB,WAAA,GAAGpD,IAAAA,eAAA,EAAA;IAAA4C,QAAA;QAAAS,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAP,OAAA;QAAAO,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA,eAAA;QAAAA,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAN,GAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAWtC;;CAEA,GAAI,MAAMO,mCAAgC,WAAA,GAAGtD,IAAAA,eAAA,EAAA;IAAAuD,MAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAhB,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA;QAAAD,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA,eAAA;QAAAA,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAoBtC,MAAMhF,0CAA2C8F,CAAAA;IACpD;IACA,MAAMC,2BAA2BpE;IACjC,MAAMqE,4BAA4BjE;IAClC,MAAMkE,aAAarD;IACnB,MAAMsD,0BAA0Bf;IAChC,MAAMgB,yBAAyBd;IAC/B,MAAMe,gCAAgCb;IACtC,MAAMc,aAAaC,IAAAA,iCAAa;IAChC,MAAMC,cAAcC,IAAAA,kCAAc;IAClC,MAAMC,oBAAoBC,IAAAA,wCAAoB;IAC9C,MAAMC,6BAA6BC,IAAAA,iDAA6B;IAChE,MAAMC,6BAA6B7E;IACnC,MAAM,EAAE8E,QAAQ,EAAEC,KAAK,EAAEC,IAAI,EAAErG,UAAU,EAAEuD,QAAAA,EAAU,GAAG4B;IACxDA,MAAM7F,IAAI,CAACgH,SAAS,GAAGC,IAAAA,mBAAY,EAACnH,gCAAgCE,IAAI,EAAE8G,UAAU,YAAYhB,2BAA2BC,2BAA2Be,UAAU,cAAc,CAACjB,MAAMqB,kBAAkB,IAAIN,2BAA2B3E,sBAAsB,EAAE4E,WAAWZ,uBAAuB,CAACvF,WAAW,GAAGsF,UAAU,CAACtF,WAAW,EAAEuD,YAAY,CAAC4C,YAAYb,WAAW/B,QAAQ,EAAE+B,UAAU,CAACe,KAAK,EAAE,CAAClB,MAAM5F,KAAK,IAAI,CAAC4F,MAAM3F,IAAI,IAAIgG,sBAAsB,CAACa,KAAK,EAAElB,MAAMqB,kBAAkB,IAAIf,8BAA8BZ,IAAI,EAAEM,MAAMqB,kBAAkB,IAAIf,6BAA6B,CAACY,KAAK,EAAElB,MAAM7F,IAAI,CAACgH,SAAS;IACzlB,IAAInB,MAAM5F,KAAK,EAAE;QACb4F,MAAM5F,KAAK,CAAC+G,SAAS,GAAGC,IAAAA,mBAAY,EAACnH,gCAAgCG,KAAK,EAAEqG,YAAYf,IAAI,EAAEe,WAAW,CAACS,KAAK,EAAElB,MAAM5F,KAAK,CAAC+G,SAAS;IAC1I;IACA,IAAInB,MAAM3F,IAAI,EAAE;QACZ2F,MAAM3F,IAAI,CAAC8G,SAAS,GAAGC,IAAAA,mBAAY,EAACnH,gCAAgCI,IAAI,EAAEkG,WAAWb,IAAI,EAAEa,UAAU,CAACW,KAAK,EAAElB,MAAM3F,IAAI,CAAC8G,SAAS;IACrI;IACA,IAAInB,MAAM1F,WAAW,EAAE;QACnB0F,MAAM1F,WAAW,CAAC6G,SAAS,GAAGC,IAAAA,mBAAY,EAACnH,gCAAgCK,WAAW,EAAEqG,kBAAkBjB,IAAI,EAAEiB,iBAAiB,CAACO,KAAK,EAAElB,MAAMzF,aAAa,GAAGoG,kBAAkBW,iBAAiB,GAAGX,kBAAkBY,oBAAoB,EAAEvB,MAAM1F,WAAW,CAAC6G,SAAS;IAC5Q;IACA,IAAInB,MAAMzF,aAAa,EAAE;QACrByF,MAAMzF,aAAa,CAAC4G,SAAS,GAAGC,IAAAA,mBAAY,EAACnH,gCAAgCM,aAAa,EAAEsG,4BAA4Bb,MAAMzF,aAAa,CAAC4G,SAAS;IACzJ;IACA,OAAOnB;AACX"}
1	+ {"version":3,"sources":["useInteractionTagPrimaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';\nexport const interactionTagPrimaryClassNames = {\n root: 'fui-InteractionTagPrimary',\n media: 'fui-InteractionTagPrimary__media',\n icon: 'fui-InteractionTagPrimary__icon',\n primaryText: 'fui-InteractionTagPrimary__primaryText',\n secondaryText: 'fui-InteractionTagPrimary__secondaryText'\n};\nconst baseStyles = {\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'inline-grid',\n height: '100%',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary \"\n \"media secondary\"\n `,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n zIndex: 1\n })\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n /*\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusCircular,\n borderBottomLeftRadius: tokens.borderRadiusCircular\n }\n }\n});\n/\n Style override for pseudo element that draws the border for windows high contrast mode\n / const useRootCircularContrastStyles = makeStyles({\n withoutSecondaryAction: {\n '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n borderRight: `${tokens.strokeWidthThin} solid transparent`,\n borderTopRightRadius: tokens.borderRadiusCircular,\n borderBottomRightRadius: tokens.borderRadiusCircular\n }\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2Hover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2Hover,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandHover\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2Pressed,\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n color: tokens.colorNeutralForeground2BrandPressed\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n }\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n 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 }\n});\nconst useRootDisabledAppearances = makeStyles({\n filled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for InteractionTagPrimary without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: '7px'\n },\n small: {\n paddingLeft: '5px'\n },\n 'extra-small': {\n paddingLeft: '5px'\n }\n});\n/\n Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */ const useRootWithSecondaryActionStyles = makeStyles({\n base: {\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone,\n borderRightStyle: 'none',\n ...createCustomFocusIndicatorStyle({\n borderTopRightRadius: tokens.borderRadiusNone,\n borderBottomRightRadius: tokens.borderRadiusNone\n })\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nexport const useInteractionTagPrimaryStyles_unstable = (state)=>{\n '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"],"names":["interactionTagPrimaryClassNames","useInteractionTagPrimaryStyles_unstable","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","tokens","strokeWidthThin","colorTransparentStroke","createCustomFocusIndicatorStyle","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","__resetStyles","r","s","useRootCircularBaseClassName","useRootCircularContrastStyles","__styles","withoutSecondaryAction","Bglfifq","hxi8he","B33s42s","G4pote","gw1m2h","w20ur","Byczuf6","m","p","useRootStyles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bk3fhr4","I6i3kg","Bmfj8id","Bnrwwps","weioyw","Bpre390","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","ycbfsm","Bsw6fvg","Bbusuzp","ze5xyy","oy3o9n","medium","z189sj","small","d","h","a","useRootDisabledAppearances","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithSecondaryActionStyles","base","B7oj6ja","Bbmb7ep","vrafjx","B6xbmo0","kdpuga","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","useIconStyles","mediaStyles","useMediaStyles","primaryTextStyles","usePrimaryTextStyles","secondaryTextBaseClassName","useSecondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","mergeClasses","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -100,10 +100,17 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             "f4j9k2g",
             "f1mg2euo"
         ],
+        ycbfsm: "fkc42ay",
+        Bsw6fvg: "f1rirnrt",
+        Bbusuzp: "f1lkg8j3",
         Jwef8y: "f15wkkf3",
         Bi91k9c: "f1rq72xc",
+        Bqrx1nm: "fiu8gst",
+        ze5xyy: "f1byx217",
         ecr2s2: "fsp1bjw",
-        lj723h: "f18otbis"
+        lj723h: "f18otbis",
+        kx9iu6: "fkk6lp6",
+        oy3o9n: "f1ojl2j2"
     },
     rounded: {
         B7oj6ja: [
@@ -231,6 +238,48 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
             {
                 m: "(forced-colors: active)"
             }
+        ],
+        [
+            "@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fiu8gst:hover{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1byx217:hover{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fkk6lp6:active{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ojl2j2:active{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
         ]
     ]
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n selected: {\n background: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n color: tokens.colorNeutralForegroundOnBrand\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 }\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"],"names":["interactionTagSecondaryClassNames","useInteractionTagSecondaryStyles_unstable","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","p","h","a","m","useRootDisabledStyles","Bceei9c","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGaA,iCAAiC;eAAjCA;;IA0JAC,yCAAyC;eAAzCA;;;uBA7JyD;AAG/D,MAAMD,oCAAoC;IAC7CE,MAAM;AACV;AACA,MAAMC,iBAAiB;AACvB,MAAMC,gBAAgB;AACtB,MAAMC,qBAAqB;AAC3B,MAAMC,uBAAoB,WAAA,GAAGC,IAAAA,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;IAAA;IAAA;CAoB5B;AACD,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAC,SAAA;QAAAT,QAAA;QAAAC,QAAA;QAAAS,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAX,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAM,OAAA;QAAAd,QAAA;QAAAC,QAAA;QAAAY,QAAA;YAAA;YAAA;SAAA;QAAAX,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;IAAAO,UAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAjB,QAAA;QAAAkB,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAxB,QAAA;QAAAS,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAV,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAoB,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,UAAA;QAAAF,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,QAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA;QAAAH,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA,eAAA;QAAAF,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAE,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAyGtB,MAAMC,wBAAqB,WAAA,GAAG1C,IAAAA,eAAA,EAAA;IAAAC,QAAA;QAAA0C,SAAA;QAAAzC,QAAA;QAAAC,QAAA;QAAAS,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAJ,SAAA;QAAAgC,SAAA;QAAAzC,QAAA;QAAAC,QAAA;QAAAS,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA;QAAA2B,SAAA;QAAAzC,QAAA;QAAAC,QAAA;QAAAS,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAsB,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAsBvB,MAAM7C,4CAA6CoD,CAAAA;IACtD;IACA,MAAMC,oBAAoBhD;IAC1B,MAAMiD,aAAa/C;IACnB,MAAMgD,qBAAqBL;IAC3B,MAAM,EAAEM,QAAQ,EAAE/B,QAAQ,EAAEgC,KAAK,EAAEC,IAAI,EAAEC,UAAAA,EAAY,GAAGP;IACxDA,MAAMnD,IAAI,CAAC2D,SAAS,GAAGC,IAAAA,mBAAY,EAAC9D,kCAAkCE,IAAI,EAAEoD,mBAAmBG,WAAWD,kBAAkB,CAACI,WAAW,GAAGL,UAAU,CAACK,WAAW,EAAEL,UAAU,CAACG,MAAM,EAAEH,UAAU,CAACI,KAAK,EAAEjC,YAAY,CAAC+B,YAAYF,WAAW7B,QAAQ,EAAE2B,MAAMnD,IAAI,CAAC2D,SAAS;IAC1Q,OAAOR;AACX"}
1	+ {"version":3,"sources":["useInteractionTagSecondaryStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const interactionTagSecondaryClassNames = {\n root: 'fui-InteractionTagSecondary'\n};\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst useRootBaseClassName = makeResetStyles({\n // reset default button style:\n color: 'inherit',\n fontFamily: 'inherit',\n padding: '0px',\n borderStyle: 'none',\n appearance: 'button',\n textAlign: 'unset',\n backgroundColor: 'transparent',\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n // divider:\n borderLeftColor: tokens.colorNeutralStroke1,\n borderTopLeftRadius: tokens.borderRadiusNone,\n borderBottomLeftRadius: tokens.borderRadiusNone\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground3Hover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground3Pressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground2BrandPressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2,\n borderLeftColor: tokens.colorBrandStroke2,\n ':hover': {\n cursor: 'pointer',\n backgroundColor: tokens.colorBrandBackground2Hover,\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackground2Pressed,\n color: tokens.colorCompoundBrandForeground1Pressed\n },\n '@media (forced-colors: active)': {\n ':hover': {\n backgroundColor: 'HighlightText'\n },\n ':active': {\n backgroundColor: 'HighlightText'\n }\n }\n },\n 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 }\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"],"names":["interactionTagSecondaryClassNames","useInteractionTagSecondaryStyles_unstable","root","mediumIconSize","smallIconSize","extraSmallIconSize","useRootBaseClassName","__resetStyles","useRootStyles","__styles","filled","De3pzq","sj55zd","eoavqd","Jwef8y","Bi91k9c","ecr2s2","lj723h","Bqrx1nm","kx9iu6","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","Bgh53k4","B2eet1l","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","ycbfsm","Bsw6fvg","Bbusuzp","ze5xyy","oy3o9n","rounded","B7oj6ja","Bbmb7ep","circular","medium","Be2twd7","uwmqm3","z189sj","small","d","p","h","a","m","useRootDisabledStyles","Bceei9c","state","rootBaseClassName","rootStyles","rootDisabledStyles","disabled","shape","size","appearance","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -121,7 +121,10 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         zhjwy3: [
             "f1qpacp7",
             "f1vfbj5f"
-        ]
+        ],
+        ycbfsm: "fkc42ay",
+        Bsw6fvg: "f1rirnrt",
+        Bbusuzp: "f1lkg8j3"
     },
     medium: {
         Bqenvij: "f1d2rq10"
@@ -166,6 +169,26 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
         ".fitizsl:before,.fitizsl:after{width:100%;}",
         ".ff8e2ck:before{bottom:100%;}",
         ".f1oinwhq:after{top:100%;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
     ]
 });
 const useRootDisabledStyles = /*#__PURE__*/ (0, _react.__styles)({

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n selected: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n position: 'relative',\n height: '20px',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\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 },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n boxSizing: 'content-box'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n gridArea: 'dismissIcon',\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n selected: {\n ':hover': {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n gridArea: 'primary',\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !disabled && dismissIconStyles[appearance], selected && !disabled && dismissIconStyles.selected, state.dismissIcon.className);\n }\n return state;\n};\n"],"names":["tagClassNames","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","useTagStyles_unstable","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","tokens","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","__resetStyles","r","s","useRootCircularBaseClassName","useRootStyles","__styles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","medium","Bqenvij","small","qhf8xq","b7i14k","Bej73l1","sg3u8k","dpul0f","Bj2wrql","u6d25","d","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","mc9l5x","B7ck84d","a9b677","Be2twd7","p","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","m","h","a","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useTagStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tagClassNames = {\n root: 'fui-Tag',\n media: 'fui-Tag__media',\n icon: 'fui-Tag__icon',\n primaryText: 'fui-Tag__primaryText',\n secondaryText: 'fui-Tag__secondaryText',\n dismissIcon: 'fui-Tag__dismissIcon'\n};\n/*\n Inner horizontal space left and right of Tag\n / const tagSpacingMedium = '7px';\nconst tagSpacingSmall = '5px';\nconst tagSpacingExtraSmall = '5px';\nconst mediumIconSize = '20px';\nconst smallIconSize = '16px';\nconst extraSmallIconSize = '12px';\nconst baseStyles = {\n // reset default button style:\n fontFamily: 'inherit',\n padding: '0px',\n appearance: 'button',\n textAlign: 'unset',\n display: 'inline-grid',\n alignItems: 'center',\n gridTemplateAreas: `\n \"media primary dismissIcon\"\n \"media secondary dismissIcon\"\n `,\n boxSizing: 'border-box',\n width: 'fit-content',\n border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`\n};\nconst useRootRoundedBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderTopRightRadius: tokens.borderRadiusMedium\n }\n }\n});\nconst useRootCircularBaseClassName = makeResetStyles({\n ...baseStyles,\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n }),\n /\n Pseudo element to draw the border for windows high contrast mode -\n * when Tag is with secondary text, primary text has negative margin that covers the border.\n / '@media (forced-colors: active)': {\n position: 'relative',\n '::before': {\n content: '\"\"',\n borderTop: `${tokens.strokeWidthThin} solid`,\n borderLeft: `${tokens.strokeWidthThin} solid`,\n borderRight: `${tokens.strokeWidthThin} solid`,\n position: 'absolute',\n top: '-1px',\n left: '-1px',\n right: '-1px',\n bottom: '-1px',\n borderRadius: tokens.borderRadiusCircular\n }\n }\n});\nconst useRootStyles = makeStyles({\n filled: {\n backgroundColor: tokens.colorNeutralBackground3,\n color: tokens.colorNeutralForeground2\n },\n outline: {\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForeground2,\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorBrandForeground2\n },\n selected: {\n backgroundColor: 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 medium: {\n height: '32px'\n },\n small: {\n height: '24px'\n },\n 'extra-small': {\n position: 'relative',\n height: '20px',\n // Increase clickable area to meet WCAG 2.2 AA\n // https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html\n '&:before, &:after': {\n content: '\"\"',\n position: 'absolute',\n height: '2px',\n width: '100%'\n },\n '&:before': {\n bottom: '100%'\n },\n '&:after': {\n top: '100%'\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 },\n outline: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorSubtleBackground,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n },\n brand: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)\n }\n});\n/\n Styles for root slot when Tag is without leading media/icon\n / const useRootWithoutMediaStyles = makeStyles({\n medium: {\n paddingLeft: tagSpacingMedium\n },\n small: {\n paddingLeft: tagSpacingSmall\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall\n }\n});\n/\n Styles for root slot when Tag is without dismiss icon\n / const useRootWithoutDismissStyles = makeStyles({\n medium: {\n paddingRight: tagSpacingMedium\n },\n small: {\n paddingRight: tagSpacingSmall\n },\n 'extra-small': {\n paddingRight: tagSpacingExtraSmall\n }\n});\nexport const useIconStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n boxSizing: 'content-box'\n },\n medium: {\n paddingLeft: tagSpacingMedium,\n paddingRight: tokens.spacingHorizontalXS,\n width: mediumIconSize,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tagSpacingSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: smallIconSize,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tagSpacingExtraSmall,\n paddingRight: tokens.spacingHorizontalXXS,\n width: extraSmallIconSize,\n fontSize: extraSmallIconSize\n }\n});\nexport const useMediaStyles = makeStyles({\n base: {\n gridArea: 'media',\n display: 'flex',\n paddingLeft: '1px'\n },\n medium: {\n paddingRight: tokens.spacingHorizontalS\n },\n small: {\n paddingRight: tokens.spacingHorizontalSNudge\n },\n 'extra-small': {\n paddingRight: tokens.spacingHorizontalSNudge\n }\n});\nconst useDismissIconStyles = makeStyles({\n base: {\n gridArea: 'dismissIcon',\n display: 'flex',\n // windows high contrast:\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight'\n },\n ':active': {\n color: 'Highlight'\n }\n }\n },\n medium: {\n paddingLeft: tokens.spacingHorizontalXS,\n paddingRight: tagSpacingMedium,\n fontSize: mediumIconSize\n },\n small: {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingSmall,\n fontSize: smallIconSize\n },\n 'extra-small': {\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tagSpacingExtraSmall,\n fontSize: extraSmallIconSize\n },\n filled: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n outline: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n brand: {\n ':hover': {\n cursor: 'pointer',\n color: tokens.colorCompoundBrandForeground1Hover\n },\n ':active': {\n color: tokens.colorCompoundBrandForeground1Pressed\n }\n },\n selected: {\n ':hover': {\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':active': {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n});\nexport const usePrimaryTextStyles = makeStyles({\n base: {\n whiteSpace: 'nowrap',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS\n },\n medium: {\n ...typographyStyles.body1\n },\n small: {\n ...typographyStyles.caption1\n },\n 'extra-small': {\n ...typographyStyles.caption1\n },\n withoutSecondaryText: {\n gridColumnStart: 'primary',\n gridRowStart: 'primary',\n gridRowEnd: 'secondary',\n paddingBottom: tokens.spacingHorizontalXXS\n },\n withSecondaryText: {\n gridArea: 'primary',\n ...typographyStyles.caption1,\n marginTop: '-2px'\n }\n});\nexport const useSecondaryTextBaseClassName = makeResetStyles({\n gridArea: 'secondary',\n paddingLeft: tokens.spacingHorizontalXXS,\n paddingRight: tokens.spacingHorizontalXXS,\n ...typographyStyles.caption2,\n whiteSpace: 'nowrap'\n});\n/\n Apply styling to the Tag slots based on the state\n */ export const useTagStyles_unstable = (state)=>{\n 'use no memo';\n const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n const rootCircularBaseClassName = useRootCircularBaseClassName();\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n const rootWithoutDismissStyles = useRootWithoutDismissStyles();\n const iconStyles = useIconStyles();\n const mediaStyles = useMediaStyles();\n const dismissIconStyles = useDismissIconStyles();\n const primaryTextStyles = usePrimaryTextStyles();\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const { disabled, shape, size, appearance, selected } = state;\n state.root.className = mergeClasses(tagClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], !state.dismissIcon && rootWithoutDismissStyles[size], state.root.className);\n if (state.media) {\n state.media.className = mergeClasses(tagClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);\n }\n if (state.icon) {\n state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n if (state.primaryText) {\n state.primaryText.className = mergeClasses(tagClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);\n }\n if (state.secondaryText) {\n state.secondaryText.className = mergeClasses(tagClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);\n }\n if (state.dismissIcon) {\n state.dismissIcon.className = mergeClasses(tagClassNames.dismissIcon, dismissIconStyles.base, dismissIconStyles[size], !disabled && dismissIconStyles[appearance], selected && !disabled && dismissIconStyles.selected, state.dismissIcon.className);\n }\n return state;\n};\n"],"names":["tagClassNames","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","useTagStyles_unstable","root","media","icon","primaryText","secondaryText","dismissIcon","tagSpacingMedium","tagSpacingSmall","tagSpacingExtraSmall","mediumIconSize","smallIconSize","extraSmallIconSize","baseStyles","fontFamily","padding","appearance","textAlign","display","alignItems","gridTemplateAreas","boxSizing","width","border","tokens","strokeWidthThin","colorTransparentStroke","useRootRoundedBaseClassName","__resetStyles","r","s","useRootCircularBaseClassName","useRootStyles","__styles","filled","De3pzq","sj55zd","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","brand","selected","ycbfsm","Bsw6fvg","Bbusuzp","medium","Bqenvij","small","qhf8xq","b7i14k","Bej73l1","sg3u8k","dpul0f","Bj2wrql","u6d25","d","m","useRootDisabledStyles","Bceei9c","useRootWithoutMediaStyles","uwmqm3","useRootWithoutDismissStyles","z189sj","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","mc9l5x","B7ck84d","a9b677","Be2twd7","p","useDismissIconStyles","ze5xyy","oy3o9n","eoavqd","Bi91k9c","lj723h","h","a","Huce71","Bahqtrf","Bhrd7zp","Bg96gwp","withoutSecondaryText","Byoj8tv","withSecondaryText","B6of3ja","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledStyles","rootWithoutMediaStyles","rootWithoutDismissStyles","iconStyles","mediaStyles","dismissIconStyles","primaryTextStyles","secondaryTextBaseClassName","disabled","shape","size","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tags",
-  "version": "9.5.5",
+  "version": "9.5.7",
   "description": "Fluent UI Tag component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,14 +21,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-aria": "^9.14.7",
-    "@fluentui/react-avatar": "^9.7.7",
+    "@fluentui/react-aria": "^9.14.8",
+    "@fluentui/react-avatar": "^9.7.9",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.0.54",
+    "@fluentui/react-jsx-runtime": "^9.0.55",
     "@fluentui/react-shared-contexts": "^9.23.1",
-    "@fluentui/react-tabster": "^9.24.7",
+    "@fluentui/react-tabster": "^9.24.8",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.19.0",
+    "@fluentui/react-utilities": "^9.20.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },