@fluentui/react-badge 9.3.2 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.4.0)
+
+Thu, 17 Jul 2025 13:45:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.3.2..@fluentui/react-badge_v9.4.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+
 ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.3.2)
 
-Thu, 26 Jun 2025 14:07:54 GMT 
+Thu, 26 Jun 2025 14:11:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.3.1..@fluentui/react-badge_v9.3.2)
 
 ### Patches

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { 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    if (state.root.children) {\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":["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","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+    root: 'fui-CounterBadge',
+    icon: 'fui-CounterBadge__icon'
+};
+const useStyles = makeStyles({
+    dot: {
+        minWidth: 'auto',
+        width: '6px',
+        height: '6px',
+        padding: '0'
+    },
+    hide: {
+        display: 'none'
+    }
+});
+/**
+ * Applies style classnames to slots
+ */ export const useCounterBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+    }
+    return useBadgeStyles_unstable(state);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,302 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    badgeClassNames: function() {
+        return badgeClassNames;
+    },
+    useBadgeStyles_unstable: function() {
+        return useBadgeStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const badgeClassNames = {
+    root: 'fui-Badge',
+    icon: 'fui-Badge__icon'
+};
+// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
+// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
+const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    ..._reacttheme.typographyStyles.caption1Strong,
+    height: '20px',
+    minWidth: '20px',
+    padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`,
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    // Use a transparent stroke (rather than no border) so the border is visible in high contrast
+    borderColor: _reacttheme.tokens.colorTransparentStroke,
+    '::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        borderStyle: 'solid',
+        borderColor: 'inherit',
+        borderWidth: _reacttheme.tokens.strokeWidthThin,
+        borderRadius: 'inherit'
+    }
+});
+const useRootStyles = (0, _react.makeStyles)({
+    fontSmallToTiny: {
+        ..._reacttheme.typographyStyles.caption2Strong
+    },
+    // size
+    tiny: {
+        width: '6px',
+        height: '6px',
+        fontSize: '4px',
+        lineHeight: '4px',
+        minWidth: 'unset',
+        padding: 'unset'
+    },
+    'extra-small': {
+        width: '10px',
+        height: '10px',
+        fontSize: '6px',
+        lineHeight: '6px',
+        minWidth: 'unset',
+        padding: 'unset'
+    },
+    small: {
+        minWidth: '16px',
+        height: '16px',
+        padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    medium: {},
+    large: {
+        minWidth: '24px',
+        height: '24px',
+        padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    'extra-large': {
+        minWidth: '32px',
+        height: '32px',
+        padding: `0 calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${textPadding})`
+    },
+    // shape
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone
+    },
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium
+    },
+    roundedSmallToTiny: {
+        borderRadius: _reacttheme.tokens.borderRadiusSmall
+    },
+    circular: {},
+    // hide the boder when appearance is "ghost"
+    borderGhost: {
+        // The border is applied in an ::after pseudo-element because it should not affect layout.
+        // The padding and size of the badge should be the same regardless of whether or not it has a border.
+        '::after': {
+            display: 'none'
+        }
+    },
+    // appearance: filled
+    filled: {},
+    'filled-brand': {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-danger': {
+        backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-important': {
+        backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
+        color: _reacttheme.tokens.colorNeutralBackground1
+    },
+    'filled-informative': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground5,
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    'filled-severe': {
+        backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-subtle': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground1
+    },
+    'filled-success': {
+        backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3,
+        color: _reacttheme.tokens.colorNeutralForegroundOnBrand
+    },
+    'filled-warning': {
+        backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground3,
+        color: _reacttheme.tokens.colorNeutralForeground1Static
+    },
+    // appearance: ghost
+    ghost: {},
+    'ghost-brand': {
+        color: _reacttheme.tokens.colorBrandForeground1
+    },
+    'ghost-danger': {
+        color: _reacttheme.tokens.colorPaletteRedForeground3
+    },
+    'ghost-important': {
+        color: _reacttheme.tokens.colorNeutralForeground1
+    },
+    'ghost-informative': {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    'ghost-severe': {
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
+    },
+    'ghost-subtle': {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'ghost-success': {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3
+    },
+    'ghost-warning': {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    // appearance: outline
+    outline: {
+        ..._react.shorthands.borderColor('currentColor')
+    },
+    'outline-brand': {
+        color: _reacttheme.tokens.colorBrandForeground1
+    },
+    'outline-danger': {
+        color: _reacttheme.tokens.colorPaletteRedForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
+    },
+    'outline-important': {
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
+    },
+    'outline-informative': {
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'outline-severe': {
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
+    },
+    'outline-subtle': {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'outline-success': {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
+    },
+    'outline-warning': {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    // appearance: tint
+    tint: {},
+    'tint-brand': {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground2,
+        color: _reacttheme.tokens.colorBrandForeground2,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
+    },
+    'tint-danger': {
+        backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
+        color: _reacttheme.tokens.colorPaletteRedForeground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
+    },
+    'tint-important': {
+        backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
+        color: _reacttheme.tokens.colorNeutralBackground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+    },
+    'tint-informative': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'tint-severe': {
+        backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
+        color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
+    },
+    'tint-subtle': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+    },
+    'tint-success': {
+        backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
+        color: _reacttheme.tokens.colorPaletteGreenForeground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
+    },
+    'tint-warning': {
+        backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
+        color: _reacttheme.tokens.colorPaletteYellowForeground1,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
+    }
+});
+const useIconRootClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    lineHeight: '1',
+    margin: `0 calc(-1 * ${textPadding})`,
+    fontSize: '12px'
+});
+const useIconStyles = (0, _react.makeStyles)({
+    beforeText: {
+        marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    afterText: {
+        marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
+    },
+    beforeTextXL: {
+        marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    afterTextXL: {
+        marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
+    },
+    // size
+    tiny: {
+        fontSize: '6px'
+    },
+    'extra-small': {
+        fontSize: '10px'
+    },
+    small: {
+        fontSize: '12px'
+    },
+    medium: {},
+    large: {
+        fontSize: '16px'
+    },
+    'extra-large': {
+        fontSize: '20px'
+    }
+});
+const useBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const rootStyles = useRootStyles();
+    const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
+    state.root.className = (0, _react.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();
+    if (state.icon) {
+        let iconPositionClass;
+        if (state.root.children) {
+            if (state.size === 'extra-large') {
+                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
+            } else {
+                iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
+            }
+        }
+        state.icon.className = (0, _react.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/useBadgeStyles.styles.ts"],"sourcesContent":["import { 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    if (state.root.children) {\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":["badgeClassNames","useBadgeStyles_unstable","root","icon","textPadding","tokens","spacingHorizontalXXS","useRootClassName","makeResetStyles","display","boxSizing","alignItems","justifyContent","position","typographyStyles","caption1Strong","height","minWidth","padding","spacingHorizontalXS","borderRadius","borderRadiusCircular","borderColor","colorTransparentStroke","content","top","left","bottom","right","borderStyle","borderWidth","strokeWidthThin","useRootStyles","makeStyles","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","shorthands","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","state","rootClassName","rootStyles","smallToTiny","size","className","mergeClasses","shape","appearance","iconRootClassName","iconStyles","iconPositionClass","children","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    counterBadgeClassNames: function() {
+        return counterBadgeClassNames;
+    },
+    useCounterBadgeStyles_unstable: function() {
+        return useCounterBadgeStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
+const counterBadgeClassNames = {
+    root: 'fui-CounterBadge',
+    icon: 'fui-CounterBadge__icon'
+};
+const useStyles = (0, _react.makeStyles)({
+    dot: {
+        minWidth: 'auto',
+        width: '6px',
+        height: '6px',
+        padding: '0'
+    },
+    hide: {
+        display: 'none'
+    }
+});
+const useCounterBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    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) {
+        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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["import { 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":["counterBadgeClassNames","useCounterBadgeStyles_unstable","root","icon","useStyles","makeStyles","dot","minWidth","width","height","padding","hide","display","state","styles","className","mergeClasses","children","useBadgeStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,sBAAAA;eAAAA;;IAoBAC,8BAAAA;eAAAA;;;uBA1B4B;sCACD;AAKjC,MAAMD,yBAAqD;IAChEE,MAAM;IACNC,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,MAAMX,iCAAiC,CAACY;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EACrBhB,uBAAuBE,IAAI,EAC3BW,MAAMP,GAAG,IAAIQ,OAAOR,GAAG,EACvB,CAACO,MAAMX,IAAI,CAACe,QAAQ,IAAI,CAACJ,MAAMP,GAAG,IAAIQ,OAAOH,IAAI,EACjDE,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAAA,EAAahB,uBAAuBG,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOG,IAAAA,6CAAAA,EAAwBL;AACjC"}

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

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    presenceBadgeClassNames: function() {
+        return presenceBadgeClassNames;
+    },
+    usePresenceBadgeStyles_unstable: function() {
+        return usePresenceBadgeStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const presenceBadgeClassNames = {
+    root: 'fui-PresenceBadge',
+    icon: 'fui-PresenceBadge__icon'
+};
+const getIsBusy = (status)=>{
+    if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
+        return true;
+    }
+    return false;
+};
+const useRootClassName = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: _reacttheme.tokens.borderRadiusCircular,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
+    // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
+    // using padding and backgroundClip. The icon has margin: -1px to account for the padding.
+    // (* except size="tiny", where backgroundClip is unset)
+    padding: '1px',
+    backgroundClip: 'content-box'
+});
+const useIconClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    margin: '-1px'
+});
+const useStyles = (0, _react.makeStyles)({
+    statusBusy: {
+        color: _reacttheme.tokens.colorPaletteRedBackground3
+    },
+    statusAway: {
+        color: _reacttheme.tokens.colorPaletteMarigoldBackground3
+    },
+    statusAvailable: {
+        color: _reacttheme.tokens.colorPaletteLightGreenForeground3
+    },
+    statusOffline: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    statusOutOfOffice: {
+        color: _reacttheme.tokens.colorPaletteBerryForeground3
+    },
+    statusUnknown: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    outOfOffice: {
+        color: _reacttheme.tokens.colorNeutralBackground1
+    },
+    outOfOfficeAvailable: {
+        color: _reacttheme.tokens.colorPaletteLightGreenForeground3
+    },
+    outOfOfficeBusy: {
+        color: _reacttheme.tokens.colorPaletteRedBackground3
+    },
+    outOfOfficeUnknown: {
+        color: _reacttheme.tokens.colorNeutralForeground3
+    },
+    // Icons are not resizeable, and these sizes are currently missing
+    // use `!important` to size the currently available icons to the missing ones
+    //
+    tiny: {
+        aspectRatio: '1',
+        width: '6px',
+        backgroundClip: 'unset',
+        '& svg': {
+            width: '6px !important',
+            height: '6px !important'
+        }
+    },
+    large: {
+        aspectRatio: '1',
+        width: '20px',
+        '& svg': {
+            width: '20px !important',
+            height: '20px !important'
+        }
+    },
+    extraLarge: {
+        aspectRatio: '1',
+        width: '28px',
+        '& svg': {
+            width: '28px !important',
+            height: '28px !important'
+        }
+    }
+});
+const usePresenceBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    const iconClassName = useIconClassName();
+    const styles = useStyles();
+    const isBusy = getIsBusy(state.status);
+    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) {
+        state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceBadge/usePresenceBadgeStyles.styles.ts"],"sourcesContent":["import { 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":["presenceBadgeClassNames","usePresenceBadgeStyles_unstable","root","icon","getIsBusy","status","useRootClassName","makeResetStyles","display","boxSizing","alignItems","justifyContent","borderRadius","tokens","borderRadiusCircular","backgroundColor","colorNeutralBackground1","padding","backgroundClip","useIconClassName","margin","useStyles","makeStyles","statusBusy","color","colorPaletteRedBackground3","statusAway","colorPaletteMarigoldBackground3","statusAvailable","colorPaletteLightGreenForeground3","statusOffline","colorNeutralForeground3","statusOutOfOffice","colorPaletteBerryForeground3","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","aspectRatio","width","height","large","extraLarge","state","rootClassName","iconClassName","styles","isBusy","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.3.2",
+  "version": "9.4.0",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",