@fluentui/react-badge 9.0.0-alpha.81 → 9.0.0-alpha.85

package/lib/common/isConformant.js

@@ -4,6 +4,8 @@ export function isConformant(testInfo) {
   var defaultOptions = {
     asPropHandlesRef: true,
     componentPath: module.parent.filename.replace('.test', ''),
+    // https://github.com/microsoft/fluentui/issues/19522
+    skipAsPropTests: true,
     extraTests: makeStylesTests
   };
   baseIsConformant(defaultOptions, testInfo);

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AACA,OAAO,eAAP,MAA4B,yCAA5B;AAGA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    extraTests: makeStylesTests as TestObject<TProps>,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AACA,OAAO,eAAP,MAA4B,yCAA5B;AAGA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D;AACA,IAAA,eAAe,EAAE,IAJ0C;AAK3D,IAAA,UAAU,EAAE;AAL+C,GAA7D;AAQA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib/components/Badge/Badge.d.ts

@@ -2,6 +2,5 @@ import * as React from 'react';
 import type { BadgeProps } from './Badge.types';
 /**
  * Define a styled Badge, using the `useBadge` hook.
- * {@docCategory Badge}
  */
-export declare const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
+export declare const Badge: React.ForwardRefExoticComponent<Pick<BadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition"> & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Badge/Badge.js

@@ -4,7 +4,6 @@ import { useBadgeStyles } from './useBadgeStyles';
 import { renderBadge } from './renderBadge';
 /**
  * Define a styled Badge, using the `useBadge` hook.
- * {@docCategory Badge}
  */
 
 export var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,WAAT,QAA4B,eAA5B;AAGA;;;AAGG;;AACH,OAAO,IAAM,KAAK,gBAA2E,KAAK,CAAC,UAAN,CAG3F,UAAC,KAAD,EAAQ,GAAR,EAAW;AACX,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CAR4F,CAAtF;AAUP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge } from './useBadge';\nimport { useBadgeStyles } from './useBadgeStyles';\nimport { renderBadge } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\n\n/**\n * Define a styled Badge, using the `useBadge` hook.\n * {@docCategory Badge}\n */\nexport const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>> = React.forwardRef<\n  HTMLElement,\n  BadgeProps\n>((props, ref) => {\n  const state = useBadge(props, ref);\n  useBadgeStyles(state);\n\n  return renderBadge(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,cAAT,QAA+B,kBAA/B;AACA,SAAS,WAAT,QAA4B,eAA5B;AAGA;;AAEG;;AACH,OAAO,IAAM,KAAK,gBAAG,KAAK,CAAC,UAAN,CAA6C,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC3E,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AACA,EAAA,cAAc,CAAC,KAAD,CAAd;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALoB,CAAd;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}

package/lib/components/Badge/Badge.types.d.ts

@@ -1,65 +1,38 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
-/**
- * {@docCategory Badge}
- */
+import type { IntrinsicShorthandProps, ComponentProps, ComponentState } from '@fluentui/react-utilities';
 export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
-/**
- * {@docCategory Badge}
- */
 export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
-/**
- * {@docCategory Badge}
- */
 export declare type BadgeShape = 'rounded' | 'square' | 'circular';
-/**
- * {@docCategory Badge}
- */
 export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
-/**
- * {@docCategory Badge}
- */
-export interface BadgeProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+export declare type BadgeSlots = {
+    root: Omit<IntrinsicShorthandProps<'div'>, 'color'>;
+    icon?: IntrinsicShorthandProps<'span'>;
+};
+export declare type BadgeCommons = {
     /**
      * A Badge can be sized.
-     * @defaultvalue medium
+     * @default medium
      */
-    size?: BadgeSize;
+    size: BadgeSize;
     /**
      * A Badge can be square, circular or rounded
-     * @defaultvalue circular
+     * @default circular
      */
-    shape?: BadgeShape;
+    shape: BadgeShape;
     /**
      * A Badge can be filled, outline, ghost, inverted
-     * @defaultvalue filled
+     * @default filled
      */
-    appearance?: BadgeAppearance;
+    appearance: BadgeAppearance;
     /**
      * A Badge has a preset of colors
-     * @defaultvalue filled
+     * @default brand
      */
-    color?: BadgeColors;
-    /**
-     * Icon slot
-     */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    color: BadgeColors;
     /**
      * Position for Icon to be rendered
-     * @defaultvalue before
-     */
-    iconPosition?: 'before' | 'after';
-}
-/**
- * {@docCategory Badge}
- */
-export interface BadgeState extends BadgeProps {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.RefObject<HTMLElement>;
-    /**
-     * Icon slot when processed by internal state
+     * @default before
      */
-    icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
-}
+    iconPosition: 'before' | 'after';
+};
+export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeShape = 'rounded' | 'square' | 'circular';\n\n/**\n * {@docCategory Badge}\n */\nexport type BadgeColors =\n  | 'brand'\n  | 'danger'\n  | 'severe'\n  | 'warning'\n  | 'success'\n  | 'important'\n  | 'informative'\n  | 'subtle';\n\n/**\n * {@docCategory Badge}\n */\nexport interface BadgeProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {\n  /**\n   * A Badge can be sized.\n   * @defaultvalue medium\n   */\n  size?: BadgeSize;\n\n  /**\n   * A Badge can be square, circular or rounded\n   * @defaultvalue circular\n   */\n  shape?: BadgeShape;\n\n  /**\n   * A Badge can be filled, outline, ghost, inverted\n   * @defaultvalue filled\n   */\n  appearance?: BadgeAppearance;\n\n  /**\n   * A Badge has a preset of colors\n   * @defaultvalue filled\n   */\n  color?: BadgeColors;\n\n  /**\n   * Icon slot\n   */\n  icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;\n\n  /**\n   * Position for Icon to be rendered\n   * @defaultvalue before\n   */\n  iconPosition?: 'before' | 'after';\n}\n\n/**\n * {@docCategory Badge}\n */\nexport interface BadgeState extends BadgeProps {\n  /**\n   * Ref to the root slot\n   */\n  ref: React.RefObject<HTMLElement>;\n  /**\n   * Icon slot when processed by internal state\n   */\n  icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;\n}\n"]}
+{"version":3,"file":"Badge.types.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\nexport * from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/lib/components/Badge/renderBadge.js

@@ -1,12 +1,11 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import { badgeShorthandPropsCompat } from './useBadge';
+import { getSlots } from '@fluentui/react-utilities';
 export var renderBadge = function (state) {
-  var _a = getSlotsCompat(state, badgeShorthandPropsCompat),
+  var _a = getSlots(state, ['icon', 'root']),
       slots = _a.slots,
       slotProps = _a.slotProps;
 
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.iconPosition === 'before' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), state.children, state.iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.iconPosition === 'before' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)), state.root.children, state.iconPosition === 'after' && /*#__PURE__*/React.createElement(slots.icon, __assign({}, slotProps.icon)));
 };
 //# sourceMappingURL=renderBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,yBAAT,QAA0C,YAA1C;AAGA,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,yBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,iBAAmC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADtC,EAEG,KAAK,CAAC,QAFT,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,iBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAHrC,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { badgeShorthandPropsCompat } from './useBadge';\nimport type { BadgeState } from './Badge.types';\n\nexport const renderBadge = (state: BadgeState) => {\n  const { slots, slotProps } = getSlotsCompat(state, badgeShorthandPropsCompat);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && <slots.icon {...slotProps.icon} />}\n      {state.children}\n      {state.iconPosition === 'after' && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/renderBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,QAAQ,CAAa,KAAb,EAAoB,CAAC,MAAD,EAAS,MAAT,CAApB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,iBAAmC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CADtC,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,iBAAkC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAHrC,CADF;AAOD,CAVM","sourceRoot":""}

package/lib/components/Badge/useBadge.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import type { BadgeProps, BadgeState } from './Badge.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const badgeShorthandPropsCompat: readonly ["icon"];
 /**
  * Returns the props and state required to render the component
  */
-export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
+export declare const useBadge: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;

package/lib/components/Badge/useBadge.js

@@ -1,25 +1,36 @@
-import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';
-/**
- * Consts listing which props are shorthand props.
- */
-
-export var badgeShorthandPropsCompat = ['icon'];
-var mergeProps = /*#__PURE__*/makeMergeProps({
-  deepMerge: badgeShorthandPropsCompat
-});
+import { __assign } from "tslib";
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
  * Returns the props and state required to render the component
  */
 
-export var useBadge = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: useMergedRefs(ref, React.useRef(null)),
-    shape: 'circular',
-    size: 'medium',
-    iconPosition: 'before',
-    'aria-hidden': true
-  }, defaultProps && resolveShorthandProps(defaultProps, badgeShorthandPropsCompat), resolveShorthandProps(props, badgeShorthandPropsCompat));
+export var useBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.size,
+      size = _b === void 0 ? 'medium' : _b,
+      _c = props.iconPosition,
+      iconPosition = _c === void 0 ? 'before' : _c,
+      _d = props.appearance,
+      appearance = _d === void 0 ? 'filled' : _d,
+      _e = props.color,
+      color = _e === void 0 ? 'brand' : _e;
+  var state = {
+    shape: shape,
+    size: size,
+    iconPosition: iconPosition,
+    appearance: appearance,
+    color: color,
+    components: {
+      root: 'div',
+      icon: 'span'
+    },
+    root: getNativeElementProps('div', __assign({
+      ref: ref,
+      'aria-hidden': true
+    }, props)),
+    icon: resolveShorthand(props.icon)
+  };
   return state;
 };
 //# sourceMappingURL=useBadge.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,EAAgD,aAAhD,QAAqE,2BAArE;AAGA;;AAEG;;AACH,OAAO,IAAM,yBAAyB,GAAG,CAAC,MAAD,CAAlC;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAa;AAAE,EAAA,SAAS,EAAE;AAAb,CAAb,CAAjC;AAEA;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAiD,YAAjD,EAA0E;AAChG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAN,CAAa,IAAb,CAAN,CADpB;AAEE,IAAA,KAAK,EAAE,UAFT;AAGE,IAAA,IAAI,EAAE,QAHR;AAIE,IAAA,YAAY,EAAE,QAJhB;AAKE,mBAAe;AALjB,GADsB,EAQtB,YAAY,IAAI,qBAAqB,CAAC,YAAD,EAAe,yBAAf,CARf,EAStB,qBAAqB,CAAC,KAAD,EAAQ,yBAAR,CATC,CAAxB;AAYA,SAAO,KAAP;AACD,CAdM","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const badgeShorthandPropsCompat = ['icon'] as const;\n\nconst mergeProps = makeMergeProps<BadgeState>({ deepMerge: badgeShorthandPropsCompat });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge = (props: BadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: BadgeProps): BadgeState => {\n  const state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n      shape: 'circular',\n      size: 'medium',\n      iconPosition: 'before',\n      'aria-hidden': true,\n    },\n    defaultProps && resolveShorthandProps(defaultProps, badgeShorthandPropsCompat),\n    resolveShorthandProps(props, badgeShorthandPropsCompat),\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/useBadge.ts"],"names":[],"mappings":";AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAEnE,MAAA,EAAA,GAKE,KAAK,CALW,KAAlB;AAAA,MAAA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,UAAH,GAAa,EAAlB;AAAA,MACA,EAAA,GAIE,KAAK,CAJQ,IADf;AAAA,MACA,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EADf;AAAA,MAEA,EAAA,GAGE,KAAK,CAHgB,YAFvB;AAAA,MAEA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAFvB;AAAA,MAGA,EAAA,GAEE,KAAK,CAFc,UAHrB;AAAA,MAGA,UAAU,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAHrB;AAAA,MAIA,EAAA,GACE,KAAK,CADQ,KAJf;AAAA,MAIA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,OAAH,GAAU,EAJf;AAOF,MAAM,KAAK,GAAe;AACxB,IAAA,KAAK,EAAA,KADmB;AAExB,IAAA,IAAI,EAAA,IAFoB;AAGxB,IAAA,YAAY,EAAA,YAHY;AAIxB,IAAA,UAAU,EAAA,UAJc;AAKxB,IAAA,KAAK,EAAA,KALmB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KANY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA;AAC/B,MAAA,GAAG,EAAA,GAD4B;AAE/B,qBAAe;AAFgB,KAAA,EAG5B,KAH4B,CAAN,CAVH;AAexB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAfE,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM","sourceRoot":""}

package/lib/components/Badge/useBadgeStyles.js

@@ -313,7 +313,7 @@ export var useBadgeStyles = function (state) {
   var isImportant = state.color === 'important';
   var isInformative = state.color === 'informative';
   var isSubtle = state.color === 'subtle';
-  state.className = mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.className);
+  state.root.className = mergeClasses(styles.root, state.size === 'smallest' && styles.rootSmallest, state.size === 'smaller' && styles.rootSmaller, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') && styles.rootRoundedSmallSmallerSmallest, isGhost && styles.rootGhost, isOutline && styles.rootOutline, isTint && styles.rootTint, isFilled && isDanger && styles.rootFilledDanger, isOutline && isDanger && styles.rootOutlineDanger, isTint && isDanger && styles.rootTintDanger, isGhost && isDanger && styles.rootGhostDanger, isFilled && isSevere && styles.rootFilledSevere, isOutline && isSevere && styles.rootOutlineSevere, isTint && isSevere && styles.rootTintSevere, isGhost && isSevere && styles.rootGhostSevere, isFilled && isWarning && styles.rootFilledWarning, isOutline && isWarning && styles.rootOutlineWarning, isTint && isWarning && styles.rootTintWarning, isGhost && isWarning && styles.rootGhostWarning, isFilled && isSuccess && styles.rootFilledSuccess, isOutline && isSuccess && styles.rootOutlineSuccess, isTint && isSuccess && styles.rootTintSuccess, isGhost && isSuccess && styles.rootGhostSuccess, isFilled && isImportant && styles.rootFilledImportant, isOutline && isImportant && styles.rootOutlineImportant, isTint && isImportant && styles.rootTintImportant, isGhost && isImportant && styles.rootGhostImportant, isFilled && isInformative && styles.rootFilledInformative, isOutline && isInformative && styles.rootOutlineInformative, isTint && isInformative && styles.rootTintInformative, isGhost && isInformative && styles.rootGhostInformative, isFilled && isSubtle && styles.rootFilledSubtle, isOutline && isSubtle && styles.rootOutlineSubtle, isTint && isSubtle && styles.rootTintSubtle, isGhost && isSubtle && styles.rootGhostSubtle, state.root.className);
 
   if (state.icon) {
     state.icon.className = mergeClasses(styles.icon, state.icon.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA4MA;;AAEG;;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAN,KAAqB,OAArC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAN,KAAqB,SAAvC;AACA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAN,KAAqB,MAApC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAN,KAAqB,QAAtC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAlC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAlC;AACA,MAAM,WAAW,GAAG,KAAK,CAAC,KAAN,KAAgB,WAApC;AACA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,KAAgB,aAAtC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AAEA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,IAAN,KAAe,UAAf,IAA6B,MAAM,CAAC,YAFR,EAG5B,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,WAHP,EAI5B,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,SAJL,EAK5B,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,MAAM,CAAC,UALN,EAM5B,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,SANL,EAO5B,CAAC,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,KAAK,CAAC,IAAN,KAAe,SAA3C,KAAyD,MAAM,CAAC,iBAPpC,EAQ5B,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YART,EAS5B,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WATR,EAU5B,KAAK,CAAC,KAAN,KAAgB,SAAhB,KACG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,IAAN,KAAe,SAAzC,IAAsD,KAAK,CAAC,IAAN,KAAe,UADxE,KAEE,MAAM,CAAC,+BAZmB,EAa5B,OAAO,IAAI,MAAM,CAAC,SAbU,EAc5B,SAAS,IAAI,MAAM,CAAC,WAdQ,EAe5B,MAAM,IAAI,MAAM,CAAC,QAfW,EAgB5B,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBAhBH,EAiB5B,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBAjBJ,EAkB5B,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cAlBD,EAmB5B,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eAnBF,EAoB5B,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBApBH,EAqB5B,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBArBJ,EAsB5B,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cAtBD,EAuB5B,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eAvBF,EAwB5B,QAAQ,IAAI,SAAZ,IAAyB,MAAM,CAAC,iBAxBJ,EAyB5B,SAAS,IAAI,SAAb,IAA0B,MAAM,CAAC,kBAzBL,EA0B5B,MAAM,IAAI,SAAV,IAAuB,MAAM,CAAC,eA1BF,EA2B5B,OAAO,IAAI,SAAX,IAAwB,MAAM,CAAC,gBA3BH,EA4B5B,QAAQ,IAAI,SAAZ,IAAyB,MAAM,CAAC,iBA5BJ,EA6B5B,SAAS,IAAI,SAAb,IAA0B,MAAM,CAAC,kBA7BL,EA8B5B,MAAM,IAAI,SAAV,IAAuB,MAAM,CAAC,eA9BF,EA+B5B,OAAO,IAAI,SAAX,IAAwB,MAAM,CAAC,gBA/BH,EAgC5B,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,mBAhCN,EAiC5B,SAAS,IAAI,WAAb,IAA4B,MAAM,CAAC,oBAjCP,EAkC5B,MAAM,IAAI,WAAV,IAAyB,MAAM,CAAC,iBAlCJ,EAmC5B,OAAO,IAAI,WAAX,IAA0B,MAAM,CAAC,kBAnCL,EAoC5B,QAAQ,IAAI,aAAZ,IAA6B,MAAM,CAAC,qBApCR,EAqC5B,SAAS,IAAI,aAAb,IAA8B,MAAM,CAAC,sBArCT,EAsC5B,MAAM,IAAI,aAAV,IAA2B,MAAM,CAAC,mBAtCN,EAuC5B,OAAO,IAAI,aAAX,IAA4B,MAAM,CAAC,oBAvCP,EAwC5B,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBAxCH,EAyC5B,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBAzCJ,EA0C5B,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cA1CD,EA2C5B,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eA3CF,EA4C5B,KAAK,CAAC,SA5CsB,CAA9B;;AA+CA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CAlEM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport type { BadgeState } from './Badge.types';\n\nconst useStyles = makeStyles({\n  root: theme => ({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: theme.alias.color.neutral.brandBackground,\n    borderColor: theme.alias.color.neutral.brandBackground,\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    fontWeight: theme.global.type.fontWeights.semibold,\n    borderWidth: theme.global.strokeWidth.thin,\n    borderStyle: 'solid',\n    fontFamily: theme.global.type.fontFamilies.base,\n    position: 'relative',\n  }),\n  rootSmallest: {\n    width: '6px',\n    height: '6px',\n    fontSize: '4px',\n  },\n  rootSmaller: {\n    width: '10px',\n    height: '10px',\n    fontSize: '6px',\n  },\n  rootSmall: {\n    minWidth: '16px',\n    height: '16px',\n    paddingRight: '6px',\n    paddingLeft: '6px',\n    gap: '4px',\n    fontSize: '8px',\n  },\n  rootMedium: {\n    height: '20px',\n    minWidth: '20px',\n    gap: '4px',\n    paddingRight: '8px',\n    paddingLeft: '8px',\n    fontSize: '10px',\n  },\n  rootLarge: {\n    minWidth: '24px',\n    height: '24px',\n    paddingRight: '8px',\n    paddingLeft: '8px',\n    fontSize: '12px',\n    gap: '6px',\n  },\n  rootLargerLargest: theme => ({\n    minWidth: '32px',\n    height: '32px',\n    paddingRight: '12px',\n    paddingLeft: '12px',\n    gap: '6px',\n    fontSize: '12px',\n    borderWidth: theme.global.strokeWidth.thick,\n  }),\n  rootRounded: theme => ({ borderRadius: theme.global.borderRadius.medium }),\n  rootRoundedSmallSmallerSmallest: theme => ({ borderRadius: theme.global.borderRadius.small }),\n  rootCircular: { borderRadius: '99px' },\n  rootGhost: theme => ({\n    background: 'transparent',\n    border: 'none',\n    color: theme.alias.color.neutral.brandBackground,\n  }),\n  rootOutline: theme => ({\n    background: 'transparent',\n    borderColor: theme.alias.color.neutral.brandBackground,\n    color: theme.alias.color.neutral.brandBackground,\n  }),\n  rootTint: theme => ({\n    backgroundColor: theme.global.palette.brand.tint60,\n    color: theme.global.palette.brand.shade40,\n    borderColor: 'none',\n  }),\n  rootFilledDanger: theme => ({\n    backgroundColor: theme.alias.color.red.background3,\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    borderColor: theme.alias.color.red.background3,\n  }),\n  rootOutlineDanger: theme => ({\n    color: theme.alias.color.red.foreground3,\n    borderColor: theme.alias.color.red.foreground3,\n  }),\n  rootTintDanger: theme => ({\n    backgroundColor: theme.alias.color.red.background1,\n    color: theme.alias.color.red.foreground1,\n    borderColor: theme.alias.color.red.foreground2,\n  }),\n  rootGhostDanger: theme => ({\n    color: theme.alias.color.red.foreground3,\n  }),\n  rootFilledSevere: theme => ({\n    backgroundColor: theme.alias.color.darkOrange.background3,\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    borderColor: 'none',\n  }),\n  rootOutlineSevere: theme => ({\n    color: theme.alias.color.darkOrange.foreground3,\n    borderColor: theme.alias.color.darkOrange.foreground3,\n  }),\n  rootTintSevere: theme => ({\n    backgroundColor: theme.alias.color.darkOrange.background1,\n    color: theme.alias.color.darkOrange.foreground1,\n    borderColor: theme.alias.color.darkOrange.foreground2,\n  }),\n  rootGhostSevere: theme => ({\n    color: theme.alias.color.darkOrange.foreground3,\n  }),\n  rootFilledWarning: theme => ({\n    backgroundColor: theme.alias.color.yellow.background3,\n    color: theme.alias.color.neutral.neutralForeground1,\n    borderColor: theme.alias.color.yellow.background3,\n  }),\n  rootOutlineWarning: theme => ({\n    color: theme.alias.color.yellow.foreground2,\n    borderColor: theme.alias.color.yellow.foreground2,\n  }),\n  rootTintWarning: theme => ({\n    backgroundColor: theme.alias.color.yellow.background1,\n    color: theme.alias.color.yellow.foreground2,\n    borderColor: theme.alias.color.yellow.background2,\n  }),\n  rootGhostWarning: theme => ({\n    color: theme.alias.color.yellow.foreground2,\n  }),\n  rootFilledSuccess: theme => ({\n    backgroundColor: theme.alias.color.green.background3,\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    borderColor: 'none',\n  }),\n  rootOutlineSuccess: theme => ({\n    color: theme.alias.color.green.foreground2,\n    borderColor: theme.alias.color.green.foreground2,\n  }),\n  rootTintSuccess: theme => ({\n    backgroundColor: theme.alias.color.green.background1,\n    color: theme.alias.color.green.foreground1,\n    borderColor: theme.alias.color.green.background2,\n  }),\n  rootGhostSuccess: theme => ({\n    color: theme.alias.color.green.foreground3,\n  }),\n  rootFilledImportant: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralForeground1,\n    color: theme.alias.color.neutral.neutralBackground1,\n    borderColor: theme.alias.color.neutral.transparentStroke,\n  }),\n  rootOutlineImportant: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n    borderColor: theme.alias.color.neutral.neutralForeground1,\n  }),\n  rootTintImportant: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralForeground3,\n    color: theme.alias.color.neutral.neutralBackground1,\n    borderColor: theme.alias.color.neutral.transparentStroke,\n  }),\n  rootGhostImportant: theme => ({\n    color: theme.alias.color.neutral.neutralForeground1,\n  }),\n  rootFilledInformative: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground5,\n    color: theme.alias.color.neutral.neutralForeground3,\n    borderColor: theme.alias.color.neutral.transparentStroke,\n  }),\n  rootOutlineInformative: theme => ({\n    backgroundColor: theme.alias.color.darkOrange.background3,\n    color: theme.alias.color.neutral.neutralBackground5,\n    borderColor: theme.alias.color.neutral.neutralBackground5,\n  }),\n  rootTintInformative: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground4,\n    color: theme.alias.color.neutral.neutralForeground3,\n    borderColor: theme.alias.color.neutral.neutralStroke2,\n  }),\n  rootGhostInformative: theme => ({\n    color: theme.alias.color.neutral.neutralBackground5,\n  }),\n  rootFilledSubtle: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground1,\n    borderColor: theme.alias.color.neutral.transparentStroke,\n  }),\n  rootOutlineSubtle: theme => ({\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n    borderColor: theme.alias.color.neutral.neutralForegroundOnBrand,\n  }),\n  rootTintSubtle: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    color: theme.alias.color.neutral.neutralForeground3,\n    borderColor: theme.alias.color.neutral.neutralStroke2,\n  }),\n  rootGhostSubtle: theme => ({\n    color: theme.alias.color.neutral.neutralForegroundOnBrand,\n  }),\n  icon: {\n    display: 'flex',\n    alignContent: 'center',\n    alignItems: 'center',\n    height: '100%',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useBadgeStyles = (state: BadgeState): BadgeState => {\n  const styles = useStyles();\n  const isGhost = state.appearance === 'ghost';\n  const isOutline = state.appearance === 'outline';\n  const isTint = state.appearance === 'tint';\n  const isFilled = state.appearance === 'filled';\n  const isDanger = state.color === 'danger';\n  const isSevere = state.color === 'severe';\n  const isWarning = state.color === 'warning';\n  const isSuccess = state.color === 'success';\n  const isImportant = state.color === 'important';\n  const isInformative = state.color === 'informative';\n  const isSubtle = state.color === 'subtle';\n\n  state.className = mergeClasses(\n    styles.root,\n    state.size === 'smallest' && styles.rootSmallest,\n    state.size === 'smaller' && styles.rootSmaller,\n    state.size === 'small' && styles.rootSmall,\n    state.size === 'medium' && styles.rootMedium,\n    state.size === 'large' && styles.rootLarge,\n    (state.size === 'larger' || state.size === 'largest') && styles.rootLargerLargest,\n    state.shape === 'circular' && styles.rootCircular,\n    state.shape === 'rounded' && styles.rootRounded,\n    state.shape === 'rounded' &&\n      (state.size === 'small' || state.size === 'smaller' || state.size === 'smallest') &&\n      styles.rootRoundedSmallSmallerSmallest,\n    isGhost && styles.rootGhost,\n    isOutline && styles.rootOutline,\n    isTint && styles.rootTint,\n    isFilled && isDanger && styles.rootFilledDanger,\n    isOutline && isDanger && styles.rootOutlineDanger,\n    isTint && isDanger && styles.rootTintDanger,\n    isGhost && isDanger && styles.rootGhostDanger,\n    isFilled && isSevere && styles.rootFilledSevere,\n    isOutline && isSevere && styles.rootOutlineSevere,\n    isTint && isSevere && styles.rootTintSevere,\n    isGhost && isSevere && styles.rootGhostSevere,\n    isFilled && isWarning && styles.rootFilledWarning,\n    isOutline && isWarning && styles.rootOutlineWarning,\n    isTint && isWarning && styles.rootTintWarning,\n    isGhost && isWarning && styles.rootGhostWarning,\n    isFilled && isSuccess && styles.rootFilledSuccess,\n    isOutline && isSuccess && styles.rootOutlineSuccess,\n    isTint && isSuccess && styles.rootTintSuccess,\n    isGhost && isSuccess && styles.rootGhostSuccess,\n    isFilled && isImportant && styles.rootFilledImportant,\n    isOutline && isImportant && styles.rootOutlineImportant,\n    isTint && isImportant && styles.rootTintImportant,\n    isGhost && isImportant && styles.rootGhostImportant,\n    isFilled && isInformative && styles.rootFilledInformative,\n    isOutline && isInformative && styles.rootOutlineInformative,\n    isTint && isInformative && styles.rootTintInformative,\n    isGhost && isInformative && styles.rootGhostInformative,\n    isFilled && isSubtle && styles.rootFilledSubtle,\n    isOutline && isSubtle && styles.rootOutlineSubtle,\n    isTint && isSubtle && styles.rootTintSubtle,\n    isGhost && isSubtle && styles.rootGhostSubtle,\n    state.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(styles.icon, state.icon.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/Badge/useBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AA4MA;;AAEG;;;AACH,OAAO,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAN,KAAqB,OAArC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAN,KAAqB,SAAvC;AACA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAN,KAAqB,MAApC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAN,KAAqB,QAAtC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAlC;AACA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAN,KAAgB,SAAlC;AACA,MAAM,WAAW,GAAG,KAAK,CAAC,KAAN,KAAgB,WAApC;AACA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAN,KAAgB,aAAtC;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAN,KAAgB,QAAjC;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,IAAN,KAAe,UAAf,IAA6B,MAAM,CAAC,YAFH,EAGjC,KAAK,CAAC,IAAN,KAAe,SAAf,IAA4B,MAAM,CAAC,WAHF,EAIjC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,SAJA,EAKjC,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,MAAM,CAAC,UALD,EAMjC,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,MAAM,CAAC,SANA,EAOjC,CAAC,KAAK,CAAC,IAAN,KAAe,QAAf,IAA2B,KAAK,CAAC,IAAN,KAAe,SAA3C,KAAyD,MAAM,CAAC,iBAP/B,EAQjC,KAAK,CAAC,KAAN,KAAgB,UAAhB,IAA8B,MAAM,CAAC,YARJ,EASjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,WATH,EAUjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,KACG,KAAK,CAAC,IAAN,KAAe,OAAf,IAA0B,KAAK,CAAC,IAAN,KAAe,SAAzC,IAAsD,KAAK,CAAC,IAAN,KAAe,UADxE,KAEE,MAAM,CAAC,+BAZwB,EAajC,OAAO,IAAI,MAAM,CAAC,SAbe,EAcjC,SAAS,IAAI,MAAM,CAAC,WAda,EAejC,MAAM,IAAI,MAAM,CAAC,QAfgB,EAgBjC,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBAhBE,EAiBjC,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBAjBC,EAkBjC,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cAlBI,EAmBjC,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eAnBG,EAoBjC,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBApBE,EAqBjC,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBArBC,EAsBjC,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cAtBI,EAuBjC,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eAvBG,EAwBjC,QAAQ,IAAI,SAAZ,IAAyB,MAAM,CAAC,iBAxBC,EAyBjC,SAAS,IAAI,SAAb,IAA0B,MAAM,CAAC,kBAzBA,EA0BjC,MAAM,IAAI,SAAV,IAAuB,MAAM,CAAC,eA1BG,EA2BjC,OAAO,IAAI,SAAX,IAAwB,MAAM,CAAC,gBA3BE,EA4BjC,QAAQ,IAAI,SAAZ,IAAyB,MAAM,CAAC,iBA5BC,EA6BjC,SAAS,IAAI,SAAb,IAA0B,MAAM,CAAC,kBA7BA,EA8BjC,MAAM,IAAI,SAAV,IAAuB,MAAM,CAAC,eA9BG,EA+BjC,OAAO,IAAI,SAAX,IAAwB,MAAM,CAAC,gBA/BE,EAgCjC,QAAQ,IAAI,WAAZ,IAA2B,MAAM,CAAC,mBAhCD,EAiCjC,SAAS,IAAI,WAAb,IAA4B,MAAM,CAAC,oBAjCF,EAkCjC,MAAM,IAAI,WAAV,IAAyB,MAAM,CAAC,iBAlCC,EAmCjC,OAAO,IAAI,WAAX,IAA0B,MAAM,CAAC,kBAnCA,EAoCjC,QAAQ,IAAI,aAAZ,IAA6B,MAAM,CAAC,qBApCH,EAqCjC,SAAS,IAAI,aAAb,IAA8B,MAAM,CAAC,sBArCJ,EAsCjC,MAAM,IAAI,aAAV,IAA2B,MAAM,CAAC,mBAtCD,EAuCjC,OAAO,IAAI,aAAX,IAA4B,MAAM,CAAC,oBAvCF,EAwCjC,QAAQ,IAAI,QAAZ,IAAwB,MAAM,CAAC,gBAxCE,EAyCjC,SAAS,IAAI,QAAb,IAAyB,MAAM,CAAC,iBAzCC,EA0CjC,MAAM,IAAI,QAAV,IAAsB,MAAM,CAAC,cA1CI,EA2CjC,OAAO,IAAI,QAAX,IAAuB,MAAM,CAAC,eA3CG,EA4CjC,KAAK,CAAC,IAAN,CAAW,SA5CsB,CAAnC;;AA+CA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CAlEM","sourceRoot":""}

package/lib/components/CounterBadge/CounterBadge.d.ts

@@ -2,6 +2,5 @@ import * as React from 'react';
 import type { CounterBadgeProps } from './CounterBadge.types';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge` hook.
- * {@docCategory CounterBadge}
  */
-export declare const CounterBadge: React.ForwardRefExoticComponent<CounterBadgeProps & React.RefAttributes<HTMLElement>>;
+export declare const CounterBadge: React.ForwardRefExoticComponent<Pick<CounterBadgeProps, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "as" | "icon" | "shape" | "size" | "appearance" | "iconPosition" | "overflowCount" | "count" | "showZero" | "dot"> & React.RefAttributes<HTMLElement>>;

package/lib/components/CounterBadge/CounterBadge.js

@@ -4,7 +4,6 @@ import { useCounterBadgeStyles } from './useCounterBadgeStyles';
 import { renderBadge } from '../Badge/index';
 /**
  * Define a styled CounterBadge, using the `useCounterBadge` hook.
- * {@docCategory CounterBadge}
  */
 
 export var CounterBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AACA,SAAS,WAAT,QAA4B,gBAA5B;AAGA;;;AAGG;;AACH,OAAO,IAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACtF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CAL2B,CAArB;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourcesContent":["import * as React from 'react';\nimport { useCounterBadge } from './useCounterBadge';\nimport { useCounterBadgeStyles } from './useCounterBadgeStyles';\nimport { renderBadge } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge` hook.\n * {@docCategory CounterBadge}\n */\nexport const CounterBadge = React.forwardRef<HTMLElement, CounterBadgeProps>((props, ref) => {\n  const state = useCounterBadge(props, ref);\n  useCounterBadgeStyles(state);\n\n  return renderBadge(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/CounterBadge/CounterBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,mBAAhC;AACA,SAAS,qBAAT,QAAsC,yBAAtC;AACA,SAAS,WAAT,QAA4B,gBAA5B;AAGA;;AAEG;;AACH,OAAO,IAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiD,UAAC,KAAD,EAAQ,GAAR,EAAW;AACtF,MAAM,KAAK,GAAG,eAAe,CAAC,KAAD,EAAQ,GAAR,CAA7B;AACA,EAAA,qBAAqB,CAAC,KAAD,CAArB;AAEA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CAL2B,CAArB;AAOP,YAAY,CAAC,WAAb,GAA2B,cAA3B","sourceRoot":""}

package/lib/components/CounterBadge/CounterBadge.types.d.ts

@@ -1,61 +1,41 @@
 import type { BadgeProps, BadgeState } from '../Badge/index';
-/**
- * {@docCategory CounterBadge}
- */
-export interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {
-    /**
-     * A Badge can be circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;
-    /**
-     * A Badge can be filled, ghost
-     * @defaultvalue filled
-     */
-    appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;
-    /**
-     * Max number to be displayed
-     * @defaultvalue 99
-     */
-    overflowCount?: number;
-    /**
-     * Value displayed by the Badge
-     * @defaultvalue 0
-     */
-    count?: number;
-    /**
-     * If the badge should be shown when count is 0
-     * @defaultvalue false
-     */
-    showZero?: boolean;
-    /**
-     * If a dot badge should be displayed
-     * @defaultvalue false
-     */
-    dot?: boolean;
-}
-/**
- * {@docCategory CounterBadge}
- */
-export interface CounterBadgeState extends BadgeState {
+export declare type CounterBadgeCommons = {
     /**
      * Max number to be displayed
-     * @defaultvalue 99
+     * @default 99
      */
     overflowCount: number;
     /**
      * Value displayed by the Badge
-     * @defaultvalue 0
+     * @default 0
      */
     count: number;
     /**
      * If the badge should be shown when count is 0
-     * @defaultvalue false
+     * @default false
      */
     showZero: boolean;
     /**
      * If a dot badge should be displayed
-     * @defaultvalue false
+     * @default false
      */
     dot: boolean;
-}
+    /**
+     * A Badge can be circular or rounded
+     * @default circular
+     */
+    shape: 'rounded' | 'circular';
+    /**
+     * A Badge can be filled, ghost
+     * @default filled
+     */
+    appearance: 'filled' | 'ghost';
+};
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.types.js","sourceRoot":"../src/","sources":["components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\n/**\n * {@docCategory CounterBadge}\n */\nexport interface CounterBadgeProps extends Omit<BadgeProps, 'appearance' | 'shape'> {\n  /**\n   * A Badge can be circular or rounded\n   * @defaultvalue circular\n   */\n  shape?: Extract<BadgeProps['shape'], 'rounded' | 'circular'>;\n\n  /**\n   * A Badge can be filled, ghost\n   * @defaultvalue filled\n   */\n  appearance?: Extract<BadgeProps['appearance'], 'filled' | 'ghost'>;\n\n  /**\n   * Max number to be displayed\n   * @defaultvalue 99\n   */\n  overflowCount?: number;\n\n  /**\n   * Value displayed by the Badge\n   * @defaultvalue 0\n   */\n  count?: number;\n\n  /**\n   * If the badge should be shown when count is 0\n   * @defaultvalue false\n   */\n  showZero?: boolean;\n\n  /**\n   * If a dot badge should be displayed\n   * @defaultvalue false\n   */\n  dot?: boolean;\n}\n\n/**\n * {@docCategory CounterBadge}\n */\nexport interface CounterBadgeState extends BadgeState {\n  /**\n   * Max number to be displayed\n   * @defaultvalue 99\n   */\n  overflowCount: number;\n\n  /**\n   * Value displayed by the Badge\n   * @defaultvalue 0\n   */\n  count: number;\n\n  /**\n   * If the badge should be shown when count is 0\n   * @defaultvalue false\n   */\n  showZero: boolean;\n\n  /**\n   * If a dot badge should be displayed\n   * @defaultvalue false\n   */\n  dot: boolean;\n}\n"]}
+{"version":3,"file":"CounterBadge.types.js","sourceRoot":"","sources":["../../../src/components/CounterBadge/CounterBadge.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/CounterBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './CounterBadge';\nexport * from './CounterBadge.types';\nexport * from './useCounterBadge';\nexport * from './useCounterBadgeStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CounterBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}

package/lib/components/CounterBadge/useCounterBadge.d.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
 /**
  * Returns the props and state required to render the component
  */
-export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React.Ref<HTMLElement>) => CounterBadgeState;

package/lib/components/CounterBadge/useCounterBadge.js

@@ -1,28 +1,34 @@
-import { makeMergePropsCompat } from '@fluentui/react-utilities';
+import { __assign } from "tslib";
 import { useBadge } from '../Badge/index';
-/**
- * Consts listing which props are shorthand props.
- */
-
-export var counterBadgeShorthandPropsCompat = ['icon']; // eslint-disable-next-line deprecation/deprecation
-
-var mergeProps = /*#__PURE__*/makeMergePropsCompat({
-  deepMerge: counterBadgeShorthandPropsCompat
-});
 /**
  * Returns the props and state required to render the component
  */
 
-export var useCounterBadge = function (props, ref, defaultProps) {
-  var state = useBadge(props, ref, mergeProps({
-    showZero: false,
-    overflowCount: 99,
-    count: 0,
-    dot: false
-  }, defaultProps));
+export var useCounterBadge = function (props, ref) {
+  var _a = props.shape,
+      shape = _a === void 0 ? 'circular' : _a,
+      _b = props.appearance,
+      appearance = _b === void 0 ? 'filled' : _b,
+      _c = props.showZero,
+      showZero = _c === void 0 ? false : _c,
+      _d = props.overflowCount,
+      overflowCount = _d === void 0 ? 99 : _d,
+      _e = props.count,
+      count = _e === void 0 ? 0 : _e,
+      _f = props.dot,
+      dot = _f === void 0 ? false : _f;
+
+  var state = __assign(__assign({}, useBadge(props, ref)), {
+    shape: shape,
+    appearance: appearance,
+    showZero: showZero,
+    overflowCount: overflowCount,
+    count: count,
+    dot: dot
+  });
 
-  if (!state.dot && !state.children) {
-    state.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
+  if (!state.dot && !state.root.children) {
+    state.root.children = state.count > state.overflowCount ? state.overflowCount + "+" : "" + state.count;
   }
 
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":"AACA,SAAS,oBAAT,QAAqC,2BAArC;AACA,SAAS,QAAT,QAAyB,gBAAzB;AAIA;;AAEG;;AACH,OAAO,IAAM,gCAAgC,GAAG,CAAC,MAAD,CAAzC,C,CAEP;;AACA,IAAM,UAAU,gBAAG,oBAAoB,CAAoB;AAAE,EAAA,SAAS,EAAE;AAAb,CAApB,CAAvC;AAEA;;AAEG;;AACH,OAAO,IAAM,eAAe,GAAG,UAC7B,KAD6B,EAE7B,GAF6B,EAG7B,YAH6B,EAGG;AAEhC,MAAM,KAAK,GAAG,QAAQ,CACpB,KADoB,EAEpB,GAFoB,EAGpB,UAAU,CACR;AACE,IAAA,QAAQ,EAAE,KADZ;AAEE,IAAA,aAAa,EAAE,EAFjB;AAGE,IAAA,KAAK,EAAE,CAHT;AAIE,IAAA,GAAG,EAAE;AAJP,GADQ,EAOR,YAPQ,CAHU,CAAtB;;AAcA,MAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,QAAzB,EAAmC;AACjC,IAAA,KAAK,CAAC,QAAN,GAAiB,KAAK,CAAC,KAAN,GAAc,KAAK,CAAC,aAApB,GAAuC,KAAK,CAAC,aAAN,GAAmB,GAA1D,GAAgE,KAAG,KAAK,CAAC,KAA1F;AACD;;AAED,SAAO,KAAP;AACD,CAxBM","sourcesContent":["import * as React from 'react';\nimport { makeMergePropsCompat } from '@fluentui/react-utilities';\nimport { useBadge } from '../Badge/index';\nimport type { CounterBadgeProps, CounterBadgeState } from './CounterBadge.types';\nimport type { BadgeProps } from '../Badge/index';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const counterBadgeShorthandPropsCompat = ['icon'] as const;\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<CounterBadgeState>({ deepMerge: counterBadgeShorthandPropsCompat });\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge = (\n  props: CounterBadgeProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: CounterBadgeProps,\n): CounterBadgeState => {\n  const state = useBadge(\n    props,\n    ref,\n    mergeProps(\n      {\n        showZero: false,\n        overflowCount: 99,\n        count: 0,\n        dot: false,\n      },\n      defaultProps,\n    ) as BadgeProps,\n  ) as CounterBadgeState;\n\n  if (!state.dot && !state.children) {\n    state.children = state.count > state.overflowCount ? `${state.overflowCount}+` : `${state.count}`;\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/CounterBadge/useCounterBadge.ts"],"names":[],"mappings":";AACA,SAAS,QAAT,QAAyB,gBAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,eAAe,GAAG,UAAC,KAAD,EAA2B,GAA3B,EAAsD;AAEjF,MAAA,EAAA,GAME,KAAK,CANW,KAAlB;AAAA,MAAA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,UAAH,GAAa,EAAlB;AAAA,MACA,EAAA,GAKE,KAAK,CALc,UADrB;AAAA,MACA,UAAU,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EADrB;AAAA,MAEA,EAAA,GAIE,KAAK,CAJS,QAFhB;AAAA,MAEA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAFhB;AAAA,MAGA,EAAA,GAGE,KAAK,CAHW,aAHlB;AAAA,MAGA,aAAa,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAH,GAAK,EAHlB;AAAA,MAIA,EAAA,GAEE,KAAK,CAFE,KAJT;AAAA,MAIA,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,CAAH,GAAI,EAJT;AAAA,MAKA,EAAA,GACE,KAAK,CADI,GALX;AAAA,MAKA,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EALX;;AAQF,MAAM,KAAK,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACN,QAAQ,CAAC,KAAD,EAAQ,GAAR,CADF,CAAA,EACc;AACvB,IAAA,KAAK,EAAA,KADkB;AAEvB,IAAA,UAAU,EAAA,UAFa;AAGvB,IAAA,QAAQ,EAAA,QAHe;AAIvB,IAAA,aAAa,EAAA,aAJU;AAKvB,IAAA,KAAK,EAAA,KALkB;AAMvB,IAAA,GAAG,EAAA;AANoB,GADd,CAAX;;AAUA,MAAI,CAAC,KAAK,CAAC,GAAP,IAAc,CAAC,KAAK,CAAC,IAAN,CAAW,QAA9B,EAAwC;AACtC,IAAA,KAAK,CAAC,IAAN,CAAW,QAAX,GAAsB,KAAK,CAAC,KAAN,GAAc,KAAK,CAAC,aAApB,GAAuC,KAAK,CAAC,aAAN,GAAmB,GAA1D,GAAgE,KAAG,KAAK,CAAC,KAA/F;AACD;;AAED,SAAO,KAAP;AACD,CAzBM","sourceRoot":""}

package/lib/components/CounterBadge/useCounterBadgeStyles.js

@@ -55,7 +55,7 @@ var useStyles = /*#__PURE__*/__styles({
 
 export var useCounterBadgeStyles = function (state) {
   var styles = useStyles();
-  state.className = mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.className);
+  state.root.className = mergeClasses(styles.root, state.color === 'warning' && styles.warning, state.color === 'important' && styles.important, state.color === 'severe' && styles.severe, state.color === 'informative' && styles.informative, state.dot && styles.dot, !state.showZero && state.count === 0 && !state.dot && styles.hide, state.root.className);
   return useBadgeStyles(state);
 };
 //# sourceMappingURL=useCounterBadgeStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,cAAT,QAA+B,yBAA/B;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAgCA;;AAEG;;;AACH,OAAO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,OAFR,EAG5B,KAAK,CAAC,KAAN,KAAgB,WAAhB,IAA+B,MAAM,CAAC,SAHV,EAI5B,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,MAJP,EAK5B,KAAK,CAAC,KAAN,KAAgB,aAAhB,IAAiC,MAAM,CAAC,WALZ,EAM5B,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GANQ,EAO5B,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAPjC,EAQ5B,KAAK,CAAC,SARsB,CAA9B;AAUA,SAAO,cAAc,CAAC,KAAD,CAArB;AACD,CAbM","sourcesContent":["import { mergeClasses, makeStyles } from '@fluentui/react-make-styles';\nimport { useBadgeStyles } from '../Badge/useBadgeStyles';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nconst useStyles = makeStyles({\n  root: {\n    minWidth: 'auto',\n  },\n  warning: theme => ({\n    backgroundColor: theme.global.palette.cranberry.primary,\n    borderColor: theme.global.palette.cranberry.primary,\n  }),\n  important: theme => ({\n    backgroundColor: theme.global.palette.grey[14],\n    borderColor: theme.global.palette.grey[14],\n  }),\n  severe: theme => ({\n    // TODO: update these colors once the color used in the design spec has existing color token\n    backgroundColor: theme.global.palette.red.primary,\n    borderColor: theme.global.palette.red.primary,\n  }),\n  informative: theme => ({\n    backgroundColor: theme.global.palette.grey[92],\n    borderColor: theme.global.palette.grey[92],\n    color: theme.alias.color.neutral.neutralForeground3,\n  }),\n  dot: {\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles = (state: CounterBadgeState): CounterBadgeState => {\n  const styles = useStyles();\n  state.className = mergeClasses(\n    styles.root,\n    state.color === 'warning' && styles.warning,\n    state.color === 'important' && styles.important,\n    state.color === 'severe' && styles.severe,\n    state.color === 'informative' && styles.informative,\n    state.dot && styles.dot,\n    !state.showZero && state.count === 0 && !state.dot && styles.hide,\n    state.className,\n  );\n  return useBadgeStyles(state) as CounterBadgeState;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../src/components/CounterBadge/useCounterBadgeStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,6BAAzC;AACA,SAAS,cAAT,QAA+B,yBAA/B;;AAGA,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAgCA;;AAEG;;;AACH,OAAO,IAAM,qBAAqB,GAAG,UAAC,KAAD,EAAyB;AAC5D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,KAAN,KAAgB,SAAhB,IAA6B,MAAM,CAAC,OAFH,EAGjC,KAAK,CAAC,KAAN,KAAgB,WAAhB,IAA+B,MAAM,CAAC,SAHL,EAIjC,KAAK,CAAC,KAAN,KAAgB,QAAhB,IAA4B,MAAM,CAAC,MAJF,EAKjC,KAAK,CAAC,KAAN,KAAgB,aAAhB,IAAiC,MAAM,CAAC,WALP,EAMjC,KAAK,CAAC,GAAN,IAAa,MAAM,CAAC,GANa,EAOjC,CAAC,KAAK,CAAC,QAAP,IAAmB,KAAK,CAAC,KAAN,KAAgB,CAAnC,IAAwC,CAAC,KAAK,CAAC,GAA/C,IAAsD,MAAM,CAAC,IAP5B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;AAUA,SAAO,cAAc,CAAC,KAAD,CAArB;AACD,CAbM","sourceRoot":""}