@fluentui/react-badge 9.3.2 → 9.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { 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":["presenceBadgeClassNames","usePresenceBadgeStyles_unstable","root","icon","getIsBusy","status","useRootClassName","__resetStyles","useIconClassName","useStyles","__styles","statusBusy","sj55zd","statusAway","statusAvailable","statusOffline","statusOutOfOffice","statusUnknown","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeUnknown","tiny","Bubjx69","a9b677","B2eet1l","B5pe6w7","p4uzdd","large","extraLarge","d","state","rootClassName","iconClassName","styles","isBusy","className","mergeClasses","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["usePresenceBadgeStyles.styles.js"],"sourcesContent":["import { 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":";;;;;;;;;;;IAEaI,uBAAuB;;;mCA0FY;eAA/B4B;;;uBA5FyC,gBAAgB;AAEnE,gCAAgC;IACnC3B,IAAI,EAAE,mBAAmB;IACzBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,IAAIC,MAAM,IAAG;IACxB,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,EAAE;QAC1E,OAAO,IAAI;IACf;IACA,OAAO,KAAK;AAChB,CAAC;AACD,MAAMC,gBAAgB,GAAA,WAAA,GAAGT,wBAAA,EAAA,WAAA,MAAA;IAAA;CAaxB,CAAC;AACF,MAAMU,gBAAgB,GAAA,WAAA,OAAGV,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGxB,CAAC;AACF,MAAMW,SAAS,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,UAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAAE,eAAA,EAAA;QAAAF,MAAA,EAAA;IAAA;IAAAG,aAAA,EAAA;QAAAH,MAAA,EAAA;IAAA;IAAAI,iBAAA,EAAA;QAAAJ,MAAA,EAAA;IAAA;IAAAK,aAAA,EAAA;QAAAL,MAAA,EAAA;IAAA;IAAAM,WAAA,EAAA;QAAAN,MAAA,EAAA;IAAA;IAAAO,oBAAA,EAAA;QAAAP,MAAA,EAAA;IAAA;IAAAQ,eAAA,EAAA;QAAAR,MAAA,EAAA;IAAA;IAAAS,kBAAA,EAAA;QAAAT,MAAA,EAAA;IAAA;IAAAU,IAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAL,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAE,UAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA2DjB,CAAC;AAGS,wCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAMC,aAAa,GAAGzB,gBAAgB,CAAC,CAAC;IACxC,MAAM0B,aAAa,GAAGzB,gBAAgB,CAAC,CAAC;IACxC,MAAM0B,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1B,MAAM0B,MAAM,GAAG9B,SAAS,CAAC0B,KAAK,CAACzB,MAAM,CAAC;IACtCyB,KAAK,CAAC5B,IAAI,CAACiC,SAAS,OAAGpC,mBAAY,EAACE,uBAAuB,CAACC,IAAI,EAAE6B,aAAa,EAAEG,MAAM,IAAID,MAAM,CAACxB,UAAU,EAAEqB,KAAK,CAACzB,MAAM,KAAK,MAAM,IAAI4B,MAAM,CAACtB,UAAU,EAAEmB,KAAK,CAACzB,MAAM,KAAK,WAAW,IAAI4B,MAAM,CAACrB,eAAe,EAAEkB,KAAK,CAACzB,MAAM,KAAK,SAAS,IAAI4B,MAAM,CAACpB,aAAa,EAAEiB,KAAK,CAACzB,MAAM,KAAK,eAAe,IAAI4B,MAAM,CAACnB,iBAAiB,EAAEgB,KAAK,CAACzB,MAAM,KAAK,SAAS,IAAI4B,MAAM,CAAClB,aAAa,EAAEe,KAAK,CAACd,WAAW,IAAIiB,MAAM,CAACjB,WAAW,EAAEc,KAAK,CAACd,WAAW,IAAIc,KAAK,CAACzB,MAAM,KAAK,WAAW,IAAI4B,MAAM,CAAChB,oBAAoB,EAAEa,KAAK,CAACd,WAAW,IAAIkB,MAAM,IAAID,MAAM,CAACf,eAAe,EAAEY,KAAK,CAACd,WAAW,KAAKc,KAAK,CAACzB,MAAM,KAAK,eAAe,IAAIyB,KAAK,CAACzB,MAAM,KAAK,MAAM,IAAIyB,KAAK,CAACzB,MAAM,KAAK,SAAA,CAAS,CAAC,GAAI4B,MAAM,CAACnB,iBAAiB,EAAEgB,KAAK,CAACd,WAAW,IAAIc,KAAK,CAACzB,MAAM,KAAK,SAAS,IAAI4B,MAAM,CAACd,kBAAkB,EAAEW,KAAK,CAACM,IAAI,KAAK,MAAM,IAAIH,MAAM,CAACb,IAAI,EAAEU,KAAK,CAACM,IAAI,KAAK,OAAO,IAAIH,MAAM,CAACP,KAAK,EAAEI,KAAK,CAACM,IAAI,KAAK,aAAa,IAAIH,MAAM,CAACN,UAAU,EAAEG,KAAK,CAAC5B,IAAI,CAACiC,SAAS,CAAC;IAC95B,IAAIL,KAAK,CAAC3B,IAAI,EAAE;QACZ2B,KAAK,CAAC3B,IAAI,CAACgC,SAAS,OAAGpC,mBAAY,EAACE,uBAAuB,CAACE,IAAI,EAAE6B,aAAa,EAAEF,KAAK,CAAC3B,IAAI,CAACgC,SAAS,CAAC;IAC1G;IACA,OAAOL,KAAK;AAChB,CAAC"}

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":["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/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  presenceAwayRegular,\n  presenceAwayFilled,\n  presenceAvailableRegular,\n  presenceAvailableFilled,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndRegular,\n  presenceDndFilled,\n  presenceOofRegular,\n  presenceOfflineRegular,\n  presenceUnknownRegular,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"names":["Badge","CounterBadge","PresenceBadge","badgeClassNames","counterBadgeClassNames","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useCounterBadgeStyles_unstable","useCounterBadge_unstable","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAqBZC,YAAY;eAAZA,0BAAY;;IAlBZC,aAAa;eAAbA,4BAAa;;IAHCC,eAAe;eAAfA,sBAAe;;IAsB7BC,sBAAsB;eAAtBA,oCAAsB;;IAZtBC,uBAAuB;eAAvBA,sCAAuB;;IADvBC,wBAAwB;eAAxBA,uCAAwB;;IADxBC,kBAAkB;eAAlBA,iCAAkB;;IADlBC,mBAAmB;eAAnBA,kCAAmB;;IAHnBC,uBAAuB;eAAvBA,sCAAuB;;IAOvBC,sBAAsB;eAAtBA,qCAAsB;;IACtBC,kBAAkB;eAAlBA,iCAAkB;;IAElBC,iBAAiB;eAAjBA,gCAAiB;;IADjBC,kBAAkB;eAAlBA,iCAAkB;;IAGlBC,sBAAsB;eAAtBA,qCAAsB;;IADtBC,kBAAkB;eAAlBA,iCAAkB;;IAElBC,sBAAsB;eAAtBA,qCAAsB;;IAjBSC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;IAuB/FC,8BAA8B;eAA9BA,4CAA8B;;IAC9BC,wBAAwB;eAAxBA,sCAAwB;;IAnBxBC,+BAA+B;eAA/BA,8CAA+B;;IAC/BC,yBAAyB;eAAzBA,wCAAyB;;;uBAN8E;+BAkBlG;8BAOA"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable } from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge';\nexport {\n  PresenceBadge,\n  presenceBadgeClassNames,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  presenceAwayRegular,\n  presenceAwayFilled,\n  presenceAvailableRegular,\n  presenceAvailableFilled,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndRegular,\n  presenceDndFilled,\n  presenceOofRegular,\n  presenceOfflineRegular,\n  presenceUnknownRegular,\n} from './PresenceBadge';\nexport type { PresenceBadgeProps, PresenceBadgeState, PresenceBadgeStatus } from './PresenceBadge';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n} from './CounterBadge';\nexport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","presenceAwayRegular","presenceAwayFilled","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"mappings":";;;;;;;;;;;IAASA,KAAK;;;IAqBZoB,YAAY;;;;eAlBZf,4BAAa;;;eAHCJ,sBAAe;;IAsB7BoB;mDAAsB;;IAZtBT,uBAAuB;;;;eADvBD,uCAAwB;;;eADxBD,iCAAkB;;;eADlBD,kCAAmB;;;eAHnBH,sCAAuB;;IAOvBO,sBAAsB;;;;eACtBC,iCAAkB;;;eAElBE,gCAAiB;;sBADC;eAAlBD;;;eAGAG,qCAAsB;;sBADJ;eAAlBD;;;eAEAE,qCAAsB;;;eAjBSjB,2BAAoB;;2BAAyB;eAAvBC;;;eAAyBC,wBAAiB;;;eAuB/FkB,4CAA8B;;;eAC9BC,sCAAwB;;;eAnBxBhB,8CAA+B;;;eAC/BC,wCAAyB;;;uBAN8E,UAAU;+BAkB5G,kBAAkB;8BAOlB,iBAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-badge",
-  "version": "9.3.2",
+  "version": "9.4.1",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,10 +19,10 @@
   },
   "dependencies": {
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },