@fluentui/react-badge 9.5.3 → 9.5.5

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-badge
 
-This log was last generated on Tue, 26 May 2026 09:34:06 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:03 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.5.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.5)
+
+Tue, 11 Aug 2026 17:16:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.5.4..@fluentui/react-badge_v9.5.5)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.4)
+
+Wed, 24 Jun 2026 11:10:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.5.3..@fluentui/react-badge_v9.5.4)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
 ## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.5.3)
 
-Tue, 26 May 2026 09:34:06 GMT 
+Tue, 26 May 2026 09:39:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.5.2..@fluentui/react-badge_v9.5.3)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,218 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */
+export declare const Badge: ForwardRefComponent<BadgeProps>;
+
+export declare type BadgeBaseProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;
+
+export declare type BadgeBaseState = Omit<BadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
+
+export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
+
+export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
+    /**
+     * A Badge can be filled, outline, ghost, inverted
+     * @defaultvalue filled
+     */
+    appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
+    /**
+     * A Badge can be one of preset colors
+     * @defaultvalue brand
+     */
+    color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
+    /**
+     * A Badge can position the icon before or after the content.
+     * @defaultvalue before
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * A Badge can be square, circular or rounded.
+     * @defaultvalue circular
+     */
+    shape?: 'circular' | 'rounded' | 'square';
+    /**
+     * A Badge can be on of several preset sizes.
+     * @defaultvalue medium
+     */
+    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+};
+
+export declare type BadgeSlots = {
+    root: Slot<'div'>;
+    icon?: Slot<'span'>;
+};
+
+export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
+
+/**
+ * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
+ */
+export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
+
+export declare type CounterBadgeBaseProps = Omit<CounterBadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;
+
+export declare type CounterBadgeBaseState = Omit<CounterBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
+
+export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
+
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
+    /**
+     * A Badge can have different appearances that emphasize certain parts of it:
+     *  - filled: The default appearance if one is not specified.
+     *    The badge background is filled with color with a contrasting foreground text to match.
+     *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
+     * @default filled
+     */
+    appearance?: 'filled' | 'ghost';
+    /**
+     * Semantic colors for a counter badge
+     * @default brand
+     */
+    color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
+    /**
+     * Value displayed by the Badge
+     * @default 0
+     */
+    count?: number;
+    /**
+     * If a dot should be displayed without the count
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Max number to be displayed
+     * @default 99
+     */
+    overflowCount?: number;
+    /**
+     * A Badge can be circular or rounded
+     * @default circular
+     */
+    shape?: 'circular' | 'rounded';
+    /**
+     * If the badge should be shown when count is 0
+     * @default false
+     */
+    showZero?: boolean;
+};
+
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
+
+export declare const presenceAvailableFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceAvailableRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceAwayFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceAwayRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */
+export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
+
+export declare type PresenceBadgeBaseProps = Omit<PresenceBadgeProps, 'size'>;
+
+export declare type PresenceBadgeBaseState = Omit<PresenceBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
+
+export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
+
+export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> & Pick<BadgeProps, 'size'> & {
+    /**
+     * Represents several status
+     * @default available
+     */
+    status?: PresenceBadgeStatus;
+    /**
+     * Modifies the display to indicate that the user is out of office.
+     * This can be combined with any status to display an out-of-office version of that status
+     * @default false
+     */
+    outOfOffice?: boolean;
+};
+
+export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
+
+export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown' | 'blocked';
+
+export declare const presenceBlockedRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceBusyFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceDndFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceDndRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceOfflineRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceOofRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const presenceUnknownRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
+
+export declare const renderBadge_unstable: (state: BadgeBaseState) => JSXElement;
+
+/**
+ * Returns the props and state required to render the component
+ */
+export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
+
+/**
+ * Base hook for Badge component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Badge component.
+ * @param ref - User provided ref to be passed to the Badge component.
+ */
+export declare const useBadgeBase_unstable: (props: BadgeBaseProps, ref: React_2.Ref<HTMLDivElement>) => BadgeBaseState;
+
+/**
+ * Applies style classnames to slots
+ */
+export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
+
+/**
+ * Returns the props and state required to render the component
+ */
+export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
+
+/**
+ * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.
+ *
+ * @param props - User provided props to the CounterBadge component.
+ * @param ref - User provided ref to be passed to the CounterBadge component.
+ */
+export declare const useCounterBadgeBase_unstable: (props: CounterBadgeBaseProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeBaseState;
+
+/**
+ * Applies style classnames to slots
+ */
+export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
+
+/**
+ * Returns the props and state required to render the component
+ */
+export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
+
+/**
+ * Base hook for PresenceBadge component, which manages state related to presence status and ARIA attributes.
+ * Note: size is excluded from BaseProps as it is a design prop; icon selection uses the 'medium' size default.
+ * To render size-specific icons, use the full usePresenceBadge_unstable hook.
+ *
+ * @param props - User provided props to the PresenceBadge component.
+ * @param ref - User provided ref to be passed to the PresenceBadge component.
+ */
+export declare const usePresenceBadgeBase_unstable: (props: PresenceBadgeBaseProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeBaseState;
+
+/**
+ * Applies style classnames to slots
+ */
+export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
+
+export { }

package/lib/Badge.js

@@ -1 +1 @@
-export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from './components/Badge/index';
+export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from "./components/Badge/index.js";

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeBaseProps, BadgeProps, BadgeSlots, BadgeBaseState, BadgeState } from './components/Badge/index';\nexport {\n  Badge,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n  useBadgeBase_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}
+{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeBaseProps, BadgeProps, BadgeSlots, BadgeBaseState, BadgeState } from './components/Badge/index';\nexport {\n  Badge,\n  badgeClassNames,\n  renderBadge_unstable,\n  useBadgeStyles_unstable,\n  useBadge_unstable,\n  useBadgeBase_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,8BAA2B"}

package/lib/CounterBadge.js

@@ -1 +1 @@
-export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from './components/CounterBadge/index';
+export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from "./components/CounterBadge/index.js";

package/lib/CounterBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type {\n  CounterBadgeProps,\n  CounterBadgeState,\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n} from './components/CounterBadge/index';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n  useCounterBadgeBase_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}
+{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type {\n  CounterBadgeProps,\n  CounterBadgeState,\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n} from './components/CounterBadge/index';\nexport {\n  CounterBadge,\n  counterBadgeClassNames,\n  useCounterBadgeStyles_unstable,\n  useCounterBadge_unstable,\n  useCounterBadgeBase_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,qCAAkC"}

package/lib/PresenceBadge.js

@@ -1 +1 @@
-export { PresenceBadge, presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBadgeClassNames, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './components/PresenceBadge/index';
+export { PresenceBadge, presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBadgeClassNames, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from "./components/PresenceBadge/index.js";

package/lib/PresenceBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type {\n  PresenceBadgeProps,\n  PresenceBadgeState,\n  PresenceBadgeStatus,\n  PresenceBadgeBaseProps,\n  PresenceBadgeBaseState,\n} from './components/PresenceBadge/index';\nexport {\n  PresenceBadge,\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceAwayRegular,\n  presenceBadgeClassNames,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  usePresenceBadgeBase_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,EACtBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,mCAAmC"}
+{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type {\n  PresenceBadgeProps,\n  PresenceBadgeState,\n  PresenceBadgeStatus,\n  PresenceBadgeBaseProps,\n  PresenceBadgeBaseState,\n} from './components/PresenceBadge/index';\nexport {\n  PresenceBadge,\n  presenceAvailableFilled,\n  presenceAvailableRegular,\n  presenceAwayFilled,\n  presenceAwayRegular,\n  presenceBadgeClassNames,\n  presenceBlockedRegular,\n  presenceBusyFilled,\n  presenceDndFilled,\n  presenceDndRegular,\n  presenceOfflineRegular,\n  presenceOofRegular,\n  presenceUnknownRegular,\n  usePresenceBadgeStyles_unstable,\n  usePresenceBadge_unstable,\n  usePresenceBadgeBase_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,EACtBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,sCAAmC"}

package/lib/components/Badge/Badge.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useBadge_unstable } from './useBadge';
-import { useBadgeStyles_unstable } from './useBadgeStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { renderBadge_unstable } from './renderBadge';
+import * as React from "react";
+import { useBadge_unstable } from "./useBadge.js";
+import { useBadgeStyles_unstable } from "./useBadgeStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
+import { renderBadge_unstable } from "./renderBadge.js";
 /**
  * Define a styled Badge, using the `useBadge_unstable` hook.
  */ export const Badge = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gBAAa;AAC/C,SAASC,uBAAuB,QAAQ,6BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,mBAAgB;AAIrD;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Badge/index.js

@@ -1,4 +1,4 @@
-export { Badge } from './Badge';
-export { renderBadge_unstable } from './renderBadge';
-export { useBadge_unstable, useBadgeBase_unstable } from './useBadge';
-export { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';
+export { Badge } from "./Badge.js";
+export { renderBadge_unstable } from "./renderBadge.js";
+export { useBadge_unstable, useBadgeBase_unstable } from "./useBadge.js";
+export { badgeClassNames, useBadgeStyles_unstable } from "./useBadgeStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable, useBadgeBase_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","useBadgeBase_unstable","badgeClassNames","useBadgeStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAGhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable, useBadgeBase_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","useBadgeBase_unstable","badgeClassNames","useBadgeStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,aAAU;AAGhC,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,gBAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,6BAA0B"}

package/lib/components/Badge/renderBadge.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 export const renderBadge_unstable = (state)=>{
     assertSlots(state);
     return /*#__PURE__*/ _jsxs(state.root, {

package/lib/components/Badge/useBadge.js

@@ -1,5 +1,5 @@
 'use client';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from "@fluentui/react-utilities";
 /**
  * Returns the props and state required to render the component
  */ export const useBadge_unstable = (props, ref)=>{

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

@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
-import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import * as React from "react";
+import { shorthands, __resetStyles, __styles, mergeClasses } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
 export const badgeClassNames = {
   root: 'fui-Badge',
   icon: 'fui-Badge__icon'
@@ -320,8 +320,6 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Applies style classnames to slots
  */
 export const useBadgeStyles_unstable = state => {
-  'use no memo';
-
   const rootClassName = useRootClassName();
   const rootStyles = useRootStyles();
   const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';

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

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

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

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import * as React from "react";
+import { shorthands, makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
 export const badgeClassNames = {
     root: 'fui-Badge',
     icon: 'fui-Badge__icon'
@@ -272,7 +272,6 @@ const useIconStyles = makeStyles({
 /**
  * Applies style classnames to slots
  */ export const useBadgeStyles_unstable = (state)=>{
-    'use no memo';
     const rootClassName = useRootClassName();
     const rootStyles = useRootStyles();
     const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';

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

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

package/lib/components/CounterBadge/CounterBadge.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useCounterBadge_unstable } from './useCounterBadge';
-import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
-import { renderBadge_unstable } from '../Badge/index';
+import * as React from "react";
+import { useCounterBadge_unstable } from "./useCounterBadge.js";
+import { useCounterBadgeStyles_unstable } from "./useCounterBadgeStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
+import { renderBadge_unstable } from "../Badge/index.js";
 /**
  * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
  */ export const CounterBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,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;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["'use client';\n\nimport * 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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,uBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,oCAAiC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,oBAAiB;AAItD;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}