@fluentui/react-tags 9.6.6 → 9.7.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-tags
 
-This log was last generated on Fri, 04 Jul 2025 10:00:11 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.7.0)
+
+Thu, 17 Jul 2025 13:45:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.6.7..@fluentui/react-tags_v9.7.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-aria to v9.15.4 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-avatar to v9.9.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.6.7)
+
+Fri, 11 Jul 2025 15:59:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.6.6..@fluentui/react-tags_v9.6.7)
+
+### Patches
+
+- Bump @fluentui/react-avatar to v9.8.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
+
 ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tags_v9.6.6)
 
-Fri, 04 Jul 2025 10:00:11 GMT 
+Fri, 04 Jul 2025 10:02:51 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tags_v9.6.5..@fluentui/react-tags_v9.6.6)
 
 ### Patches

package/lib/components/InteractionTag/useInteractionTagStyles.styles.raw.js

@@ -0,0 +1,38 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const interactionTagClassNames = {
+    root: 'fui-InteractionTag'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    width: 'fit-content'
+});
+const useRootStyles = makeStyles({
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium
+    },
+    circular: {
+        borderRadius: tokens.borderRadiusCircular
+    },
+    medium: {
+        height: '32px'
+    },
+    small: {
+        height: '24px'
+    },
+    'extra-small': {
+        height: '20px'
+    }
+});
+/**
+ * Apply styling to the InteractionTag slots based on the state
+ */ export const useInteractionTagStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const { shape, size } = state;
+    state.root.className = mergeClasses(interactionTagClassNames.root, rootBaseClassName, rootStyles[shape], rootStyles[size], state.root.className);
+    return state;
+};

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

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

package/lib/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.raw.js

@@ -0,0 +1,296 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { useIconStyles, useMediaStyles, usePrimaryTextStyles, useSecondaryTextBaseClassName } from '../Tag/useTagStyles.styles';
+export const interactionTagPrimaryClassNames = {
+    root: 'fui-InteractionTagPrimary',
+    media: 'fui-InteractionTagPrimary__media',
+    icon: 'fui-InteractionTagPrimary__icon',
+    primaryText: 'fui-InteractionTagPrimary__primaryText',
+    secondaryText: 'fui-InteractionTagPrimary__secondaryText'
+};
+const baseStyles = {
+    // reset default button style:
+    color: 'inherit',
+    fontFamily: 'inherit',
+    padding: '0px',
+    borderStyle: 'none',
+    appearance: 'button',
+    textAlign: 'unset',
+    backgroundColor: 'transparent',
+    display: 'inline-grid',
+    height: '100%',
+    alignItems: 'center',
+    gridTemplateAreas: `
+  "media primary  "
+  "media secondary"
+  `,
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+        zIndex: 1
+    })
+};
+const useRootRoundedBaseClassName = makeResetStyles({
+    ...baseStyles,
+    borderRadius: tokens.borderRadiusMedium,
+    /**
+   * Pseudo element to draw the border for windows high contrast mode -
+   * when Tag is with secondary text, primary text has negative margin that covers the border.
+   */ '@media (forced-colors: active)': {
+        position: 'relative',
+        '::before': {
+            content: '""',
+            borderTop: `${tokens.strokeWidthThin} solid`,
+            position: 'absolute',
+            top: '-1px',
+            left: '-1px',
+            right: '-1px',
+            bottom: '-1px',
+            borderTopLeftRadius: tokens.borderRadiusMedium,
+            borderTopRightRadius: tokens.borderRadiusMedium
+        }
+    }
+});
+const useRootCircularBaseClassName = makeResetStyles({
+    ...baseStyles,
+    borderRadius: tokens.borderRadiusCircular,
+    /**
+   * Pseudo element to draw the border for windows high contrast mode -
+   * when Tag is with secondary text, primary text has negative margin that covers the border.
+   */ '@media (forced-colors: active)': {
+        position: 'relative',
+        '::before': {
+            content: '""',
+            borderTop: `${tokens.strokeWidthThin} solid`,
+            borderLeft: `${tokens.strokeWidthThin} solid`,
+            position: 'absolute',
+            top: '-1px',
+            left: '-1px',
+            right: '-1px',
+            bottom: '-1px',
+            borderTopLeftRadius: tokens.borderRadiusCircular,
+            borderBottomLeftRadius: tokens.borderRadiusCircular
+        }
+    }
+});
+/**
+ * Style override for pseudo element that draws the border for windows high contrast mode
+ */ const useRootCircularContrastStyles = makeStyles({
+    withoutSecondaryAction: {
+        '@media (forced-colors: active)': {
+            position: 'relative',
+            '::before': {
+                borderRight: `${tokens.strokeWidthThin} solid transparent`,
+                borderTopRightRadius: tokens.borderRadiusCircular,
+                borderBottomRightRadius: tokens.borderRadiusCircular
+            }
+        }
+    }
+});
+const useRootStyles = makeStyles({
+    filled: {
+        backgroundColor: tokens.colorNeutralBackground3,
+        color: tokens.colorNeutralForeground2,
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorNeutralBackground3Hover,
+            color: tokens.colorNeutralForeground2Hover
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground3Pressed,
+            color: tokens.colorNeutralForeground2Pressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    outline: {
+        backgroundColor: tokens.colorSubtleBackground,
+        color: tokens.colorNeutralForeground2,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorSubtleBackgroundHover,
+            color: tokens.colorNeutralForeground2Hover,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline',
+                color: tokens.colorNeutralForeground2BrandHover
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            color: tokens.colorNeutralForeground2Pressed,
+            [`& .${iconFilledClassName}`]: {
+                display: 'inline',
+                color: tokens.colorNeutralForeground2BrandPressed
+            },
+            [`& .${iconRegularClassName}`]: {
+                display: 'none'
+            }
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    brand: {
+        backgroundColor: tokens.colorBrandBackground2,
+        color: tokens.colorBrandForeground2,
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorBrandBackground2Hover,
+            color: tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            backgroundColor: tokens.colorBrandBackground2Pressed,
+            color: tokens.colorCompoundBrandForeground1Pressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    selected: {
+        background: tokens.colorBrandBackground,
+        color: tokens.colorNeutralForegroundOnBrand,
+        ...shorthands.borderColor(tokens.colorBrandStroke1),
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'none',
+            backgroundColor: 'Highlight',
+            color: 'HighlightText'
+        },
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            color: tokens.colorNeutralForegroundOnBrand,
+            [`& .${iconFilledClassName}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            },
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'HighlightText'
+            }
+        },
+        ':active': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            color: tokens.colorNeutralForegroundOnBrand,
+            [`& .${iconFilledClassName}`]: {
+                color: tokens.colorNeutralForegroundOnBrand
+            },
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'HighlightText'
+            }
+        }
+    },
+    medium: {
+        paddingRight: '7px'
+    },
+    small: {
+        paddingRight: '5px'
+    },
+    'extra-small': {
+        paddingRight: '5px'
+    }
+});
+const useRootDisabledAppearances = makeStyles({
+    filled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)
+    },
+    outline: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorSubtleBackground,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
+    },
+    brand: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled)
+    }
+});
+/**
+ * Styles for InteractionTagPrimary without leading media/icon
+ */ const useRootWithoutMediaStyles = makeStyles({
+    medium: {
+        paddingLeft: '7px'
+    },
+    small: {
+        paddingLeft: '5px'
+    },
+    'extra-small': {
+        paddingLeft: '5px'
+    }
+});
+/**
+ * Styles for InteractionTagPrimary when InteractionTag has a Secondary button
+ */ const useRootWithSecondaryActionStyles = makeStyles({
+    base: {
+        borderTopRightRadius: tokens.borderRadiusNone,
+        borderBottomRightRadius: tokens.borderRadiusNone,
+        borderRightStyle: 'none',
+        ...createCustomFocusIndicatorStyle({
+            borderTopRightRadius: tokens.borderRadiusNone,
+            borderBottomRightRadius: tokens.borderRadiusNone
+        })
+    },
+    medium: {
+        paddingRight: tokens.spacingHorizontalS
+    },
+    small: {
+        paddingRight: tokens.spacingHorizontalSNudge
+    },
+    'extra-small': {
+        paddingRight: tokens.spacingHorizontalSNudge
+    }
+});
+export const useInteractionTagPrimaryStyles_unstable = (state)=>{
+    'use no memo';
+    const rootRoundedBaseClassName = useRootRoundedBaseClassName();
+    const rootCircularBaseClassName = useRootCircularBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledAppearances = useRootDisabledAppearances();
+    const rootWithoutMediaStyles = useRootWithoutMediaStyles();
+    const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();
+    const iconStyles = useIconStyles();
+    const mediaStyles = useMediaStyles();
+    const primaryTextStyles = usePrimaryTextStyles();
+    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+    const rootCircularContrastStyles = useRootCircularContrastStyles();
+    const { disabled, shape, size, appearance, selected } = state;
+    state.root.className = mergeClasses(interactionTagPrimaryClassNames.root, shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName, shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction, disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance], selected && !disabled && rootStyles.selected, rootStyles[size], !state.media && !state.icon && rootWithoutMediaStyles[size], state.hasSecondaryAction && rootWithSecondaryActionStyles.base, state.hasSecondaryAction && rootWithSecondaryActionStyles[size], state.root.className);
+    if (state.media) {
+        state.media.className = mergeClasses(interactionTagPrimaryClassNames.media, mediaStyles.base, mediaStyles[size], state.media.className);
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(interactionTagPrimaryClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+    }
+    if (state.primaryText) {
+        state.primaryText.className = mergeClasses(interactionTagPrimaryClassNames.primaryText, primaryTextStyles.base, primaryTextStyles[size], state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = mergeClasses(interactionTagPrimaryClassNames.secondaryText, secondaryTextBaseClassName, state.secondaryText.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts"],"sourcesContent":["import { GriffelResetStyle, makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InteractionTagPrimarySlots, InteractionTagPrimaryState } from './InteractionTagPrimary.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport {\n  useIconStyles,\n  useMediaStyles,\n  usePrimaryTextStyles,\n  useSecondaryTextBaseClassName,\n} from '../Tag/useTagStyles.styles';\n\nexport const interactionTagPrimaryClassNames: SlotClassNames<InteractionTagPrimarySlots> = {\n  root: 'fui-InteractionTagPrimary',\n  media: 'fui-InteractionTagPrimary__media',\n  icon: 'fui-InteractionTagPrimary__icon',\n  primaryText: 'fui-InteractionTagPrimary__primaryText',\n  secondaryText: 'fui-InteractionTagPrimary__secondaryText',\n};\n\nconst baseStyles: GriffelResetStyle = {\n  // reset default button style:\n  color: 'inherit',\n  fontFamily: 'inherit',\n  padding: '0px',\n  borderStyle: 'none',\n  appearance: 'button',\n  textAlign: 'unset',\n  backgroundColor: 'transparent',\n\n  display: 'inline-grid',\n  height: '100%',\n  alignItems: 'center',\n  gridTemplateAreas: `\n  \"media primary  \"\n  \"media secondary\"\n  `,\n\n  border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n  ...createCustomFocusIndicatorStyle({\n    outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n    zIndex: 1,\n  }),\n};\n\nconst useRootRoundedBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusMedium,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      top: '-1px',\n      left: '-1px',\n      right: '-1px',\n      bottom: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusMedium,\n      borderTopRightRadius: tokens.borderRadiusMedium,\n    },\n  },\n});\n\nconst useRootCircularBaseClassName = makeResetStyles({\n  ...baseStyles,\n  borderRadius: tokens.borderRadiusCircular,\n\n  /**\n   * Pseudo element to draw the border for windows high contrast mode -\n   * when Tag is with secondary text, primary text has negative margin that covers the border.\n   */\n  '@media (forced-colors: active)': {\n    position: 'relative',\n    '::before': {\n      content: '\"\"',\n      borderTop: `${tokens.strokeWidthThin} solid`,\n      borderLeft: `${tokens.strokeWidthThin} solid`,\n      position: 'absolute',\n      top: '-1px',\n      left: '-1px',\n      right: '-1px',\n      bottom: '-1px',\n      borderTopLeftRadius: tokens.borderRadiusCircular,\n      borderBottomLeftRadius: tokens.borderRadiusCircular,\n    },\n  },\n});\n\n/**\n * Style override for pseudo element that draws the border for windows high contrast mode\n */\nconst useRootCircularContrastStyles = makeStyles({\n  withoutSecondaryAction: {\n    '@media (forced-colors: active)': {\n      position: 'relative',\n      '::before': {\n        borderRight: `${tokens.strokeWidthThin} solid transparent`,\n        borderTopRightRadius: tokens.borderRadiusCircular,\n        borderBottomRightRadius: tokens.borderRadiusCircular,\n      },\n    },\n  },\n});\n\nconst useRootStyles = makeStyles({\n  filled: {\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorNeutralBackground3Hover,\n      color: tokens.colorNeutralForeground2Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground3Pressed,\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  outline: {\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      color: tokens.colorNeutralForeground2Hover,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  brand: {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ':hover': {\n      cursor: 'pointer',\n      backgroundColor: tokens.colorBrandBackground2Hover,\n      color: tokens.colorCompoundBrandForeground1Hover,\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackground2Pressed,\n      color: tokens.colorCompoundBrandForeground1Pressed,\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        backgroundColor: 'HighlightText',\n      },\n      ':active': {\n        backgroundColor: 'HighlightText',\n      },\n    },\n  },\n  selected: {\n    background: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorBrandStroke1),\n    '@media (forced-colors: active)': {\n      forcedColorAdjust: 'none',\n      backgroundColor: 'Highlight',\n      color: 'HighlightText',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n    ':active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      color: tokens.colorNeutralForegroundOnBrand,\n      [`& .${iconFilledClassName}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n      '@media (forced-colors: active)': {\n        backgroundColor: 'Highlight',\n        color: 'HighlightText',\n      },\n    },\n  },\n  medium: {\n    paddingRight: '7px',\n  },\n  small: {\n    paddingRight: '5px',\n  },\n  'extra-small': {\n    paddingRight: '5px',\n  },\n});\nconst useRootDisabledAppearances = makeStyles({\n  filled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n  outline: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n  },\n  brand: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    color: tokens.colorNeutralForegroundDisabled,\n    ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n  },\n});\n\n/**\n * Styles for InteractionTagPrimary without leading media/icon\n */\nconst useRootWithoutMediaStyles = makeStyles({\n  medium: {\n    paddingLeft: '7px',\n  },\n  small: {\n    paddingLeft: '5px',\n  },\n  'extra-small': {\n    paddingLeft: '5px',\n  },\n});\n/**\n * Styles for InteractionTagPrimary when InteractionTag has a Secondary button\n */\nconst useRootWithSecondaryActionStyles = makeStyles({\n  base: {\n    borderTopRightRadius: tokens.borderRadiusNone,\n    borderBottomRightRadius: tokens.borderRadiusNone,\n    borderRightStyle: 'none',\n    ...createCustomFocusIndicatorStyle({\n      borderTopRightRadius: tokens.borderRadiusNone,\n      borderBottomRightRadius: tokens.borderRadiusNone,\n    }),\n  },\n  medium: {\n    paddingRight: tokens.spacingHorizontalS,\n  },\n  small: {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n  'extra-small': {\n    paddingRight: tokens.spacingHorizontalSNudge,\n  },\n});\n\nexport const useInteractionTagPrimaryStyles_unstable = (\n  state: InteractionTagPrimaryState,\n): InteractionTagPrimaryState => {\n  'use no memo';\n\n  const rootRoundedBaseClassName = useRootRoundedBaseClassName();\n  const rootCircularBaseClassName = useRootCircularBaseClassName();\n  const rootStyles = useRootStyles();\n  const rootDisabledAppearances = useRootDisabledAppearances();\n  const rootWithoutMediaStyles = useRootWithoutMediaStyles();\n  const rootWithSecondaryActionStyles = useRootWithSecondaryActionStyles();\n\n  const iconStyles = useIconStyles();\n  const mediaStyles = useMediaStyles();\n  const primaryTextStyles = usePrimaryTextStyles();\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n\n  const rootCircularContrastStyles = useRootCircularContrastStyles();\n\n  const { disabled, shape, size, appearance, selected } = state;\n\n  state.root.className = mergeClasses(\n    interactionTagPrimaryClassNames.root,\n\n    shape === 'rounded' ? rootRoundedBaseClassName : rootCircularBaseClassName,\n\n    shape === 'circular' && !state.hasSecondaryAction && rootCircularContrastStyles.withoutSecondaryAction,\n\n    disabled ? rootDisabledAppearances[appearance] : rootStyles[appearance],\n    selected && !disabled && rootStyles.selected,\n    rootStyles[size],\n\n    !state.media && !state.icon && rootWithoutMediaStyles[size],\n    state.hasSecondaryAction && rootWithSecondaryActionStyles.base,\n    state.hasSecondaryAction && rootWithSecondaryActionStyles[size],\n\n    state.root.className,\n  );\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      interactionTagPrimaryClassNames.media,\n      mediaStyles.base,\n      mediaStyles[size],\n      state.media.className,\n    );\n  }\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      interactionTagPrimaryClassNames.icon,\n      iconStyles.base,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n  if (state.primaryText) {\n    state.primaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.primaryText,\n\n      primaryTextStyles.base,\n      primaryTextStyles[size],\n\n      state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,\n\n      state.primaryText.className,\n    );\n  }\n  if (state.secondaryText) {\n    state.secondaryText.className = mergeClasses(\n      interactionTagPrimaryClassNames.secondaryText,\n      secondaryTextBaseClassName,\n      state.secondaryText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","iconFilledClassName","iconRegularClassName","useIconStyles","useMediaStyles","usePrimaryTextStyles","useSecondaryTextBaseClassName","interactionTagPrimaryClassNames","root","media","icon","primaryText","secondaryText","baseStyles","color","fontFamily","padding","borderStyle","appearance","textAlign","backgroundColor","display","height","alignItems","gridTemplateAreas","border","strokeWidthThin","colorTransparentStroke","outline","strokeWidthThick","colorStrokeFocus2","zIndex","useRootRoundedBaseClassName","borderRadius","borderRadiusMedium","position","content","borderTop","top","left","right","bottom","borderTopLeftRadius","borderTopRightRadius","useRootCircularBaseClassName","borderRadiusCircular","borderLeft","borderBottomLeftRadius","useRootCircularContrastStyles","withoutSecondaryAction","borderRight","borderBottomRightRadius","useRootStyles","filled","colorNeutralBackground3","colorNeutralForeground2","cursor","colorNeutralBackground3Hover","colorNeutralForeground2Hover","colorNeutralBackground3Pressed","colorNeutralForeground2Pressed","colorSubtleBackground","borderColor","colorNeutralStroke1","colorSubtleBackgroundHover","colorNeutralForeground2BrandHover","colorSubtleBackgroundPressed","colorNeutralForeground2BrandPressed","brand","colorBrandBackground2","colorBrandForeground2","colorBrandBackground2Hover","colorCompoundBrandForeground1Hover","colorBrandBackground2Pressed","colorCompoundBrandForeground1Pressed","selected","background","colorBrandBackground","colorNeutralForegroundOnBrand","colorBrandStroke1","forcedColorAdjust","colorBrandBackgroundHover","colorBrandBackgroundPressed","medium","paddingRight","small","useRootDisabledAppearances","colorNeutralBackgroundDisabled","colorNeutralForegroundDisabled","colorTransparentStrokeDisabled","colorNeutralStrokeDisabled","useRootWithoutMediaStyles","paddingLeft","useRootWithSecondaryActionStyles","base","borderRadiusNone","borderRightStyle","spacingHorizontalS","spacingHorizontalSNudge","useInteractionTagPrimaryStyles_unstable","state","rootRoundedBaseClassName","rootCircularBaseClassName","rootStyles","rootDisabledAppearances","rootWithoutMediaStyles","rootWithSecondaryActionStyles","iconStyles","mediaStyles","primaryTextStyles","secondaryTextBaseClassName","rootCircularContrastStyles","disabled","shape","size","className","hasSecondaryAction","withSecondaryText","withoutSecondaryText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,179 @@
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const interactionTagSecondaryClassNames = {
+    root: 'fui-InteractionTagSecondary'
+};
+const mediumIconSize = '20px';
+const smallIconSize = '16px';
+const extraSmallIconSize = '12px';
+const useRootBaseClassName = makeResetStyles({
+    // reset default button style:
+    color: 'inherit',
+    fontFamily: 'inherit',
+    padding: '0px',
+    borderStyle: 'none',
+    appearance: 'button',
+    textAlign: 'unset',
+    backgroundColor: 'transparent',
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    ...createCustomFocusIndicatorStyle({
+        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`
+    }),
+    border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+    // divider:
+    borderLeftColor: tokens.colorNeutralStroke1,
+    borderTopLeftRadius: tokens.borderRadiusNone,
+    borderBottomLeftRadius: tokens.borderRadiusNone
+});
+const useRootStyles = makeStyles({
+    filled: {
+        backgroundColor: tokens.colorNeutralBackground3,
+        color: tokens.colorNeutralForeground2,
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorNeutralBackground3Hover,
+            color: tokens.colorNeutralForeground2BrandHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground3Pressed,
+            color: tokens.colorNeutralForeground2BrandPressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    outline: {
+        backgroundColor: tokens.colorSubtleBackground,
+        color: tokens.colorNeutralForeground2,
+        ...shorthands.borderColor(tokens.colorNeutralStroke1),
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorSubtleBackgroundHover,
+            color: tokens.colorNeutralForeground2BrandHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed,
+            color: tokens.colorNeutralForeground2BrandPressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    brand: {
+        backgroundColor: tokens.colorBrandBackground2,
+        color: tokens.colorBrandForeground2,
+        borderLeftColor: tokens.colorBrandStroke2,
+        ':hover': {
+            cursor: 'pointer',
+            backgroundColor: tokens.colorBrandBackground2Hover,
+            color: tokens.colorCompoundBrandForeground1Hover
+        },
+        ':active': {
+            backgroundColor: tokens.colorBrandBackground2Pressed,
+            color: tokens.colorCompoundBrandForeground1Pressed
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                backgroundColor: 'HighlightText'
+            },
+            ':active': {
+                backgroundColor: 'HighlightText'
+            }
+        }
+    },
+    selected: {
+        background: tokens.colorBrandBackground,
+        color: tokens.colorNeutralForegroundOnBrand,
+        ...shorthands.borderColor(tokens.colorBrandStroke1),
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'none',
+            backgroundColor: 'Highlight',
+            color: 'HighlightText'
+        },
+        ':hover': {
+            backgroundColor: tokens.colorBrandBackgroundHover,
+            color: tokens.colorNeutralForegroundOnBrand,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'HighlightText'
+            }
+        },
+        ':active': {
+            backgroundColor: tokens.colorBrandBackgroundPressed,
+            color: tokens.colorNeutralForegroundOnBrand,
+            '@media (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+                color: 'HighlightText'
+            }
+        },
+        // divider
+        borderLeftColor: tokens.colorNeutralStrokeOnBrand2
+    },
+    rounded: {
+        borderTopRightRadius: tokens.borderRadiusMedium,
+        borderBottomRightRadius: tokens.borderRadiusMedium
+    },
+    circular: {
+        borderTopRightRadius: tokens.borderRadiusCircular,
+        borderBottomRightRadius: tokens.borderRadiusCircular
+    },
+    medium: {
+        fontSize: mediumIconSize,
+        paddingLeft: '5px',
+        paddingRight: '5px'
+    },
+    small: {
+        fontSize: smallIconSize,
+        paddingLeft: '3px',
+        paddingRight: '3px'
+    },
+    'extra-small': {
+        fontSize: extraSmallIconSize,
+        paddingLeft: '5px',
+        paddingRight: '5px'
+    }
+});
+const useRootDisabledStyles = makeStyles({
+    filled: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+        borderLeftColor: tokens.colorNeutralStrokeDisabled
+    },
+    outline: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorSubtleBackground,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)
+    },
+    brand: {
+        cursor: 'not-allowed',
+        backgroundColor: tokens.colorNeutralBackgroundDisabled,
+        color: tokens.colorNeutralForegroundDisabled,
+        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),
+        borderLeftColor: tokens.colorNeutralStrokeDisabled
+    }
+});
+export const useInteractionTagSecondaryStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const rootDisabledStyles = useRootDisabledStyles();
+    const { disabled, selected, shape, size, appearance } = state;
+    state.root.className = mergeClasses(interactionTagSecondaryClassNames.root, rootBaseClassName, disabled ? rootDisabledStyles[appearance] : rootStyles[appearance], rootStyles[shape], rootStyles[size], selected && !disabled && rootStyles.selected, state.root.className);
+    return state;
+};

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

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