npm - @fluentui/react-badge - Versions diffs - 9.1.13 → 9.1.15 - Mend

@fluentui/react-badge 9.1.13 → 9.1.15

Files changed (84) hide show

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,61 @@
   "name": "@fluentui/react-badge",
   "entries": [
     {
-      "date": "Wed, 24 May 2023 20:42:35 GMT",
+      "date": "Wed, 31 May 2023 06:42:52 GMT",
+      "tag": "@fluentui/react-badge_v9.1.15",
+      "version": "9.1.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-badge",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
+      "tag": "@fluentui/react-badge_v9.1.14",
+      "version": "9.1.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5",
+            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-badge",
+            "comment": "Bump @fluentui/react-utilities to v9.9.1",
+            "commit": "8f7c1b7591b3e665ae39e1b22ab0f0b28fb795c4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 24 May 2023 20:45:24 GMT",
       "tag": "@fluentui/react-badge_v9.1.13",
       "version": "9.1.13",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-badge
-This log was last generated on Wed, 24 May 2023 20:42:35 GMT and should not be manually modified.
+This log was last generated on Wed, 31 May 2023 06:42:52 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.1.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.15)
+Wed, 31 May 2023 06:42:52 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.14..@fluentui/react-badge_v9.1.15)
+### Patches
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+## [9.1.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.14)
+Thu, 25 May 2023 10:00:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.13..@fluentui/react-badge_v9.1.14)
+### Patches
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.5 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
+- Bump @fluentui/react-utilities to v9.9.1 ([PR #27988](https://github.com/microsoft/fluentui/pull/27988) by beachball)
 ## [9.1.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.1.13)
-Wed, 24 May 2023 20:42:35 GMT
+Wed, 24 May 2023 20:45:24 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.1.12..@fluentui/react-badge_v9.1.13)
 ### Patches

package/lib/Badge.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from './components/Badge/index';
2	- //# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../src/~~Badge.ts"],"sourcesContent":["export * from './components/Badge/index';\n"],"mappings":"AAAA,cAAc"}
1	+ {"version":3,"sources":["Badge.ts"],"sourcesContent":["export * from './components/Badge/index';\n"],"names":[],"mappings":"AAAA,cAAc,2BAA2B"}

package/lib/CounterBadge.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from './components/CounterBadge/index';
2	- //# sourceMappingURL=CounterBadge.js.map

package/lib/CounterBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../src/~~CounterBadge.ts"],"sourcesContent":["export * from './components/CounterBadge/index';\n"],"mappings":"AAAA,cAAc"}
1	+ {"version":3,"sources":["CounterBadge.ts"],"sourcesContent":["export * from './components/CounterBadge/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/PresenceBadge.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from './components/PresenceBadge/index';
2	- //# sourceMappingURL=PresenceBadge.js.map

package/lib/PresenceBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../src/~~PresenceBadge.ts"],"sourcesContent":["export * from './components/PresenceBadge/index';\n"],"mappings":"AAAA,cAAc"}
1	+ {"version":3,"sources":["PresenceBadge.ts"],"sourcesContent":["export * from './components/PresenceBadge/index';\n"],"names":[],"mappings":"AAAA,cAAc,mCAAmC"}

package/lib/components/Badge/Badge.js CHANGED Viewed

@@ -5,12 +5,10 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from './renderBadge';
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
- */
-export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useBadge_unstable(props, ref);
-  useBadgeStyles_unstable(state);
-  useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);
-  return renderBadge_unstable(state);
+ */ export const Badge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBadge_unstable(props, ref);
+    useBadgeStyles_unstable(state);
+    useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);
+    return renderBadge_unstable(state);
 });
 Badge.displayName = 'Badge';
-//# sourceMappingURL=Badge.js.map

package/lib/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"~~sources":["~~../../../src/components/~~Badge~~/Badge~~.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,iBAAiB,QAAQ;~~AAClC~~,SAASC,uBAAuB,QAAQ;~~AACxC~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,oBAAoB,QAAQ;~~AAIrC;;;AAGA~~,OAAO,MAAMC,~~KAAA~~,~~gBAAyCL~~,~~KAAA,CAAMM,~~UAAU,CAAC,CAACC,~~KAAA~~,~~EAAOC,GAAA,KAAQ~~;~~EACrF~~,MAAMC,~~KAAA~~,~~GAAQR~~,~~iBAAA,CAAkBM,KAAA,EAAOC,GAAA~~;~~EAEvCN~~,~~uBAAA,CAAwBO,KAAA~~;~~EAExBN~~,~~2BAAA~~,~~CAA4B,~~2BAA2BM~~,KAAA~~;~~EAEvD~~,OAAOL,~~oBAAA,CAAqBK,KAAA~~;AAC9B;~~AAEAJ~~,~~KAAA~~,~~CAAMK,~~WAAW,GAAG"}
1	+ {"version":3,"sources":["Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrF,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Badge/Badge.types.js CHANGED Viewed

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Badge.types.js.map
+export { };

package/lib/components/Badge/Badge.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/~~Badge~~/Badge~~.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /*\n A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n /\n appearance?: 'filled' \| 'ghost' \| 'outline' \| 'tint';\n\n /\n A Badge can be one of preset colors\n * @defaultvalue brand\n /\n color?: 'brand' \| 'danger' \| 'important' \| 'informative' \| 'severe' \| 'subtle' \| 'success' \| 'warning';\n\n /\n A Badge can position the icon before or after the content.\n * @defaultvalue before\n /\n iconPosition?: 'before' \| 'after';\n\n /\n A Badge can be square, circular or rounded.\n * @defaultvalue circular\n /\n shape?: 'circular' \| 'rounded' \| 'square';\n\n /\n A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' \| 'color' \| 'iconPosition' \| 'shape' \| 'size'>>;\n"],"mappings":"AAAA"}
1	+ {"version":3,"sources":["Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /*\n A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n /\n appearance?: 'filled' \| 'ghost' \| 'outline' \| 'tint';\n\n /\n A Badge can be one of preset colors\n * @defaultvalue brand\n /\n color?: 'brand' \| 'danger' \| 'important' \| 'informative' \| 'severe' \| 'subtle' \| 'success' \| 'warning';\n\n /\n A Badge can position the icon before or after the content.\n * @defaultvalue before\n /\n iconPosition?: 'before' \| 'after';\n\n /\n A Badge can be square, circular or rounded.\n * @defaultvalue circular\n /\n shape?: 'circular' \| 'rounded' \| 'square';\n\n /\n A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' \| 'color' \| 'iconPosition' \| 'shape' \| 'size'>>;\n"],"names":[],"mappings":"AAAA,WA0CyF"}

package/lib/components/Badge/index.js CHANGED Viewed

@@ -2,4 +2,3 @@ export * from './Badge';
 export * from './renderBadge';
 export * from './useBadge';
 export * from './useBadgeStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/Badge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../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.styles';\n"],"mappings":"AAAA,cAAc;~~AAGd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc"}
1	+ {"version":3,"sources":["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.styles';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AAGxB,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,0BAA0B"}

package/lib/components/Badge/renderBadge.js CHANGED Viewed

@@ -1,10 +1,6 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
-export const renderBadge_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/createElement(slots.icon, slotProps.icon));
+export const renderBadge_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/ createElement(slots.icon, slotProps.icon));
 };
-//# sourceMappingURL=renderBadge.js.map

package/lib/components/Badge/renderBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["createElement","getSlotsNext","renderBadge_unstable","state","slots","slotProps","root","iconPosition","icon","children"],"~~sources":["~~../../../src/components/Badge/~~renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlotsNext<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"],"mappings":"AAAA,~~2BACA~~,~~yBAEA~~,SAASA,aAAa,QAAQ;~~AAE9B~~,SAASC,YAAY,QAAQ;~~AAG7B~~,OAAO,MAAMC,~~oBAAA~~,~~GAAwBC~~,~~KAAA,IAAsB~~;~~EACzD~~,MAAM~~;IAAEC~~,~~KAAA;IAAOC;EAAS~~,~~CAAE~~,~~GAAGJ~~,~~YAAA~~,~~CAAyBE~~,~~KAAA~~;~~EAEtD~~,~~oBACEH~~,~~aAXJ~~,~~CAWKI~~,~~KAAA~~,~~CAAME,~~IAAI,EAAKD,~~SAAA~~,~~CAAUC,~~IAAI,EAC3BH,~~KAAA~~,~~CAAMI,~~YAAY,KAAK,YAAYH,~~KAAA~~,~~CAAMI,~~IAAI,~~iBAAIR~~,~~aAZxD~~,~~CAYyDI~~,~~KAAA~~,~~CAAMI,~~IAAI,EAAKH,~~SAAA~~,~~CAAUG,~~IAAI,GAC/EL,~~KAAA~~,~~CAAMG,~~IAAI,CAACG,QAAQ,EACnBN,~~KAAA~~,~~CAAMI,~~YAAY,KAAK,WAAWH,~~KAAA~~,~~CAAMI,~~IAAI,~~iBAAIR~~,~~aAdvD~~,~~CAcwDI~~,~~KAAA~~,~~CAAMI,~~IAAI,EAAKH,~~SAAA~~,~~CAAUG,~~IAAI;AAGrF"}
1	+ {"version":3,"sources":["renderBadge.tsx"],"sourcesContent":["/** @jsxRuntime classic /\n/* @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n const { slots, slotProps } = getSlotsNext<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"],"names":["createElement","getSlotsNext","renderBadge_unstable","state","slots","slotProps","root","iconPosition","icon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD,OAAO,MAAMC,uBAAuB,CAACC,QAAsB;IACzD,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAyBE;IAEtD,qBACE,AAXJ,cAWKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BH,MAAMI,YAAY,KAAK,YAAYH,MAAMI,IAAI,kBAAI,AAZxD,cAYyDJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI,GAC/EL,MAAMG,IAAI,CAACG,QAAQ,EACnBN,MAAMI,YAAY,KAAK,WAAWH,MAAMI,IAAI,kBAAI,AAdvD,cAcwDJ,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGrF,EAAE"}

package/lib/components/Badge/useBadge.js CHANGED Viewed

@@ -2,31 +2,23 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Returns the props and state required to render the component
- */
-export const useBadge_unstable = (props, ref) => {
-  const {
-    shape = 'circular',
-    size = 'medium',
-    iconPosition = 'before',
-    appearance = 'filled',
-    color = 'brand'
-  } = props;
-  const state = {
-    shape,
-    size,
-    iconPosition,
-    appearance,
-    color,
-    components: {
-      root: 'div',
-      icon: 'span'
-    },
-    root: getNativeElementProps('div', {
-      ref,
-      ...props
-    }),
-    icon: resolveShorthand(props.icon)
-  };
-  return state;
+ */ export const useBadge_unstable = (props, ref)=>{
+    const { shape ='circular' , size ='medium' , iconPosition ='before' , appearance ='filled' , color ='brand'  } = props;
+    const state = {
+        shape,
+        size,
+        iconPosition,
+        appearance,
+        color,
+        components: {
+            root: 'div',
+            icon: 'span'
+        },
+        root: getNativeElementProps('div', {
+            ref,
+            ...props
+        }),
+        icon: resolveShorthand(props.icon)
+    };
+    return state;
 };
-//# sourceMappingURL=useBadge.js.map

package/lib/components/Badge/useBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"~~sources":["~~../../../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"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;~~AAGxD;;;AAGA~~,OAAO,MAAMC,~~iBAAA~~,~~GAAoBA,~~CAACC,~~KAAA~~,~~EAAmBC,GAAA,KAA4C~~;~~EAC~~/F,MAAM~~;IACJC~~,~~KAAA~~,~~GAAQ;IACRC~~,~~IAAA~~,~~GAAO;IACPC~~,~~YAAA~~,~~GAAe;IACfC~~,~~UAAA~~,~~GAAa;IACbC~~,~~KAAA~~,~~GAAQ;EAAO~~,~~CAChB~~,~~GAAGN~~,~~KAAA;EAEJ~~,~~MAAMO~~,~~KAAA~~,~~GAAoB;IACxBL~~,~~KAAA~~;~~IACAC~~,~~IAAA;IACAC~~,~~YAAA~~;~~IACAC,UAAA~~;~~IACAC,KAAA~~;~~IACAE~~,~~UAAA,EAAY~~;~~MACVC~~,~~IAAA,EAAM~~;~~MACNC~~,~~IAAA,EAAM~~;~~IACR~~;~~IACAD~~,~~IAAA~~,~~EAAMZ~~,~~qBAAA,CAAsB,~~OAAO;~~MACjCI,GAAA~~;~~MACA~~,GAAGD;~~IACL~~;~~IACAU~~,~~IAAA~~,~~EAAMZ~~,~~gBAAA~~,~~CAAiBE,KAAA,CAAMU,~~IAAI;~~EACnC~~;~~EAEA~~,OAAOH~~,KAAA~~;AACT"}
1	+ {"version":3,"sources":["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"],"names":["React","getNativeElementProps","resolveShorthand","useBadge_unstable","props","ref","shape","size","iconPosition","appearance","color","state","components","root","icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpF;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,MAAM,EACJC,OAAQ,WAAU,EAClBC,MAAO,SAAQ,EACfC,cAAe,SAAQ,EACvBC,YAAa,SAAQ,EACrBC,OAAQ,QAAO,EAChB,GAAGN;IAEJ,MAAMO,QAAoB;QACxBL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMZ,sBAAsB,OAAO;YACjCI;YACA,GAAGD,KAAK;QACV;QACAU,MAAMZ,iBAAiBE,MAAMU,IAAI;IACnC;IAEA,OAAOH;AACT,EAAE"}

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

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

package/lib/components/CounterBadge/CounterBadge.js CHANGED Viewed

@@ -5,12 +5,10 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from '../Badge/index';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
- */
-export const CounterBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useCounterBadge_unstable(props, ref);
-  useCounterBadgeStyles_unstable(state);
-  useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);
-  return renderBadge_unstable(state);
+ */ export const CounterBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCounterBadge_unstable(props, ref);
+    useCounterBadgeStyles_unstable(state);
+    useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);
+    return renderBadge_unstable(state);
 });
 CounterBadge.displayName = 'CounterBadge';
-//# sourceMappingURL=CounterBadge.js.map

package/lib/components/CounterBadge/CounterBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"~~sources":["~~../../../src/components/~~CounterBadge~~/CounterBadge~~.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCounterBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,wBAAwB,QAAQ;~~AACzC~~,SAASC,8BAA8B,QAAQ;~~AAC/C~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,oBAAoB,QAAQ;~~AAIrC;;;AAGA~~,OAAO,MAAMC,~~YAAA~~,~~gBAAuDL~~,~~KAAA,CAAMM,~~UAAU,CAAC,CAACC,~~KAAA~~,~~EAAOC,GAAA,KAAQ~~;~~EACnG~~,MAAMC,~~KAAA~~,~~GAAQR~~,~~wBAAA,CAAyBM,KAAA,EAAOC,GAAA~~;~~EAE9CN,8BAAA,CAA~~+BO~~,KAAA~~;~~EAE~~/BN,~~2BAAA~~,~~CAA4B,~~kCAAkCM~~,KAAA~~;~~EAE9D~~,OAAOL,~~oBAAA,CAAqBK,KAAA~~;AAC9B;~~AAEAJ~~,~~YAAA~~,~~CAAaK,~~WAAW,GAAG"}
1	+ {"version":3,"sources":["CounterBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCounterBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,iBAAiB;AAItD;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/CounterBadge/CounterBadge.types.js CHANGED Viewed

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=CounterBadge.types.js.map
+export { };

package/lib/components/CounterBadge/CounterBadge.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/~~CounterBadge~~/CounterBadge~~.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' \| 'color' \| 'shape'> & {\n /*\n A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n /\n appearance?: 'filled' \| 'ghost';\n\n /\n Semantic colors for a counter badge\n * @default brand\n /\n color?: Extract<BadgeProps['color'], 'brand' \| 'danger' \| 'important' \| 'informative'>;\n\n /\n Value displayed by the Badge\n * @default 0\n /\n count?: number;\n\n /\n If a dot should be displayed without the count\n * @default false\n /\n dot?: boolean;\n\n /\n Max number to be displayed\n * @default 99\n /\n overflowCount?: number;\n\n /\n A Badge can be circular or rounded\n * @default circular\n /\n shape?: 'circular' \| 'rounded';\n\n /\n If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' \| 'color' \| 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' \| 'color' \| 'count' \| 'dot' \| 'shape' \| 'showZero'>>;\n"],"mappings":"AAAA"}
1	+ {"version":3,"sources":["CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' \| 'color' \| 'shape'> & {\n /*\n A Badge can have different appearances that emphasize certain parts of it:\n * - filled: The default appearance if one is not specified.\n * The badge background is filled with color with a contrasting foreground text to match.\n * - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n * @default filled\n /\n appearance?: 'filled' \| 'ghost';\n\n /\n Semantic colors for a counter badge\n * @default brand\n /\n color?: Extract<BadgeProps['color'], 'brand' \| 'danger' \| 'important' \| 'informative'>;\n\n /\n Value displayed by the Badge\n * @default 0\n /\n count?: number;\n\n /\n If a dot should be displayed without the count\n * @default false\n /\n dot?: boolean;\n\n /\n Max number to be displayed\n * @default 99\n /\n overflowCount?: number;\n\n /\n A Badge can be circular or rounded\n * @default circular\n /\n shape?: 'circular' \| 'rounded';\n\n /\n If the badge should be shown when count is 0\n * @default false\n */\n showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' \| 'color' \| 'shape'> &\n Required<Pick<CounterBadgeProps, 'appearance' \| 'color' \| 'count' \| 'dot' \| 'shape' \| 'showZero'>>;\n"],"names":[],"mappings":"AAAA,WAkDqG"}

package/lib/components/CounterBadge/index.js CHANGED Viewed

@@ -2,4 +2,3 @@ export * from './CounterBadge';
 export * from './CounterBadge.types';
 export * from './useCounterBadge';
 export * from './useCounterBadgeStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/CounterBadge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/CounterBadge/~~index.ts"],"sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles.styles';\n"],"mappings":"AAAA,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/CounterBadge/useCounterBadge.js CHANGED Viewed

@@ -2,27 +2,18 @@ import * as React from 'react';
 import { useBadge_unstable } from '../Badge/index';
 /**
  * Returns the props and state required to render the component
- */
-export const useCounterBadge_unstable = (props, ref) => {
-  const {
-    shape = 'circular',
-    appearance = 'filled',
-    showZero = false,
-    overflowCount = 99,
-    count = 0,
-    dot = false
-  } = props;
-  const state = {
-    ...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;
+ */ export const useCounterBadge_unstable = (props, ref)=>{
+    const { shape ='circular' , appearance ='filled' , showZero =false , overflowCount =99 , count =0 , dot =false  } = props;
+    const state = {
+        ...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;
 };
-//# sourceMappingURL=useCounterBadge.js.map

package/lib/components/CounterBadge/useCounterBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"~~sources":["~~../../../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"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AAEvB~~,SAASC,iBAAiB,QAAQ;~~AAGlC;;;AAGA~~,OAAO,MAAMC,~~wBAAA~~,~~GAA2BA,~~CAACC,~~KAAA~~,~~EAA0BC,GAAA,KAAmD~~;~~EACpH~~,MAAM~~;IACJC~~,~~KAAA~~,~~GAAQ;IACRC~~,~~UAAA~~,~~GAAa;IACbC~~,~~QAAA~~,~~GAAW~~,KAAK~~;IAChBC~~,~~aAAA~~,~~GAAgB;IAChBC~~,~~KAAA~~,~~GAAQ;IACRC~~,~~GAAA~~,~~GAAM;EAAK~~,~~CACZ~~,GAAGP~~,KAAA~~;~~EAEJ~~,MAAMQ,~~KAAA,GAA2B~~;~~IAC~~/B,GAAIV,~~iBAAA~~,~~CAAkBE~~,~~KAAA,EAAOC,GAAA,CAAI~~;~~IACjCC,KAAA~~;~~IACAC,UAAA~~;~~IACAC,QAAA~~;~~IACAE,KAAA~~;~~IACAC~~;~~EACF~~;~~EAEA~~,IAAI,~~CAACD~~,~~KAAA~~,~~KAAU~~,KAAKF,QAAO,KAAM,CAACG,~~GAAA~~,~~IAAO,~~CAACC,~~KAAA~~,~~CAAMC,~~IAAI,CAACC,QAAQ,EAAE;~~IAC7DF~~,~~KAAA~~,~~CAAMC,~~IAAI,CAACC,QAAQ,GAAGJ,~~KAAA~~,~~GAAQD~~,~~aAAA~~,~~GAAiB~~,~~GAAEA~~,~~aAAc~~,~~GAAE~~,~~GAAI~~,~~GAAEC~~,~~KAAM~~,~~EAAC~~;~~EAChF~~;~~EAEA~~,OAAOE~~,KAAA~~;AACT"}
1	+ {"version":3,"sources":["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"],"names":["React","useBadge_unstable","useCounterBadge_unstable","props","ref","shape","appearance","showZero","overflowCount","count","dot","state","root","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,iBAAiB,QAAQ,iBAAiB;AAGnD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EACJC,OAAQ,WAAU,EAClBC,YAAa,SAAQ,EACrBC,UAAW,KAAK,CAAA,EAChBC,eAAgB,GAAE,EAClBC,OAAQ,EAAC,EACTC,KAAM,KAAK,CAAA,EACZ,GAAGP;IAEJ,MAAMQ,QAA2B;QAC/B,GAAIV,kBAAkBE,OAAOC,IAAI;QACjCC;QACAC;QACAC;QACAE;QACAC;IACF;IAEA,IAAI,AAACD,CAAAA,UAAU,KAAKF,QAAO,KAAM,CAACG,OAAO,CAACC,MAAMC,IAAI,CAACC,QAAQ,EAAE;QAC7DF,MAAMC,IAAI,CAACC,QAAQ,GAAGJ,QAAQD,gBAAgB,CAAC,EAAEA,cAAc,CAAC,CAAC,GAAG,CAAC,EAAEC,MAAM,CAAC;IAChF,CAAC;IAED,OAAOE;AACT,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["~~../../../src/components/CounterBadge/~~useCounterBadgeStyles.styles.ts"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\~~nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\~~nexport const counterBadgeClassNames: ~~SlotClassNames<BadgeSlots>~~ = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...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"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB;~~AACrD~~,SAASC,uBAAuB,QAAQ;~~AAKxC~~,OAAO,MAAMC,~~sBAAA~~,~~GAAqD~~;~~EAChEC~~,~~IAAA~~,~~EAAM~~;~~EACNC~~,~~IAAA~~,~~EAAM~~;~~AACR~~;~~AAEA~~,MAAMC,~~SAAA~~,~~gBAAYL~~,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,~~EAUlB~~;~~AAEA;;;AAGA~~,OAAO,MAAMC,~~8BAAA~~,~~GAAkCC~~,~~KAAA~~,~~IAAgD~~;~~EAC7F~~,MAAMC,~~MAAA~~,~~GAASd~~,~~SAAA~~;~~EACfa~~,~~KAAA~~,~~CAAMf~~,IAAI,CAACiB,SAAS,GAAGrB,~~YAAA~~,~~CACrBG~~,~~sBAAA~~,~~CAAuBC~~,IAAI,~~EAC3Be~~,~~KAAA~~,~~CAAMZ~~,GAAG,IAAIa,~~MAAA~~,~~CAAOb~~,GAAG,~~EACvB~~,CAACY,~~KAAA~~,~~CAAMf~~,IAAI,CAACkB,QAAQ,IAAI,CAACH,~~KAAA~~,~~CAAMZ~~,GAAG,IAAIa,~~MAAA~~,~~CAAOL~~,IAAI,~~EACjDI~~,~~KAAA~~,~~CAAMf~~,IAAI,CAACiB,SAAS;~~EAGtB~~,IAAIF,~~KAAA~~,~~CAAMd~~,IAAI,EAAE;~~IACdc~~,~~KAAA~~,~~CAAMd~~,IAAI,CAACgB,SAAS,GAAGrB,~~YAAA~~,~~CAAaG~~,~~sBAAA~~,~~CAAuBE~~,IAAI,EAAEc,~~KAAA~~,~~CAAMd~~,IAAI,CAACgB,SAAS;~~EACvF~~;~~EAEA~~,OAAOnB,~~uBAAA~~,~~CAAwBiB~~,~~KAAA~~;~~AACjC~~"}
1	+ {"version":3,"names":["shorthands","mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","hide","mc9l5x","d","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n root: 'fui-CounterBadge',\n icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n dot: {\n minWidth: 'auto',\n width: '6px',\n height: '6px',\n ...shorthands.padding('0')\n },\n hide: {\n display: 'none'\n }\n});\n/*\n Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n }\n return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACrE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1Ba,KAAK,CAACf,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEe,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACb,GAAG,EAAE,CAACY,KAAK,CAACf,IAAI,CAACkB,QAAQ,IAAI,CAACH,KAAK,CAACZ,GAAG,IAAIa,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACf,IAAI,CAACiB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAACd,IAAI,EAAE;IACZc,KAAK,CAACd,IAAI,CAACgB,SAAS,GAAGrB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACgB,SAAS,CAAC;EAC1F;EACA,OAAOnB,uBAAuB,CAACiB,KAAK,CAAC;AACzC,CAAC"}

package/lib/components/PresenceBadge/PresenceBadge.js CHANGED Viewed

@@ -5,12 +5,10 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 import { renderBadge_unstable } from '../../Badge';
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
- */
-export const PresenceBadge = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = usePresenceBadge_unstable(props, ref);
-  usePresenceBadgeStyles_unstable(state);
-  useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);
-  return renderBadge_unstable(state);
+ */ export const PresenceBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePresenceBadge_unstable(props, ref);
+    usePresenceBadgeStyles_unstable(state);
+    useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);
+    return renderBadge_unstable(state);
 });
 PresenceBadge.displayName = 'PresenceBadge';
-//# sourceMappingURL=PresenceBadge.js.map

package/lib/components/PresenceBadge/PresenceBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"~~sources":["~~../../../src/components/~~PresenceBadge~~/PresenceBadge~~.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"mappings":"AAAA,YAAYA,~~KAAA~~,~~MAAW~~;~~AACvB~~,SAASC,yBAAyB,QAAQ;~~AAC1C~~,SAASC,+BAA+B,QAAQ;~~AAChD~~,SAASC,2BAA2B,QAAQ;~~AAC5C~~,SAASC,oBAAoB,QAAQ;~~AAIrC;;;AAGA~~,OAAO,MAAMC,~~aAAA~~,~~gBAAyDL~~,~~KAAA,CAAMM,~~UAAU,CAAC,CAACC,~~KAAA~~,~~EAAOC,GAAA,KAAQ~~;~~EACrG~~,MAAMC,~~KAAA~~,~~GAAQR~~,~~yBAAA,CAA0BM,KAAA,EAAOC,GAAA~~;~~EAE~~/CN~~,+BAAA~~,~~CAAgCO,KAAA~~;~~EAEhCN~~,~~2BAAA~~,~~CAA4B,~~mCAAmCM~~,KAAA~~;~~EAE~~/D,OAAOL,~~oBAAA,CAAqBK,KAAA~~;AAC9B;~~AAEAJ~~,~~aAAA~~,~~CAAcK,~~WAAW,GAAG"}
1	+ {"version":3,"sources":["PresenceBadge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,cAAc;AAInD;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACrG,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CN,gCAAgCO;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

package/lib/components/PresenceBadge/PresenceBadge.types.js CHANGED Viewed

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=PresenceBadge.types.js.map
+export { };

package/lib/components/PresenceBadge/PresenceBadge.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/~~PresenceBadge~~/PresenceBadge~~.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n \| 'busy'\n \| 'out-of-office'\n \| 'away'\n \| 'available'\n \| 'offline'\n \| 'do-not-disturb'\n \| 'unknown'\n \| 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' \| 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /*\n Represents several status\n * @default available\n /\n status?: PresenceBadgeStatus;\n\n /\n Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' \| 'outOfOffice'>>;\n"],"mappings":"AAAA"}
1	+ {"version":3,"sources":["PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n \| 'busy'\n \| 'out-of-office'\n \| 'away'\n \| 'available'\n \| 'offline'\n \| 'do-not-disturb'\n \| 'unknown'\n \| 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' \| 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /*\n Represents several status\n * @default available\n /\n status?: PresenceBadgeStatus;\n\n /\n Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' \| 'outOfOffice'>>;\n"],"names":[],"mappings":"AAAA,WA+B+D"}

package/lib/components/PresenceBadge/index.js CHANGED Viewed

@@ -2,4 +2,3 @@ export * from './PresenceBadge';
 export * from './PresenceBadge.types';
 export * from './usePresenceBadge';
 export * from './usePresenceBadgeStyles.styles';
-//# sourceMappingURL=index.js.map

package/lib/components/PresenceBadge/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~names":[],"~~sources":["~~../../../src/components/PresenceBadge/~~index.ts"],"sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles.styles';\n"],"mappings":"AAAA,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc;~~AACd~~,cAAc"}
1	+ {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './PresenceBadge';\nexport * from './PresenceBadge.types';\nexport * from './usePresenceBadge';\nexport * from './usePresenceBadgeStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,kCAAkC"}