@fluentui/react-badge 9.5.2 → 9.5.3

package/CHANGELOG.md

@@ -1,18 +1,28 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Thu, 23 Apr 2026 11:59:54 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.3)
+
+Tue, 26 May 2026 09:34:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.5.2..@fluentui/react-badge_v9.5.3)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.2)
 
-Thu, 23 Apr 2026 11:59:54 GMT 
+Thu, 23 Apr 2026 14:21:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.5.1..@fluentui/react-badge_v9.5.2)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.1)
 

package/lib/components/Badge/useBadgeStyles.styles.js

@@ -325,6 +325,7 @@ export const useBadgeStyles_unstable = state => {
   const rootClassName = useRootClassName();
   const rootStyles = useRootStyles();
   const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
   const iconRootClassName = useIconRootClassName();
   const iconStyles = useIconStyles();
@@ -338,6 +339,7 @@ export const useBadgeStyles_unstable = state => {
         iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
       }
     }
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
   }
   return state;

package/lib/components/Badge/useBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n    root: 'fui-Badge',\n    icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n    height: '20px',\n    minWidth: '20px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    borderColor: tokens.colorTransparentStroke,\n    '::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        borderStyle: 'solid',\n        borderColor: 'inherit',\n        borderWidth: tokens.strokeWidthThin,\n        borderRadius: 'inherit'\n    }\n});\nconst useRootStyles = makeStyles({\n    fontSmallToTiny: {\n        ...typographyStyles.caption2Strong\n    },\n    // size\n    tiny: {\n        width: '6px',\n        height: '6px',\n        fontSize: '4px',\n        lineHeight: '4px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    'extra-small': {\n        width: '10px',\n        height: '10px',\n        fontSize: '6px',\n        lineHeight: '6px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    small: {\n        minWidth: '16px',\n        height: '16px',\n        padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    medium: {\n    },\n    large: {\n        minWidth: '24px',\n        height: '24px',\n        padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    'extra-large': {\n        minWidth: '32px',\n        height: '32px',\n        padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n    },\n    // shape\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    roundedSmallToTiny: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    circular: {\n    },\n    // hide the boder when appearance is \"ghost\"\n    borderGhost: {\n        // The border is applied in an ::after pseudo-element because it should not affect layout.\n        // The padding and size of the badge should be the same regardless of whether or not it has a border.\n        '::after': {\n            display: 'none'\n        }\n    },\n    // appearance: filled\n    filled: {\n    },\n    'filled-brand': {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-important': {\n        backgroundColor: tokens.colorNeutralForeground1,\n        color: tokens.colorNeutralBackground1\n    },\n    'filled-informative': {\n        backgroundColor: tokens.colorNeutralBackground5,\n        color: tokens.colorNeutralForeground3\n    },\n    'filled-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1\n    },\n    'filled-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground3,\n        color: tokens.colorNeutralForeground1Static\n    },\n    // appearance: ghost\n    ghost: {\n    },\n    'ghost-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'ghost-danger': {\n        color: tokens.colorPaletteRedForeground3\n    },\n    'ghost-important': {\n        color: tokens.colorNeutralForeground1\n    },\n    'ghost-informative': {\n        color: tokens.colorNeutralForeground3\n    },\n    'ghost-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'ghost-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'ghost-success': {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    'ghost-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: outline\n    outline: {\n        ...shorthands.borderColor('currentColor')\n    },\n    'outline-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'outline-danger': {\n        color: tokens.colorPaletteRedForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n    },\n    'outline-important': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n    },\n    'outline-informative': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'outline-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'outline-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'outline-success': {\n        color: tokens.colorPaletteGreenForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n    },\n    'outline-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: tint\n    tint: {\n    },\n    'tint-brand': {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ...shorthands.borderColor(tokens.colorBrandStroke2)\n    },\n    'tint-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground1,\n        color: tokens.colorPaletteRedForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n    },\n    'tint-important': {\n        backgroundColor: tokens.colorNeutralForeground3,\n        color: tokens.colorNeutralBackground1,\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    'tint-informative': {\n        backgroundColor: tokens.colorNeutralBackground4,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n        color: tokens.colorPaletteDarkOrangeForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n    },\n    'tint-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground1,\n        color: tokens.colorPaletteGreenForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n    },\n    'tint-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground1,\n        color: tokens.colorPaletteYellowForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n    }\n});\nconst useIconRootClassName = makeResetStyles({\n    display: 'flex',\n    lineHeight: '1',\n    margin: `0 calc(-1 * ${textPadding})`,\n    fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n    beforeText: {\n        marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    afterText: {\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    beforeTextXL: {\n        marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    afterTextXL: {\n        marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    // size\n    tiny: {\n        fontSize: '6px'\n    },\n    'extra-small': {\n        fontSize: '10px'\n    },\n    small: {\n        fontSize: '12px'\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '16px'\n    },\n    'extra-large': {\n        fontSize: '20px'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const rootStyles = useRootStyles();\n    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n    state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n    const iconRootClassName = useIconRootClassName();\n    const iconStyles = useIconStyles();\n    if (state.icon) {\n        let iconPositionClass;\n        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n        if (React.Children.toArray(state.root.children).length > 0) {\n            if (state.size === 'extra-large') {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n            } else {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n            }\n        }\n        state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"sources":["useBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n    root: 'fui-Badge',\n    icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n    height: '20px',\n    minWidth: '20px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    borderColor: tokens.colorTransparentStroke,\n    '::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        borderStyle: 'solid',\n        borderColor: 'inherit',\n        borderWidth: tokens.strokeWidthThin,\n        borderRadius: 'inherit'\n    }\n});\nconst useRootStyles = makeStyles({\n    fontSmallToTiny: {\n        ...typographyStyles.caption2Strong\n    },\n    // size\n    tiny: {\n        width: '6px',\n        height: '6px',\n        fontSize: '4px',\n        lineHeight: '4px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    'extra-small': {\n        width: '10px',\n        height: '10px',\n        fontSize: '6px',\n        lineHeight: '6px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    small: {\n        minWidth: '16px',\n        height: '16px',\n        padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    medium: {\n    },\n    large: {\n        minWidth: '24px',\n        height: '24px',\n        padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    'extra-large': {\n        minWidth: '32px',\n        height: '32px',\n        padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n    },\n    // shape\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    roundedSmallToTiny: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    circular: {\n    },\n    // hide the boder when appearance is \"ghost\"\n    borderGhost: {\n        // The border is applied in an ::after pseudo-element because it should not affect layout.\n        // The padding and size of the badge should be the same regardless of whether or not it has a border.\n        '::after': {\n            display: 'none'\n        }\n    },\n    // appearance: filled\n    filled: {\n    },\n    'filled-brand': {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-important': {\n        backgroundColor: tokens.colorNeutralForeground1,\n        color: tokens.colorNeutralBackground1\n    },\n    'filled-informative': {\n        backgroundColor: tokens.colorNeutralBackground5,\n        color: tokens.colorNeutralForeground3\n    },\n    'filled-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1\n    },\n    'filled-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground3,\n        color: tokens.colorNeutralForeground1Static\n    },\n    // appearance: ghost\n    ghost: {\n    },\n    'ghost-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'ghost-danger': {\n        color: tokens.colorPaletteRedForeground3\n    },\n    'ghost-important': {\n        color: tokens.colorNeutralForeground1\n    },\n    'ghost-informative': {\n        color: tokens.colorNeutralForeground3\n    },\n    'ghost-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'ghost-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'ghost-success': {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    'ghost-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: outline\n    outline: {\n        ...shorthands.borderColor('currentColor')\n    },\n    'outline-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'outline-danger': {\n        color: tokens.colorPaletteRedForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n    },\n    'outline-important': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n    },\n    'outline-informative': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'outline-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'outline-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'outline-success': {\n        color: tokens.colorPaletteGreenForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n    },\n    'outline-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: tint\n    tint: {\n    },\n    'tint-brand': {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ...shorthands.borderColor(tokens.colorBrandStroke2)\n    },\n    'tint-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground1,\n        color: tokens.colorPaletteRedForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n    },\n    'tint-important': {\n        backgroundColor: tokens.colorNeutralForeground3,\n        color: tokens.colorNeutralBackground1,\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    'tint-informative': {\n        backgroundColor: tokens.colorNeutralBackground4,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n        color: tokens.colorPaletteDarkOrangeForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n    },\n    'tint-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground1,\n        color: tokens.colorPaletteGreenForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n    },\n    'tint-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground1,\n        color: tokens.colorPaletteYellowForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n    }\n});\nconst useIconRootClassName = makeResetStyles({\n    display: 'flex',\n    lineHeight: '1',\n    margin: `0 calc(-1 * ${textPadding})`,\n    fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n    beforeText: {\n        marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    afterText: {\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    beforeTextXL: {\n        marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    afterTextXL: {\n        marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    // size\n    tiny: {\n        fontSize: '6px'\n    },\n    'extra-small': {\n        fontSize: '10px'\n    },\n    small: {\n        fontSize: '12px'\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '16px'\n    },\n    'extra-large': {\n        fontSize: '20px'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const rootStyles = useRootStyles();\n    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n    const iconRootClassName = useIconRootClassName();\n    const iconStyles = useIconStyles();\n    if (state.icon) {\n        let iconPositionClass;\n        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n        if (React.Children.toArray(state.root.children).length > 0) {\n            if (state.size === 'extra-large') {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n            } else {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n            }\n        }\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Badge/useBadgeStyles.styles.raw.js

@@ -276,6 +276,7 @@ const useIconStyles = makeStyles({
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
     const iconRootClassName = useIconRootClassName();
     const iconStyles = useIconStyles();
@@ -289,6 +290,7 @@ const useIconStyles = makeStyles({
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
             }
         }
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
     }
     return state;

package/lib/components/Badge/useBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n  },\n\n  // shape\n\n  square: { borderRadius: tokens.borderRadiusNone },\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n  circular: {\n    // Set by useRootClassName\n  },\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    // Set by useIconRootClassName\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n    if (React.Children.toArray(state.root.children).length > 0) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n  },\n\n  // shape\n\n  square: { borderRadius: tokens.borderRadiusNone },\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n  circular: {\n    // Set by useRootClassName\n  },\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    // Set by useIconRootClassName\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n    if (React.Children.toArray(state.root.children).length > 0) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}

package/lib/components/CounterBadge/useCounterBadgeStyles.styles.js

@@ -32,8 +32,10 @@ export const useCounterBadgeStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
   }
   return useBadgeStyles_unstable(state);

package/lib/components/CounterBadge/useCounterBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;IACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC1F;EACA,OAAOrB,uBAAuB,CAACmB,KAAK,CAAC;AACzC,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B;EACAe,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;IACZ;IACAgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC1F;EACA,OAAOrB,uBAAuB,CAACmB,KAAK,CAAC;AACzC,CAAC","ignoreList":[]}

package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js

@@ -21,8 +21,10 @@ const useStyles = makeStyles({
  */ export const useCounterBadgeStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
     }
     return useBadgeStyles_unstable(state);

package/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,QAAQ,iCAAiC;AAKzE,OAAO,MAAMC,yBAAqD;IAChEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGjB,aAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOf,wBAAwBa;AACjC,EAAE"}
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,QAAQ,iCAAiC;AAKzE,OAAO,MAAMC,yBAAqD;IAChEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASV;IACf,oDAAoD;IACpDS,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACd,oDAAoD;QACpDU,MAAMV,IAAI,CAACY,SAAS,GAAGjB,aAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOf,wBAAwBa;AACjC,EAAE"}

package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js

@@ -77,8 +77,10 @@ export const usePresenceBadgeStyles_unstable = state => {
   const iconClassName = useIconClassName();
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
   }
   return state;

package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n    root: 'fui-PresenceBadge',\n    icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n        return true;\n    }\n    return false;\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorNeutralBackground1,\n    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n    // (* except size=\"tiny\", where backgroundClip is unset)\n    padding: '1px',\n    backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n    display: 'flex',\n    margin: '-1px'\n});\nconst useStyles = makeStyles({\n    statusBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    statusAway: {\n        color: tokens.colorPaletteMarigoldBackground3\n    },\n    statusAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    statusOffline: {\n        color: tokens.colorNeutralForeground3\n    },\n    statusOutOfOffice: {\n        color: tokens.colorPaletteBerryForeground3\n    },\n    statusUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    outOfOffice: {\n        color: tokens.colorNeutralBackground1\n    },\n    outOfOfficeAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    outOfOfficeBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    outOfOfficeUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    // Icons are not resizeable, and these sizes are currently missing\n    // use `!important` to size the currently available icons to the missing ones\n    //\n    tiny: {\n        aspectRatio: '1',\n        width: '6px',\n        backgroundClip: 'unset',\n        '& svg': {\n            width: '6px !important',\n            height: '6px !important'\n        }\n    },\n    large: {\n        aspectRatio: '1',\n        width: '20px',\n        '& svg': {\n            width: '20px !important',\n            height: '20px !important'\n        }\n    },\n    extraLarge: {\n        aspectRatio: '1',\n        width: '28px',\n        '& svg': {\n            width: '28px !important',\n            height: '28px !important'\n        }\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const iconClassName = useIconClassName();\n    const styles = useStyles();\n    const isBusy = getIsBusy(state.status);\n    state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n    root: 'fui-PresenceBadge',\n    icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n        return true;\n    }\n    return false;\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorNeutralBackground1,\n    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n    // (* except size=\"tiny\", where backgroundClip is unset)\n    padding: '1px',\n    backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n    display: 'flex',\n    margin: '-1px'\n});\nconst useStyles = makeStyles({\n    statusBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    statusAway: {\n        color: tokens.colorPaletteMarigoldBackground3\n    },\n    statusAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    statusOffline: {\n        color: tokens.colorNeutralForeground3\n    },\n    statusOutOfOffice: {\n        color: tokens.colorPaletteBerryForeground3\n    },\n    statusUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    outOfOffice: {\n        color: tokens.colorNeutralBackground1\n    },\n    outOfOfficeAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    outOfOfficeBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    outOfOfficeUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    // Icons are not resizeable, and these sizes are currently missing\n    // use `!important` to size the currently available icons to the missing ones\n    //\n    tiny: {\n        aspectRatio: '1',\n        width: '6px',\n        backgroundClip: 'unset',\n        '& svg': {\n            width: '6px !important',\n            height: '6px !important'\n        }\n    },\n    large: {\n        aspectRatio: '1',\n        width: '20px',\n        '& svg': {\n            width: '20px !important',\n            height: '20px !important'\n        }\n    },\n    extraLarge: {\n        aspectRatio: '1',\n        width: '28px',\n        '& svg': {\n            width: '28px !important',\n            height: '28px !important'\n        }\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const iconClassName = useIconClassName();\n    const styles = useStyles();\n    const isBusy = getIsBusy(state.status);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js

@@ -97,8 +97,10 @@ const useStyles = makeStyles({
     const iconClassName = useIconClassName();
     const styles = useStyles();
     const isBusy = getIsBusy(state.status);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
     }
     return state;

package/lib/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n\n  // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n  // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n  // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n  // (* except size=\"tiny\", where backgroundClip is unset)\n  padding: '1px',\n  backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n  display: 'flex',\n  margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  statusUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const iconClassName = useIconClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.status === 'unknown' && styles.statusUnknown,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice &&\n      (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n      styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","display","boxSizing","alignItems","justifyContent","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}
+{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n\n  // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n  // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n  // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n  // (* except size=\"tiny\", where backgroundClip is unset)\n  padding: '1px',\n  backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n  display: 'flex',\n  margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  statusUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const iconClassName = useIconClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.status === 'unknown' && styles.statusUnknown,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice &&\n      (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n      styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","display","boxSizing","alignItems","justifyContent","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}

package/lib-commonjs/components/Badge/useBadgeStyles.styles.js

@@ -574,6 +574,7 @@ const useBadgeStyles_unstable = (state)=>{
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
     const iconRootClassName = useIconRootClassName();
     const iconStyles = useIconStyles();
@@ -587,6 +588,7 @@ const useBadgeStyles_unstable = (state)=>{
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
             }
         }
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/Badge/useBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n    root: 'fui-Badge',\n    icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n    height: '20px',\n    minWidth: '20px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    borderColor: tokens.colorTransparentStroke,\n    '::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        borderStyle: 'solid',\n        borderColor: 'inherit',\n        borderWidth: tokens.strokeWidthThin,\n        borderRadius: 'inherit'\n    }\n});\nconst useRootStyles = makeStyles({\n    fontSmallToTiny: {\n        ...typographyStyles.caption2Strong\n    },\n    // size\n    tiny: {\n        width: '6px',\n        height: '6px',\n        fontSize: '4px',\n        lineHeight: '4px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    'extra-small': {\n        width: '10px',\n        height: '10px',\n        fontSize: '6px',\n        lineHeight: '6px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    small: {\n        minWidth: '16px',\n        height: '16px',\n        padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    medium: {\n    },\n    large: {\n        minWidth: '24px',\n        height: '24px',\n        padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    'extra-large': {\n        minWidth: '32px',\n        height: '32px',\n        padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n    },\n    // shape\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    roundedSmallToTiny: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    circular: {\n    },\n    // hide the boder when appearance is \"ghost\"\n    borderGhost: {\n        // The border is applied in an ::after pseudo-element because it should not affect layout.\n        // The padding and size of the badge should be the same regardless of whether or not it has a border.\n        '::after': {\n            display: 'none'\n        }\n    },\n    // appearance: filled\n    filled: {\n    },\n    'filled-brand': {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-important': {\n        backgroundColor: tokens.colorNeutralForeground1,\n        color: tokens.colorNeutralBackground1\n    },\n    'filled-informative': {\n        backgroundColor: tokens.colorNeutralBackground5,\n        color: tokens.colorNeutralForeground3\n    },\n    'filled-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1\n    },\n    'filled-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground3,\n        color: tokens.colorNeutralForeground1Static\n    },\n    // appearance: ghost\n    ghost: {\n    },\n    'ghost-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'ghost-danger': {\n        color: tokens.colorPaletteRedForeground3\n    },\n    'ghost-important': {\n        color: tokens.colorNeutralForeground1\n    },\n    'ghost-informative': {\n        color: tokens.colorNeutralForeground3\n    },\n    'ghost-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'ghost-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'ghost-success': {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    'ghost-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: outline\n    outline: {\n        ...shorthands.borderColor('currentColor')\n    },\n    'outline-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'outline-danger': {\n        color: tokens.colorPaletteRedForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n    },\n    'outline-important': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n    },\n    'outline-informative': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'outline-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'outline-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'outline-success': {\n        color: tokens.colorPaletteGreenForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n    },\n    'outline-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: tint\n    tint: {\n    },\n    'tint-brand': {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ...shorthands.borderColor(tokens.colorBrandStroke2)\n    },\n    'tint-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground1,\n        color: tokens.colorPaletteRedForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n    },\n    'tint-important': {\n        backgroundColor: tokens.colorNeutralForeground3,\n        color: tokens.colorNeutralBackground1,\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    'tint-informative': {\n        backgroundColor: tokens.colorNeutralBackground4,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n        color: tokens.colorPaletteDarkOrangeForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n    },\n    'tint-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground1,\n        color: tokens.colorPaletteGreenForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n    },\n    'tint-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground1,\n        color: tokens.colorPaletteYellowForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n    }\n});\nconst useIconRootClassName = makeResetStyles({\n    display: 'flex',\n    lineHeight: '1',\n    margin: `0 calc(-1 * ${textPadding})`,\n    fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n    beforeText: {\n        marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    afterText: {\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    beforeTextXL: {\n        marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    afterTextXL: {\n        marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    // size\n    tiny: {\n        fontSize: '6px'\n    },\n    'extra-small': {\n        fontSize: '10px'\n    },\n    small: {\n        fontSize: '12px'\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '16px'\n    },\n    'extra-large': {\n        fontSize: '20px'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const rootStyles = useRootStyles();\n    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n    state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n    const iconRootClassName = useIconRootClassName();\n    const iconStyles = useIconStyles();\n    if (state.icon) {\n        let iconPositionClass;\n        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n        if (React.Children.toArray(state.root.children).length > 0) {\n            if (state.size === 'extra-large') {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n            } else {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n            }\n        }\n        state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n    }\n    return state;\n};\n"],"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}
+{"version":3,"sources":["useBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const badgeClassNames = {\n    root: 'fui-Badge',\n    icon: 'fui-Badge__icon'\n};\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n    height: '20px',\n    minWidth: '20px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n    borderRadius: tokens.borderRadiusCircular,\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    borderColor: tokens.colorTransparentStroke,\n    '::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        borderStyle: 'solid',\n        borderColor: 'inherit',\n        borderWidth: tokens.strokeWidthThin,\n        borderRadius: 'inherit'\n    }\n});\nconst useRootStyles = makeStyles({\n    fontSmallToTiny: {\n        ...typographyStyles.caption2Strong\n    },\n    // size\n    tiny: {\n        width: '6px',\n        height: '6px',\n        fontSize: '4px',\n        lineHeight: '4px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    'extra-small': {\n        width: '10px',\n        height: '10px',\n        fontSize: '6px',\n        lineHeight: '6px',\n        minWidth: 'unset',\n        padding: 'unset'\n    },\n    small: {\n        minWidth: '16px',\n        height: '16px',\n        padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    medium: {\n    },\n    large: {\n        minWidth: '24px',\n        height: '24px',\n        padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    'extra-large': {\n        minWidth: '32px',\n        height: '32px',\n        padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`\n    },\n    // shape\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    },\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    roundedSmallToTiny: {\n        borderRadius: tokens.borderRadiusSmall\n    },\n    circular: {\n    },\n    // hide the boder when appearance is \"ghost\"\n    borderGhost: {\n        // The border is applied in an ::after pseudo-element because it should not affect layout.\n        // The padding and size of the badge should be the same regardless of whether or not it has a border.\n        '::after': {\n            display: 'none'\n        }\n    },\n    // appearance: filled\n    filled: {\n    },\n    'filled-brand': {\n        backgroundColor: tokens.colorBrandBackground,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-important': {\n        backgroundColor: tokens.colorNeutralForeground1,\n        color: tokens.colorNeutralBackground1\n    },\n    'filled-informative': {\n        backgroundColor: tokens.colorNeutralBackground5,\n        color: tokens.colorNeutralForeground3\n    },\n    'filled-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1\n    },\n    'filled-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground3,\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    'filled-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground3,\n        color: tokens.colorNeutralForeground1Static\n    },\n    // appearance: ghost\n    ghost: {\n    },\n    'ghost-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'ghost-danger': {\n        color: tokens.colorPaletteRedForeground3\n    },\n    'ghost-important': {\n        color: tokens.colorNeutralForeground1\n    },\n    'ghost-informative': {\n        color: tokens.colorNeutralForeground3\n    },\n    'ghost-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'ghost-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'ghost-success': {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    'ghost-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: outline\n    outline: {\n        ...shorthands.borderColor('currentColor')\n    },\n    'outline-brand': {\n        color: tokens.colorBrandForeground1\n    },\n    'outline-danger': {\n        color: tokens.colorPaletteRedForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n    },\n    'outline-important': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)\n    },\n    'outline-informative': {\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'outline-severe': {\n        color: tokens.colorPaletteDarkOrangeForeground3\n    },\n    'outline-subtle': {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'outline-success': {\n        color: tokens.colorPaletteGreenForeground3,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder2)\n    },\n    'outline-warning': {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    // appearance: tint\n    tint: {\n    },\n    'tint-brand': {\n        backgroundColor: tokens.colorBrandBackground2,\n        color: tokens.colorBrandForeground2,\n        ...shorthands.borderColor(tokens.colorBrandStroke2)\n    },\n    'tint-danger': {\n        backgroundColor: tokens.colorPaletteRedBackground1,\n        color: tokens.colorPaletteRedForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteRedBorder1)\n    },\n    'tint-important': {\n        backgroundColor: tokens.colorNeutralForeground3,\n        color: tokens.colorNeutralBackground1,\n        ...shorthands.borderColor(tokens.colorTransparentStroke)\n    },\n    'tint-informative': {\n        backgroundColor: tokens.colorNeutralBackground4,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-severe': {\n        backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n        color: tokens.colorPaletteDarkOrangeForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)\n    },\n    'tint-subtle': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.borderColor(tokens.colorNeutralStroke2)\n    },\n    'tint-success': {\n        backgroundColor: tokens.colorPaletteGreenBackground1,\n        color: tokens.colorPaletteGreenForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteGreenBorder1)\n    },\n    'tint-warning': {\n        backgroundColor: tokens.colorPaletteYellowBackground1,\n        color: tokens.colorPaletteYellowForeground1,\n        ...shorthands.borderColor(tokens.colorPaletteYellowBorder1)\n    }\n});\nconst useIconRootClassName = makeResetStyles({\n    display: 'flex',\n    lineHeight: '1',\n    margin: `0 calc(-1 * ${textPadding})`,\n    fontSize: '12px'\n});\nconst useIconStyles = makeStyles({\n    beforeText: {\n        marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    afterText: {\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`\n    },\n    beforeTextXL: {\n        marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    afterTextXL: {\n        marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`\n    },\n    // size\n    tiny: {\n        fontSize: '6px'\n    },\n    'extra-small': {\n        fontSize: '10px'\n    },\n    small: {\n        fontSize: '12px'\n    },\n    medium: {\n    },\n    large: {\n        fontSize: '16px'\n    },\n    'extra-large': {\n        fontSize: '20px'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const rootStyles = useRootStyles();\n    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);\n    const iconRootClassName = useIconRootClassName();\n    const iconStyles = useIconStyles();\n    if (state.icon) {\n        let iconPositionClass;\n        // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n        if (React.Children.toArray(state.root.children).length > 0) {\n            if (state.size === 'extra-large') {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n            } else {\n                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n            }\n        }\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);\n    }\n    return state;\n};\n"],"names":["React","shorthands","__resetStyles","__styles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","useRootStyles","fontSmallToTiny","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","tiny","a9b677","Bqenvij","Bf4jedk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","small","medium","large","square","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","rounded","roundedSmallToTiny","circular","borderGhost","ap17g6","filled","De3pzq","sj55zd","ghost","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","tint","d","p","useIconRootClassName","useIconStyles","beforeText","t21cq0","afterText","Frg6f3","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","color","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}

package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js

@@ -287,6 +287,7 @@ const useBadgeStyles_unstable = (state)=>{
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
     const iconRootClassName = useIconRootClassName();
     const iconStyles = useIconStyles();
@@ -300,6 +301,7 @@ const useBadgeStyles_unstable = (state)=>{
                 iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
             }
         }
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/Badge/useBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n  },\n\n  // shape\n\n  square: { borderRadius: tokens.borderRadiusNone },\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n  circular: {\n    // Set by useRootClassName\n  },\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    // Set by useIconRootClassName\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n    if (React.Children.toArray(state.root.children).length > 0) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { BadgeSlots, BadgeState } from './Badge.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const badgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-Badge',\n  icon: 'fui-Badge__icon',\n};\n\n// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.\n// Instead, add extra padding to the root, and a negative margin on the icon to \"remove\" the extra padding on the icon.\nconst textPadding = tokens.spacingHorizontalXXS;\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'relative',\n  ...typographyStyles.caption1Strong,\n  height: '20px',\n  minWidth: '20px',\n  padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  borderRadius: tokens.borderRadiusCircular,\n  // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n  borderColor: tokens.colorTransparentStroke,\n\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0,\n    borderStyle: 'solid',\n    borderColor: 'inherit',\n    borderWidth: tokens.strokeWidthThin,\n    borderRadius: 'inherit',\n  },\n});\n\nconst useRootStyles = makeStyles({\n  fontSmallToTiny: {\n    ...typographyStyles.caption2Strong,\n  },\n\n  // size\n\n  tiny: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n    lineHeight: '4px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n    minWidth: 'unset',\n    padding: 'unset',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  medium: {\n    // Set by useRootClassName\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,\n  },\n\n  // shape\n\n  square: { borderRadius: tokens.borderRadiusNone },\n  rounded: { borderRadius: tokens.borderRadiusMedium },\n  roundedSmallToTiny: { borderRadius: tokens.borderRadiusSmall },\n  circular: {\n    // Set by useRootClassName\n  },\n  // hide the boder when appearance is \"ghost\"\n\n  borderGhost: {\n    // The border is applied in an ::after pseudo-element because it should not affect layout.\n    // The padding and size of the badge should be the same regardless of whether or not it has a border.\n    '::after': {\n      display: 'none',\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Set by useRootClassName\n  },\n  'filled-brand': {\n    backgroundColor: tokens.colorBrandBackground,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-important': {\n    backgroundColor: tokens.colorNeutralForeground1,\n    color: tokens.colorNeutralBackground1,\n  },\n  'filled-informative': {\n    backgroundColor: tokens.colorNeutralBackground5,\n    color: tokens.colorNeutralForeground3,\n  },\n  'filled-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n  },\n  'filled-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n    color: tokens.colorNeutralForegroundOnBrand,\n  },\n  'filled-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground3,\n    color: tokens.colorNeutralForeground1Static,\n  },\n\n  // appearance: ghost\n\n  ghost: {\n    // No shared colors between ghost appearances\n  },\n  'ghost-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'ghost-danger': {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  'ghost-important': {\n    color: tokens.colorNeutralForeground1,\n  },\n  'ghost-informative': {\n    color: tokens.colorNeutralForeground3,\n  },\n  'ghost-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'ghost-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'ghost-success': {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  'ghost-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: outline\n\n  outline: {\n    ...shorthands.borderColor('currentColor'),\n  },\n  'outline-brand': {\n    color: tokens.colorBrandForeground1,\n  },\n  'outline-danger': {\n    color: tokens.colorPaletteRedForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n  },\n  'outline-important': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n  },\n  'outline-informative': {\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'outline-severe': {\n    color: tokens.colorPaletteDarkOrangeForeground3,\n  },\n  'outline-subtle': {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n  'outline-success': {\n    color: tokens.colorPaletteGreenForeground3,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder2),\n  },\n  'outline-warning': {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n\n  // appearance: tint\n\n  tint: {\n    // No shared colors between tint appearances\n  },\n  'tint-brand': {\n    backgroundColor: tokens.colorBrandBackground2,\n    color: tokens.colorBrandForeground2,\n    ...shorthands.borderColor(tokens.colorBrandStroke2),\n  },\n  'tint-danger': {\n    backgroundColor: tokens.colorPaletteRedBackground1,\n    color: tokens.colorPaletteRedForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),\n  },\n  'tint-important': {\n    backgroundColor: tokens.colorNeutralForeground3,\n    color: tokens.colorNeutralBackground1,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n  },\n  'tint-informative': {\n    backgroundColor: tokens.colorNeutralBackground4,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-severe': {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground1,\n    color: tokens.colorPaletteDarkOrangeForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1),\n  },\n  'tint-subtle': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.borderColor(tokens.colorNeutralStroke2),\n  },\n  'tint-success': {\n    backgroundColor: tokens.colorPaletteGreenBackground1,\n    color: tokens.colorPaletteGreenForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),\n  },\n  'tint-warning': {\n    backgroundColor: tokens.colorPaletteYellowBackground1,\n    color: tokens.colorPaletteYellowForeground1,\n    ...shorthands.borderColor(tokens.colorPaletteYellowBorder1),\n  },\n});\n\nconst useIconRootClassName = makeResetStyles({\n  display: 'flex',\n  lineHeight: '1',\n  margin: `0 calc(-1 * ${textPadding})`, // Remove text padding added to root\n  fontSize: '12px',\n});\n\nconst useIconStyles = makeStyles({\n  beforeText: {\n    marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n  afterText: {\n    marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`,\n  },\n\n  beforeTextXL: {\n    marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n  afterTextXL: {\n    marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`,\n  },\n\n  // size\n\n  tiny: {\n    fontSize: '6px',\n  },\n  'extra-small': {\n    fontSize: '10px',\n  },\n  small: {\n    fontSize: '12px',\n  },\n  medium: {\n    // Set by useIconRootClassName\n  },\n  large: {\n    fontSize: '16px',\n  },\n  'extra-large': {\n    fontSize: '20px',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const rootStyles = useRootStyles();\n\n  const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    badgeClassNames.root,\n    rootClassName,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance === 'ghost' && rootStyles.borderGhost,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\n  const iconRootClassName = useIconRootClassName();\n  const iconStyles = useIconStyles();\n  if (state.icon) {\n    let iconPositionClass;\n    // Handle the edge case where children is 0 (a falsy value that should still render text and have margin)\n    if (React.Children.toArray(state.root.children).length > 0) {\n      if (state.size === 'extra-large') {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;\n      } else {\n        iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;\n      }\n    }\n\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(\n      badgeClassNames.icon,\n      iconRootClassName,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["React","shorthands","makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","badgeClassNames","root","icon","textPadding","spacingHorizontalXXS","useRootClassName","display","boxSizing","alignItems","justifyContent","position","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","fontSmallToTiny","caption2Strong","tiny","width","fontSize","lineHeight","small","medium","large","spacingHorizontalSNudge","square","borderRadiusNone","rounded","borderRadiusMedium","roundedSmallToTiny","borderRadiusSmall","circular","borderGhost","filled","backgroundColor","colorBrandBackground","color","colorNeutralForegroundOnBrand","colorPaletteRedBackground3","colorNeutralForeground1","colorNeutralBackground1","colorNeutralBackground5","colorNeutralForeground3","colorPaletteDarkOrangeBackground3","colorPaletteGreenBackground3","colorPaletteYellowBackground3","colorNeutralForeground1Static","ghost","colorBrandForeground1","colorPaletteRedForeground3","colorPaletteDarkOrangeForeground3","colorNeutralForegroundStaticInverted","colorPaletteGreenForeground3","colorPaletteYellowForeground2","outline","colorPaletteRedBorder2","colorNeutralStrokeAccessible","colorNeutralStroke2","colorPaletteGreenBorder2","tint","colorBrandBackground2","colorBrandForeground2","colorBrandStroke2","colorPaletteRedBackground1","colorPaletteRedForeground1","colorPaletteRedBorder1","colorNeutralBackground4","colorPaletteDarkOrangeBackground1","colorPaletteDarkOrangeForeground1","colorPaletteDarkOrangeBorder1","colorPaletteGreenBackground1","colorPaletteGreenForeground1","colorPaletteGreenBorder1","colorPaletteYellowBackground1","colorPaletteYellowForeground1","colorPaletteYellowBorder1","useIconRootClassName","margin","useIconStyles","beforeText","marginRight","afterText","marginLeft","beforeTextXL","afterTextXL","useBadgeStyles_unstable","state","rootClassName","rootStyles","smallToTiny","size","className","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","Children","toArray","children","length","iconPosition"],"mappings":"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"}

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.js

@@ -54,8 +54,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useCounterBadgeStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
     }
     return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAiBY;eAA9BiB;;;uBAnBwB,gBAAgB;sCACjB,gCAAgC;AACjE,+BAA+B;IAClChB,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;QACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC1F;IACA,WAAOrB,6CAAuB,EAACmB,KAAK,CAAC;AACzC,CAAC"}
+{"version":3,"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAiBY;eAA9BiB;;;uBAnBwB,gBAAgB;sCACjB,gCAAgC;AACjE,+BAA+B;IAClChB,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAe,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;QACZ,oDAAA;QACAgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC1F;IACA,WAAOrB,6CAAuB,EAACmB,KAAK,CAAC;AACzC,CAAC"}

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js

@@ -37,8 +37,10 @@ const useStyles = (0, _react.makeStyles)({
 const useCounterBadgeStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
     }
     return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);

package/lib-commonjs/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,sBAAAA;;;kCAoBAW;eAAAA;;;uBA1B4B,iBAAiB;sCAClB,iCAAiC;AAKlE,+BAA2D;IAChEV,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,OAAGjB,mBAAAA,EAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,WAAOf,6CAAAA,EAAwBa;AACjC,EAAE"}
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,sBAAAA;;;kCAoBAW;eAAAA;;;uBA1B4B,iBAAiB;sCAClB,iCAAiC;AAKlE,+BAA2D;IAChEV,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAMC,SAASV;IACf,oDAAoD;IACpDS,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACd,oDAAoD;QACpDU,MAAMV,IAAI,CAACY,SAAS,OAAGjB,mBAAAA,EAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,WAAOf,6CAAAA,EAAwBa;AACjC,EAAE"}

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js

@@ -111,8 +111,10 @@ const usePresenceBadgeStyles_unstable = (state)=>{
     const iconClassName = useIconClassName();
     const styles = useStyles();
     const isBusy = getIsBusy(state.status);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
     }
     return state;

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n    root: 'fui-PresenceBadge',\n    icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n        return true;\n    }\n    return false;\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorNeutralBackground1,\n    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n    // (* except size=\"tiny\", where backgroundClip is unset)\n    padding: '1px',\n    backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n    display: 'flex',\n    margin: '-1px'\n});\nconst useStyles = makeStyles({\n    statusBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    statusAway: {\n        color: tokens.colorPaletteMarigoldBackground3\n    },\n    statusAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    statusOffline: {\n        color: tokens.colorNeutralForeground3\n    },\n    statusOutOfOffice: {\n        color: tokens.colorPaletteBerryForeground3\n    },\n    statusUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    outOfOffice: {\n        color: tokens.colorNeutralBackground1\n    },\n    outOfOfficeAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    outOfOfficeBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    outOfOfficeUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    // Icons are not resizeable, and these sizes are currently missing\n    // use `!important` to size the currently available icons to the missing ones\n    //\n    tiny: {\n        aspectRatio: '1',\n        width: '6px',\n        backgroundClip: 'unset',\n        '& svg': {\n            width: '6px !important',\n            height: '6px !important'\n        }\n    },\n    large: {\n        aspectRatio: '1',\n        width: '20px',\n        '& svg': {\n            width: '20px !important',\n            height: '20px !important'\n        }\n    },\n    extraLarge: {\n        aspectRatio: '1',\n        width: '28px',\n        '& svg': {\n            width: '28px !important',\n            height: '28px !important'\n        }\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const iconClassName = useIconClassName();\n    const styles = useStyles();\n    const isBusy = getIsBusy(state.status);\n    state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}
+{"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const presenceBadgeClassNames = {\n    root: 'fui-PresenceBadge',\n    icon: 'fui-PresenceBadge__icon'\n};\nconst getIsBusy = (status)=>{\n    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n        return true;\n    }\n    return false;\n};\nconst useRootClassName = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: tokens.borderRadiusCircular,\n    backgroundColor: tokens.colorNeutralBackground1,\n    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n    // (* except size=\"tiny\", where backgroundClip is unset)\n    padding: '1px',\n    backgroundClip: 'content-box'\n});\nconst useIconClassName = makeResetStyles({\n    display: 'flex',\n    margin: '-1px'\n});\nconst useStyles = makeStyles({\n    statusBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    statusAway: {\n        color: tokens.colorPaletteMarigoldBackground3\n    },\n    statusAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    statusOffline: {\n        color: tokens.colorNeutralForeground3\n    },\n    statusOutOfOffice: {\n        color: tokens.colorPaletteBerryForeground3\n    },\n    statusUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    outOfOffice: {\n        color: tokens.colorNeutralBackground1\n    },\n    outOfOfficeAvailable: {\n        color: tokens.colorPaletteLightGreenForeground3\n    },\n    outOfOfficeBusy: {\n        color: tokens.colorPaletteRedBackground3\n    },\n    outOfOfficeUnknown: {\n        color: tokens.colorNeutralForeground3\n    },\n    // Icons are not resizeable, and these sizes are currently missing\n    // use `!important` to size the currently available icons to the missing ones\n    //\n    tiny: {\n        aspectRatio: '1',\n        width: '6px',\n        backgroundClip: 'unset',\n        '& svg': {\n            width: '6px !important',\n            height: '6px !important'\n        }\n    },\n    large: {\n        aspectRatio: '1',\n        width: '20px',\n        '& svg': {\n            width: '20px !important',\n            height: '20px !important'\n        }\n    },\n    extraLarge: {\n        aspectRatio: '1',\n        width: '28px',\n        '& svg': {\n            width: '28px !important',\n            height: '28px !important'\n        }\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const usePresenceBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    const iconClassName = useIconClassName();\n    const styles = useStyles();\n    const isBusy = getIsBusy(state.status);\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","useIconClassName","useStyles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js

@@ -113,8 +113,10 @@ const usePresenceBadgeStyles_unstable = (state)=>{
     const iconClassName = useIconClassName();
     const styles = useStyles();
     const isBusy = getIsBusy(state.status);
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
     }
     return state;

package/lib-commonjs/components/PresenceBadge/usePresenceBadgeStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n\n  // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n  // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n  // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n  // (* except size=\"tiny\", where backgroundClip is unset)\n  padding: '1px',\n  backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n  display: 'flex',\n  margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  statusUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const iconClassName = useIconClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.status === 'unknown' && styles.statusUnknown,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice &&\n      (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n      styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","display","boxSizing","alignItems","justifyContent","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}
+{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge.types';\n\nexport const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-PresenceBadge',\n  icon: 'fui-PresenceBadge__icon',\n};\n\nconst getIsBusy = (status: PresenceBadgeStatus): boolean => {\n  if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useRootClassName = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  alignItems: 'center',\n  justifyContent: 'center',\n\n  borderRadius: tokens.borderRadiusCircular,\n  backgroundColor: tokens.colorNeutralBackground1,\n\n  // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.\n  // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background\n  // using padding and backgroundClip. The icon has margin: -1px to account for the padding.\n  // (* except size=\"tiny\", where backgroundClip is unset)\n  padding: '1px',\n  backgroundClip: 'content-box',\n});\n\nconst useIconClassName = makeResetStyles({\n  display: 'flex',\n  margin: '-1px',\n});\n\nconst useStyles = makeStyles({\n  statusBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  statusAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\n  },\n  statusAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  statusOffline: {\n    color: tokens.colorNeutralForeground3,\n  },\n  statusOutOfOffice: {\n    color: tokens.colorPaletteBerryForeground3,\n  },\n  statusUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeUnknown: {\n    color: tokens.colorNeutralForeground3,\n  },\n\n  // Icons are not resizeable, and these sizes are currently missing\n  // use `!important` to size the currently available icons to the missing ones\n  //\n  tiny: {\n    aspectRatio: '1',\n    width: '6px',\n    backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix\n    '& svg': {\n      width: '6px !important',\n      height: '6px !important',\n    },\n  },\n  large: {\n    aspectRatio: '1',\n    width: '20px',\n    '& svg': {\n      width: '20px !important',\n      height: '20px !important',\n    },\n  },\n  extraLarge: {\n    aspectRatio: '1',\n    width: '28px',\n    '& svg': {\n      width: '28px !important',\n      height: '28px !important',\n    },\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  const iconClassName = useIconClassName();\n  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    rootClassName,\n    isBusy && styles.statusBusy,\n    state.status === 'away' && styles.statusAway,\n    state.status === 'available' && styles.statusAvailable,\n    state.status === 'offline' && styles.statusOffline,\n    state.status === 'out-of-office' && styles.statusOutOfOffice,\n    state.status === 'unknown' && styles.statusUnknown,\n    state.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice &&\n      (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') &&\n      styles.statusOutOfOffice,\n    state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown,\n    state.size === 'tiny' && styles.tiny,\n    state.size === 'large' && styles.large,\n    state.size === 'extra-large' && styles.extraLarge,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useRootClassName","display","boxSizing","alignItems","justifyContent","borderRadius","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","usePresenceBadgeStyles_unstable","state","rootClassName","iconClassName","styles","isBusy","className","size"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.5.2",
+  "version": "9.5.3",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,10 +13,10 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },