@fluentui/react-badge 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221229-0425.1

package/lib/components/PresenceBadge/usePresenceBadgeStyles.js

@@ -4,15 +4,12 @@ export const presenceBadgeClassNames = {
   root: 'fui-PresenceBadge',
   icon: 'fui-PresenceBadge__icon'
 };
-
 const getIsBusy = status => {
   if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') {
     return true;
   }
-
   return false;
 };
-
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "z8tnut": "f1g0x7ka",
@@ -81,17 +78,13 @@ const useStyles = /*#__PURE__*/__styles({
 /**
  * Applies style classnames to slots
  */
-
-
 export const usePresenceBadgeStyles_unstable = state => {
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
   state.root.className = mergeClasses(presenceBadgeClassNames.root, styles.root, 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.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway, state.outOfOffice && state.status === 'offline' && styles.statusOffline, state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice, 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, state.icon.className);
   }
-
   return state;
 };
 //# sourceMappingURL=usePresenceBadgeStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,YAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAKA,OAAO,MAAM,uBAAuB,GAA+B;EACjE,IAAI,EAAE,mBAD2D;EAEjE,IAAI,EAAE;AAF2D,CAA5D;;AAKP,MAAM,SAAS,GAAI,MAAD,IAAyC;EACzD,IAAI,MAAM,KAAK,MAAX,IAAqB,MAAM,KAAK,gBAAhC,IAAoD,MAAM,KAAK,SAAnE,EAA8E;IAC5E,OAAO,IAAP;EACD;;EAED,OAAO,KAAP;AACD,CAND;;AAQA,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuEA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,MAAP,CAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,MAAM,IAAI,MAAM,CAAC,UAHgB,EAIjC,KAAK,CAAC,MAAN,KAAiB,MAAjB,IAA2B,MAAM,CAAC,UAJD,EAKjC,KAAK,CAAC,MAAN,KAAiB,WAAjB,IAAgC,MAAM,CAAC,eALN,EAMjC,KAAK,CAAC,MAAN,KAAiB,SAAjB,IAA8B,MAAM,CAAC,aANJ,EAOjC,KAAK,CAAC,MAAN,KAAiB,eAAjB,IAAoC,MAAM,CAAC,iBAPV,EAQjC,KAAK,CAAC,WAAN,IAAqB,MAAM,CAAC,WARK,EASjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,WAAtC,IAAqD,MAAM,CAAC,oBAT3B,EAUjC,KAAK,CAAC,WAAN,IAAqB,MAArB,IAA+B,MAAM,CAAC,eAVL,EAWjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,MAAtC,IAAgD,MAAM,CAAC,eAXtB,EAYjC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,SAAtC,IAAmD,MAAM,CAAC,aAZzB,EAajC,KAAK,CAAC,WAAN,IAAqB,KAAK,CAAC,MAAN,KAAiB,eAAtC,IAAyD,MAAM,CAAC,iBAb/B,EAcjC,KAAK,CAAC,IAAN,KAAe,MAAf,IAAyB,MAAM,CAAC,IAdC,EAejC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,KAfA,EAgBjC,KAAK,CAAC,IAAN,KAAe,aAAf,IAAgC,MAAM,CAAC,UAhBN,EAiBjC,KAAK,CAAC,IAAN,CAAW,SAjBsB,CAAnC;;EAoBA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAuB,CAAC,IAAzB,EAA+B,KAAK,CAAC,IAAN,CAAW,SAA1C,CAAnC;EACD;;EAED,OAAO,KAAP;AACD,CA5BM","sourcesContent":["import { mergeClasses, makeStyles, shorthands } 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 === 'unknown') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\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  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\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    '& 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  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    styles.root,\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.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,\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, state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":"AAAA,SAASA,YAAY,YAAcC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAK9C,OAAO,MAAMC,uBAAuB,GAA+B;EACjEC,IAAI,EAAE,mBAAmB;EACzBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,GAAIC,MAA2B,IAAa;EACzD,IAAIA,MAAM,KAAK,MAAM,IAAIA,MAAM,KAAK,gBAAgB,IAAIA,MAAM,KAAK,SAAS,EAAE;IAC5E,OAAO,IAAI;;EAGb,OAAO,KAAK;AACd,CAAC;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAqEhB;AAEF;;;AAGA,OAAO,MAAMC,+BAA+B,GAAIC,KAAyB,IAAwB;EAC/F,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1B,MAAMI,MAAM,GAAGN,SAAS,CAACI,KAAK,CAACH,MAAM,CAAC;EACtCG,KAAK,CAACN,IAAI,CAACS,SAAS,GAAGb,YAAY,CACjCG,uBAAuB,CAACC,IAAI,EAC5BO,MAAM,CAACP,IAAI,EACXQ,MAAM,IAAID,MAAM,CAACG,UAAU,EAC3BJ,KAAK,CAACH,MAAM,KAAK,MAAM,IAAII,MAAM,CAACI,UAAU,EAC5CL,KAAK,CAACH,MAAM,KAAK,WAAW,IAAII,MAAM,CAACK,eAAe,EACtDN,KAAK,CAACH,MAAM,KAAK,SAAS,IAAII,MAAM,CAACM,aAAa,EAClDP,KAAK,CAACH,MAAM,KAAK,eAAe,IAAII,MAAM,CAACO,iBAAiB,EAC5DR,KAAK,CAACS,WAAW,IAAIR,MAAM,CAACQ,WAAW,EACvCT,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,WAAW,IAAII,MAAM,CAACS,oBAAoB,EAChFV,KAAK,CAACS,WAAW,IAAIP,MAAM,IAAID,MAAM,CAACU,eAAe,EACrDX,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,MAAM,IAAII,MAAM,CAACW,eAAe,EACtEZ,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,SAAS,IAAII,MAAM,CAACM,aAAa,EACvEP,KAAK,CAACS,WAAW,IAAIT,KAAK,CAACH,MAAM,KAAK,eAAe,IAAII,MAAM,CAACO,iBAAiB,EACjFR,KAAK,CAACa,IAAI,KAAK,MAAM,IAAIZ,MAAM,CAACa,IAAI,EACpCd,KAAK,CAACa,IAAI,KAAK,OAAO,IAAIZ,MAAM,CAACc,KAAK,EACtCf,KAAK,CAACa,IAAI,KAAK,aAAa,IAAIZ,MAAM,CAACe,UAAU,EACjDhB,KAAK,CAACN,IAAI,CAACS,SAAS,CACrB;EAED,IAAIH,KAAK,CAACL,IAAI,EAAE;IACdK,KAAK,CAACL,IAAI,CAACQ,SAAS,GAAGb,YAAY,CAACG,uBAAuB,CAACE,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACQ,SAAS,CAAC;;EAGzF,OAAOH,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","presenceBadgeClassNames","root","icon","getIsBusy","status","useStyles","usePresenceBadgeStyles_unstable","state","styles","isBusy","className","statusBusy","statusAway","statusAvailable","statusOffline","statusOutOfOffice","outOfOffice","outOfOfficeAvailable","outOfOfficeBusy","outOfOfficeAway","size","tiny","large","extraLarge"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts"],"sourcesContent":["import { mergeClasses, makeStyles, shorthands } 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 === 'unknown') {\n    return true;\n  }\n\n  return false;\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.padding(0),\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    '& span': {\n      display: 'flex',\n    },\n    ...shorthands.borderRadius('50%'),\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\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  outOfOffice: {\n    color: tokens.colorNeutralBackground1,\n  },\n  outOfOfficeAvailable: {\n    color: tokens.colorPaletteLightGreenForeground3,\n  },\n  outOfOfficeBusy: {\n    color: tokens.colorPaletteRedBackground3,\n  },\n  outOfOfficeAway: {\n    color: tokens.colorPaletteMarigoldBackground3,\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    '& 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  const styles = useStyles();\n  const isBusy = getIsBusy(state.status);\n  state.root.className = mergeClasses(\n    presenceBadgeClassNames.root,\n    styles.root,\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.outOfOffice && styles.outOfOffice,\n    state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,\n    state.outOfOffice && isBusy && styles.outOfOfficeBusy,\n    state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,\n    state.outOfOffice && state.status === 'offline' && styles.statusOffline,\n    state.outOfOffice && state.status === 'out-of-office' && styles.statusOutOfOffice,\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, state.icon.className);\n  }\n\n  return state;\n};\n"]}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../packages/react-components/react-badge/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,eAAhB,EAAiC,oBAAjC,EAAuD,uBAAvD,EAAgF,iBAAhF,QAAyG,SAAzG;AAEA,SACE,aADF,EAEE,uBAFF,EAGE,+BAHF,EAIE,yBAJF,QAKO,iBALP;AAOA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,QAKO,gBALP","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} 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"],"sourceRoot":""}
+{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,SAAS;AAElH,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,QACpB,iBAAiB;AAExB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,gBAAgB","names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-badge/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} 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"]}

package/lib-commonjs/Badge.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Badge/index"), exports);
 //# sourceMappingURL=Badge.js.map

package/lib-commonjs/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../packages/react-components/react-badge/src/Badge.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Badge/index';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-badge/src/Badge.ts"],"sourcesContent":["export * from './components/Badge/index';\n"]}

package/lib-commonjs/CounterBadge.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/CounterBadge/index"), exports);
 //# sourceMappingURL=CounterBadge.js.map

package/lib-commonjs/CounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../packages/react-components/react-badge/src/CounterBadge.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CounterBadge/index';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-badge/src/CounterBadge.ts"],"sourcesContent":["export * from './components/CounterBadge/index';\n"]}

package/lib-commonjs/PresenceBadge.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/PresenceBadge/index"), exports);
 //# sourceMappingURL=PresenceBadge.js.map

package/lib-commonjs/PresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../packages/react-components/react-badge/src/PresenceBadge.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/PresenceBadge/index';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-badge/src/PresenceBadge.ts"],"sourcesContent":["export * from './components/PresenceBadge/index';\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Badge = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useBadge_1 = /*#__PURE__*/require("./useBadge");
-
 const useBadgeStyles_1 = /*#__PURE__*/require("./useBadgeStyles");
-
 const renderBadge_1 = /*#__PURE__*/require("./renderBadge");
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
  */
-
-
 exports.Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useBadge_1.useBadge_unstable(props, ref);
   useBadgeStyles_1.useBadgeStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpF,MAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;EACA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;EAEA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,aAAK,gBAAoCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACpF,MAAMC,KAAK,GAAGC,4BAAiB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC3CG,wCAAuB,CAACF,KAAK,CAAC;EAE9B,OAAOG,kCAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,aAAK,CAACS,WAAW,GAAG,OAAO","names":["exports","React","forwardRef","props","ref","state","useBadge_1","useBadgeStyles_1","renderBadge_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n  const state = useBadge_unstable(props, ref);\n  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"]}

package/lib-commonjs/components/Badge/Badge.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/Badge/index.js

@@ -3,14 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Badge"), exports);
-
 tslib_1.__exportStar(require("./renderBadge"), exports);
-
 tslib_1.__exportStar(require("./useBadge"), exports);
-
 tslib_1.__exportStar(require("./useBadgeStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,SAAA,CAAA,EAAA,OAAA;;AAGA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA;AAGAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/index.ts"],"sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}

package/lib-commonjs/components/Badge/renderBadge.js

@@ -4,21 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderBadge_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const renderBadge_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, state.iconPosition === 'before' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
-  }), state.root.children, state.iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, state.iconPosition === 'before' && slots.icon && React.createElement(slots.icon, {
+    ...slotProps.icon
+  }), state.root.children, state.iconPosition === 'after' && slots.icon && React.createElement(slots.icon, {
+    ...slotProps.icon
   }));
 };
-
 exports.renderBadge_unstable = renderBadge_unstable;
 //# sourceMappingURL=renderBadge.js.map

package/lib-commonjs/components/Badge/renderBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/renderBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAGO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;EACxD,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,IAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,IAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAHnD,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGO,MAAMA,oBAAoB,GAAIC,KAAiB,IAAI;EACxD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAaH,KAAK,CAAC;EAExD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BL,KAAK,CAACM,YAAY,KAAK,QAAQ,IAAIL,KAAK,CAACM,IAAI,IAAIH,oBAACH,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,EACnFP,KAAK,CAACK,IAAI,CAACG,QAAQ,EACnBR,KAAK,CAACM,YAAY,KAAK,OAAO,IAAIL,KAAK,CAACM,IAAI,IAAIH,oBAACH,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACxE;AAEjB,CAAC;AAVYE,4BAAoB","names":["renderBadge_unstable","state","slots","slotProps","react_utilities_1","React","root","iconPosition","icon","children","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/renderBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/Badge/useBadge.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBadge_unstable = void 0;
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Returns the props and state required to render the component
  */
-
-
 const useBadge_unstable = (props, ref) => {
   const {
     shape = 'circular',
@@ -37,6 +34,5 @@ const useBadge_unstable = (props, ref) => {
   };
   return state;
 };
-
 exports.useBadge_unstable = useBadge_unstable;
 //# sourceMappingURL=useBadge.js.map

package/lib-commonjs/components/Badge/useBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/useBadge.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;EAC9F,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,IAAI,GAAG,QAFH;IAGJ,YAAY,GAAG,QAHX;IAIJ,UAAU,GAAG,QAJT;IAKJ,KAAK,GAAG;EALJ,IAMF,KANJ;EAQA,MAAM,KAAK,GAAe;IACxB,KADwB;IAExB,IAFwB;IAGxB,YAHwB;IAIxB,UAJwB;IAKxB,KALwB;IAMxB,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CANY;IAUxB,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAVkB;IAcxB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB;EAdkB,CAA1B;EAiBA,OAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AACA;AAGA;;;AAGO,MAAMA,iBAAiB,GAAG,CAACC,KAAiB,EAAEC,GAA2B,KAAgB;EAC9F,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,IAAI,GAAG,QAAQ;IACfC,YAAY,GAAG,QAAQ;IACvBC,UAAU,GAAG,QAAQ;IACrBC,KAAK,GAAG;EAAO,CAChB,GAAGN,KAAK;EAET,MAAMO,KAAK,GAAe;IACxBL,KAAK;IACLC,IAAI;IACJC,YAAY;IACZC,UAAU;IACVC,KAAK;IACLE,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,IAAI,EAAE;KACP;IACDD,IAAI,EAAEE,uCAAqB,CAAC,KAAK,EAAE;MACjCV,GAAG;MACH,GAAGD;KACJ,CAAC;IACFU,IAAI,EAAEC,kCAAgB,CAACX,KAAK,CAACU,IAAI;GAClC;EAED,OAAOH,KAAK;AACd,CAAC;AA3BYK,yBAAiB","names":["useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon","react_utilities_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/useBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n  const {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"]}

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

@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useBadgeStyles_unstable = exports.badgeClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 exports.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.
+};
+// 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 = react_theme_1.tokens.spacingHorizontalXXS;
-
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "ftuwxu6",
@@ -304,7 +300,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
 }, {
   "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1ewtqcl{box-sizing:border-box;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", ".f1g0x7ka{padding-top:0;}", ".fps1v9c{padding-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f17ae1jz{padding-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1qch9an{padding-bottom:0;}", ".fjamq6b{height:20px;}", ".f11u7vat{min-width:20px;}", ".f17a92cs{padding-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1pe0i86{padding-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".f13zj6fq::after{content:\"\";}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".fhtl3ys::after{border-top-color:inherit;}", ".f140b627::after{border-right-color:inherit;}", ".f1wihoeh::after{border-left-color:inherit;}", ".fplas78::after{border-bottom-color:inherit;}", ".f1lf1ovl::after{border-bottom-right-radius:inherit;}", ".f1ydfmkj::after{border-bottom-left-radius:inherit;}", ".feq0ynf::after{border-top-right-radius:inherit;}", ".f1ss7ivt::after{border-top-left-radius:inherit;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
 });
-
 const useIconStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "f22iagw",
@@ -350,17 +345,13 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
 /**
  * Applies style classnames to slots
  */
-
-
 const useBadgeStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
   state.root.className = react_1.mergeClasses(exports.badgeClassNames.root, rootStyles.base, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance !== 'ghost' && rootStyles.border, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
   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;
@@ -368,12 +359,9 @@ const useBadgeStyles_unstable = state => {
         iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
       }
     }
-
     state.icon.className = react_1.mergeClasses(exports.badgeClassNames.icon, iconStyles.base, iconPositionClass, iconStyles[state.size], state.icon.className);
   }
-
   return state;
 };
-
 exports.useBadgeStyles_unstable = useBadgeStyles_unstable;
 //# sourceMappingURL=useBadgeStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, mergeClasses, makeStyles } 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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n  },\n\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  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n  },\n\n  // shape\n\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  // border (all appearances except ghost)\n\n  border: {\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      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      ...shorthands.borderColor('inherit'),\n      ...shorthands.borderRadius('inherit'),\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\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 useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    lineHeight: '1',\n    ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n  },\n\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    fontSize: '12px',\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  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    rootStyles.base,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance !== 'ghost' && rootStyles.border,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\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      iconStyles.base,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":"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","names":["exports","root","icon","textPadding","react_theme_1","spacingHorizontalXXS","useRootStyles","react_1","useIconStyles","useBadgeStyles_unstable","state","rootStyles","smallToTiny","size","className","base","fontSmallToTiny","shape","roundedSmallToTiny","appearance","border","color","iconStyles","iconPositionClass","children","iconPosition","afterTextXL","beforeTextXL","afterText","beforeText"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } 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 useRootStyles = makeStyles({\n  base: {\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n    ...typographyStyles.caption1Strong,\n  },\n\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  },\n  'extra-small': {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n    lineHeight: '6px',\n  },\n  small: {\n    minWidth: '16px',\n    height: '16px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),\n  },\n  medium: {\n    height: '20px',\n    minWidth: '20px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  large: {\n    minWidth: '24px',\n    height: '24px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),\n  },\n  'extra-large': {\n    minWidth: '32px',\n    height: '32px',\n    ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),\n  },\n\n  // shape\n\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  roundedSmallToTiny: {\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  },\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n\n  // border (all appearances except ghost)\n\n  border: {\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      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      right: 0,\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth(tokens.strokeWidthThin),\n      ...shorthands.borderColor('inherit'),\n      ...shorthands.borderRadius('inherit'),\n    },\n  },\n\n  // appearance: filled\n\n  filled: {\n    // Use a transparent stroke (rather than no border) so the border is visible in high contrast\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\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 useIconStyles = makeStyles({\n  base: {\n    display: 'flex',\n    lineHeight: '1',\n    ...shorthands.margin(0, `calc(-1 * ${textPadding})`), // Remove text padding added to root\n  },\n\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    fontSize: '12px',\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  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    rootStyles.base,\n    smallToTiny && rootStyles.fontSmallToTiny,\n    rootStyles[state.size],\n    rootStyles[state.shape],\n    state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny,\n    state.appearance !== 'ghost' && rootStyles.border,\n    rootStyles[state.appearance],\n    rootStyles[`${state.appearance}-${state.color}` as const],\n    state.root.className,\n  );\n\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      iconStyles.base,\n      iconPositionClass,\n      iconStyles[state.size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CounterBadge = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useCounterBadge_1 = /*#__PURE__*/require("./useCounterBadge");
-
 const useCounterBadgeStyles_1 = /*#__PURE__*/require("./useCounterBadgeStyles");
-
 const index_1 = /*#__PURE__*/require("../Badge/index");
 /**
  * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
  */
-
-
 exports.CounterBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useCounterBadge_1.useCounterBadge_unstable(props, ref);
   useCounterBadgeStyles_1.useCounterBadgeStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,YAAA,gBAAuD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAClG,MAAM,KAAK,GAAG,iBAAA,CAAA,wBAAA,CAAyB,KAAzB,EAAgC,GAAhC,CAAd;EACA,uBAAA,CAAA,8BAAA,CAA+B,KAA/B;EAEA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALmE,CAAvD;AAOb,OAAA,CAAA,YAAA,CAAa,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n  useCounterBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,oBAAY,gBAA2CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAClG,MAAMC,KAAK,GAAGC,0CAAwB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAClDG,sDAA8B,CAACF,KAAK,CAAC;EAErC,OAAOG,4BAAoB,CAACH,KAAK,CAAC;AACpC,CAAC,CAAC;AAEFL,oBAAY,CAACS,WAAW,GAAG,cAAc","names":["exports","React","forwardRef","props","ref","state","useCounterBadge_1","useCounterBadgeStyles_1","index_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n  useCounterBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"]}

package/lib-commonjs/components/CounterBadge/CounterBadge.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/CounterBadge/index.js

@@ -3,14 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./CounterBadge"), exports);
-
 tslib_1.__exportStar(require("./CounterBadge.types"), exports);
-
 tslib_1.__exportStar(require("./useCounterBadge"), exports);
-
 tslib_1.__exportStar(require("./useCounterBadgeStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/CounterBadge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,sBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/index.ts"],"sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}

package/lib-commonjs/components/CounterBadge/useCounterBadge.js

@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCounterBadge_unstable = void 0;
-
 const index_1 = /*#__PURE__*/require("../Badge/index");
 /**
  * Returns the props and state required to render the component
  */
-
-
 const useCounterBadge_unstable = (props, ref) => {
   const {
     shape = 'circular',
@@ -20,20 +17,18 @@ const useCounterBadge_unstable = (props, ref) => {
     count = 0,
     dot = false
   } = props;
-  const state = { ...index_1.useBadge_unstable(props, ref),
+  const state = {
+    ...index_1.useBadge_unstable(props, ref),
     shape,
     appearance,
     showZero,
     count,
     dot
   };
-
   if ((count !== 0 || showZero) && !dot && !state.root.children) {
     state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
   }
-
   return state;
 };
-
 exports.useCounterBadge_unstable = useCounterBadge_unstable;
 //# sourceMappingURL=useCounterBadge.js.map

package/lib-commonjs/components/CounterBadge/useCounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";;;;;;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM;IACJ,KAAK,GAAG,UADJ;IAEJ,UAAU,GAAG,QAFT;IAGJ,QAAQ,GAAG,KAHP;IAIJ,aAAa,GAAG,EAJZ;IAKJ,KAAK,GAAG,CALJ;IAMJ,GAAG,GAAG;EANF,IAOF,KAPJ;EASA,MAAM,KAAK,GAAsB,EAC/B,GAAI,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAD2B;IAE/B,KAF+B;IAG/B,UAH+B;IAI/B,QAJ+B;IAK/B,KAL+B;IAM/B;EAN+B,CAAjC;;EASA,IAAI,CAAC,KAAK,KAAK,CAAV,IAAe,QAAhB,KAA6B,CAAC,GAA9B,IAAqC,CAAC,KAAK,CAAC,IAAN,CAAW,QAArD,EAA+D;IAC7D,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,GAAG,aAAR,GAAwB,GAAG,aAAa,GAAxC,GAA8C,GAAG,KAAK,EAA5E;EACD;;EAED,OAAO,KAAP;AACD,CAxBM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const {\n    shape = 'circular',\n    appearance = 'filled',\n    showZero = false,\n    overflowCount = 99,\n    count = 0,\n    dot = false,\n  } = props;\n\n  const state: CounterBadgeState = {\n    ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n    shape,\n    appearance,\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAEA;AAGA;;;AAGO,MAAMA,wBAAwB,GAAG,CAACC,KAAwB,EAAEC,GAA2B,KAAuB;EACnH,MAAM;IACJC,KAAK,GAAG,UAAU;IAClBC,UAAU,GAAG,QAAQ;IACrBC,QAAQ,GAAG,KAAK;IAChBC,aAAa,GAAG,EAAE;IAClBC,KAAK,GAAG,CAAC;IACTC,GAAG,GAAG;EAAK,CACZ,GAAGP,KAAK;EAET,MAAMQ,KAAK,GAAsB;IAC/B,GAAIC,yBAAiB,CAACT,KAAK,EAAEC,GAAG,CAA+C;IAC/EC,KAAK;IACLC,UAAU;IACVC,QAAQ;IACRE,KAAK;IACLC;GACD;EAED,IAAI,CAACD,KAAK,KAAK,CAAC,IAAIF,QAAQ,KAAK,CAACG,GAAG,IAAI,CAACC,KAAK,CAACE,IAAI,CAACC,QAAQ,EAAE;IAC7DH,KAAK,CAACE,IAAI,CAACC,QAAQ,GAAGL,KAAK,GAAGD,aAAa,GAAG,GAAGA,aAAa,GAAG,GAAG,GAAGC,KAAK,EAAE;;EAGhF,OAAOE,KAAK;AACd,CAAC;AAxBYI,gCAAwB","names":["useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","index_1","root","children","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["import * as React from 'react';\nimport type { BadgeState } from '../Badge/index';\nimport { useBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const {\n    shape = 'circular',\n    appearance = 'filled',\n    showZero = false,\n    overflowCount = 99,\n    count = 0,\n    dot = false,\n  } = props;\n\n  const state: CounterBadgeState = {\n    ...(useBadge_unstable(props, ref) as Pick<CounterBadgeState, keyof BadgeState>),\n    shape,\n    appearance,\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"]}

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

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useCounterBadgeStyles_unstable = exports.counterBadgeClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const useBadgeStyles_1 = /*#__PURE__*/require("../Badge/useBadgeStyles");
-
 exports.counterBadgeClassNames = {
   root: 'fui-CounterBadge',
   icon: 'fui-CounterBadge__icon'
 };
-
 const useStyles = /*#__PURE__*/react_1.__styles({
   "dot": {
     "Bf4jedk": "fgfkb25",
@@ -33,18 +29,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 /**
  * Applies style classnames to slots
  */
-
-
 const useCounterBadgeStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
-
   if (state.icon) {
     state.icon.className = react_1.mergeClasses(exports.counterBadgeClassNames.icon, state.icon.className);
   }
-
   return useBadgeStyles_1.useBadgeStyles_unstable(state);
 };
-
 exports.useCounterBadgeStyles_unstable = useCounterBadgeStyles_unstable;
 //# sourceMappingURL=useCounterBadgeStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAKa,OAAA,CAAA,sBAAA,GAAqD;EAChE,IAAI,EAAE,kBAD0D;EAEhE,IAAI,EAAE;AAF0D,CAArD;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,8BAA8B,GAAI,KAAD,IAAgD;EAC5F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,sBAAA,CAAuB,IADF,EAErB,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GAFC,EAGrB,CAAC,KAAK,CAAC,IAAN,CAAW,QAAZ,IAAwB,CAAC,KAAK,CAAC,GAA/B,IAAsC,MAAM,CAAC,IAHxB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;;EAOA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,sBAAA,CAAuB,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAvB;EACD;;EAED,OAAO,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,CAAP;AACD,CAdM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\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    ...shorthands.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  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"],"sourceRoot":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAKaA,8BAAsB,GAA+B;EAChEC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAU1B;AAEF;;;AAGO,MAAMC,8BAA8B,GAAIC,KAAwB,IAAuB;EAC5F,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGJ,oBAAY,CACjCJ,8BAAsB,CAACC,IAAI,EAC3BK,KAAK,CAACG,GAAG,IAAIF,MAAM,CAACE,GAAG,EACvB,CAACH,KAAK,CAACL,IAAI,CAACS,QAAQ,IAAI,CAACJ,KAAK,CAACG,GAAG,IAAIF,MAAM,CAACI,IAAI,EACjDL,KAAK,CAACL,IAAI,CAACO,SAAS,CACrB;EAED,IAAIF,KAAK,CAACJ,IAAI,EAAE;IACdI,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACJ,8BAAsB,CAACE,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;;EAGxF,OAAOI,wCAAuB,CAACN,KAAK,CAAsB;AAC5D,CAAC;AAdYN,sCAA8B","names":["exports","root","icon","useStyles","react_1","useCounterBadgeStyles_unstable","state","styles","className","dot","children","hide","useBadgeStyles_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';\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    ...shorthands.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  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"]}