@fluentui/react-badge 9.0.0-alpha.83 → 9.0.0-alpha.87

package/dist/react-badge.d.ts

@@ -1,182 +1,132 @@
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
+import { ShorthandProps } from '@fluentui/react-utilities';
+import { ShorthandRenderFunction } from '@fluentui/react-utilities';
 
 /**
  * Define a styled Badge, using the `useBadge` hook.
  */
-export declare const Badge: React_2.FunctionComponent<BadgeProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Badge: React_2.ForwardRefExoticComponent<Pick<{
+    root?: ShorthandProps<ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>>;
+    icon?: ShorthandProps<ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>>;
+}, "icon"> & React_2.HTMLAttributes<HTMLElement> & {
+    children?: string | number | boolean | {} | React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | React_2.ReactNodeArray | React_2.ReactPortal | ShorthandRenderFunction<React_2.HTMLAttributes<HTMLElement>> | null | undefined;
+} & Partial<BadgeCommons> & React_2.RefAttributes<HTMLElement>>;
 
-export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
-
-export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
-
-export declare type BadgeProps = ComponentPropsCompat & React_2.HTMLAttributes<HTMLElement> & {
-    /**
-     * A Badge can be sized.
-     * @defaultvalue medium
-     */
-    size?: BadgeSize;
-    /**
-     * A Badge can be square, circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: BadgeShape;
+export declare type BadgeCommons = {
     /**
      * A Badge can be filled, outline, ghost, inverted
      * @defaultvalue filled
      */
-    appearance?: BadgeAppearance;
+    appearance: 'filled' | 'ghost' | 'outline' | 'tint';
     /**
-     * A Badge has a preset of colors
-     * @defaultvalue filled
+     * A Badge can be one of preset colors
+     * @defaultvalue brand
      */
-    color?: BadgeColors;
+    color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
     /**
-     * Icon slot
-     */
-    icon?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-    /**
-     * Position for Icon to be rendered
+     * A Badge can position the icon before or after the content.
      * @defaultvalue before
      */
-    iconPosition?: 'before' | 'after';
-};
-
-export declare type BadgeShape = 'rounded' | 'square' | 'circular';
-
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const badgeShorthandPropsCompat: readonly ["icon"];
-
-export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
-
-export declare type BadgeState = BadgeProps & {
+    iconPosition: 'before' | 'after';
     /**
-     * Ref to the root slot
+     * A Badge can be square, circular or rounded.
+     * @defaultvalue circular
      */
-    ref: React_2.RefObject<HTMLElement>;
+    shape: 'circular' | 'rounded' | 'square';
     /**
-     * Icon slot when processed by internal state
+     * A Badge can be on of several preset sizes.
+     * @defaultvalue medium
      */
-    icon?: ObjectShorthandPropsCompat<React_2.HTMLAttributes<HTMLSpanElement>>;
+    size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 };
 
-/**
- * Define a styled CounterBadge, using the `useCounterBadge` hook.
- */
-export declare const CounterBadge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "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" | "size" | "iconPosition"> & {
-    shape?: "rounded" | "circular" | undefined;
-    appearance?: "filled" | "ghost" | undefined;
-    overflowCount?: number | undefined;
-    count?: number | undefined;
-    showZero?: boolean | undefined;
-    dot?: boolean | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
-
-export declare type CounterBadgeProps = 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;
+export declare type BadgeProps = ComponentProps<Partial<BadgeSlots>> & Partial<BadgeCommons>;
+
+export declare type BadgeSlots = {
+    root: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
+    icon?: ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>;
 };
 
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
+
 /**
- * Consts listing which props are shorthand props.
+ * Define a styled CounterBadge, using the `useCounterBadge` hook.
  */
-export declare const counterBadgeShorthandPropsCompat: readonly ["icon"];
+export declare const CounterBadge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "icon" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "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" | "iconPosition" | "size"> & Partial<CounterBadgeCommons> & React_2.RefAttributes<HTMLElement>>;
 
-export declare type CounterBadgeState = 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
+     * If a dot should be displayed without the count
+     * @default false
      */
     dot: boolean;
-};
-
-/**
- * Define a styled Badge, using the `useBadge` hook.
- */
-export declare const PresenceBadge: React_2.ForwardRefExoticComponent<Pick<BadgeProps, "children" | "as" | "className" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "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" | "size" | "iconPosition"> & {
-    status?: "available" | "busy" | "outOfOffice" | "away" | "offline" | "doNotDisturb" | undefined;
-    outOfOffice?: boolean | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
-
-export declare type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
     /**
-     * Represents several status
-     * @defaultvalue available
+     * A Badge can be circular or rounded
+     * @default circular
      */
-    status?: PresenceBadgeStatus;
+    shape: 'circular' | 'rounded';
     /**
-     * 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
-     * @defaultvalue false
+     * A Badge can be filled, ghost
+     * @default filled
      */
-    outOfOffice?: boolean;
+    appearance: 'filled' | 'ghost';
 };
 
 /**
- * Consts listing which props are shorthand props.
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
+
+/**
+ * {@docCategory CounterBadge}
+ */
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape'> & CounterBadgeCommons;
+
+/**
+ * Define a styled Badge, using the `useBadge` hook.
  */
-export declare const presenceBadgeShorthandPropsCompat: (keyof PresenceBadgeProps)[];
+export declare const PresenceBadge: React_2.ForwardRefExoticComponent<Pick<{
+    root?: ShorthandProps<ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>>;
+    icon?: ShorthandProps<ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>>>;
+}, "icon"> & React_2.HTMLAttributes<HTMLElement> & {
+    children?: string | number | boolean | {} | React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | React_2.ReactNodeArray | React_2.ReactPortal | ShorthandRenderFunction<React_2.HTMLAttributes<HTMLElement>> | null | undefined;
+} & Partial<BadgeCommons> & Partial<PresenceBadgeCommons> & React_2.RefAttributes<HTMLElement>>;
 
-export declare type PresenceBadgeState = Omit<BadgeState, 'shape' | 'appearance'> & {
+export declare interface PresenceBadgeCommons {
     /**
      * Represents several status
-     * @defaultvalue available
+     * @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
-     * @defaultvalue false
+     * @default false
      */
     outOfOffice: boolean;
-};
+}
+
+export declare type PresenceBadgeProps = BadgeProps & Partial<PresenceBadgeCommons>;
+
+export declare type PresenceBadgeState = BadgeState & PresenceBadgeCommons;
 
 export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
 
@@ -185,7 +135,7 @@ export declare const renderBadge: (state: BadgeState) => JSX.Element;
 /**
  * Returns the props and state required to render the component
  */
-export declare const useBadge: (props: BadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: BadgeProps | undefined) => BadgeState;
+export declare const useBadge: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
 
 /**
  * Applies style classnames to slots
@@ -195,7 +145,7 @@ export declare const useBadgeStyles: (state: BadgeState) => BadgeState;
 /**
  * Returns the props and state required to render the component
  */
-export declare const useCounterBadge: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CounterBadgeProps | undefined) => CounterBadgeState;
+export declare const useCounterBadge: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
 
 /**
  * Applies style classnames to slots
@@ -205,7 +155,7 @@ export declare const useCounterBadgeStyles: (state: CounterBadgeState) => Counte
 /**
  * Returns the props and state required to render the component
  */
-export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>, defaultProps?: PresenceBadgeProps | undefined) => PresenceBadgeState;
+export declare const usePresenceBadge: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
 
 /**
  * Applies style classnames to slots

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/lib/CounterBadge.js.map

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

package/lib/PresenceBadge.js.map

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

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import type { BadgeProps } from './Badge.types';
 /**
  * Define a styled Badge, using the `useBadge` hook.
  */
-export declare const Badge: React.FunctionComponent<BadgeProps & React.RefAttributes<HTMLElement>>;
+export declare const Badge: React.ForwardRefExoticComponent<Pick<{
+    root?: import("@fluentui/react-utilities").ShorthandProps<import("@fluentui/react-utilities").ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>>;
+    icon?: import("@fluentui/react-utilities").ShorthandProps<import("@fluentui/react-utilities").ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>>;
+}, "icon"> & React.HTMLAttributes<HTMLElement> & {
+    children?: string | number | boolean | {} | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ShorthandRenderFunction<React.HTMLAttributes<HTMLElement>> | null | undefined;
+} & Partial<import("./Badge.types").BadgeCommons> & React.RefAttributes<HTMLElement>>;

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;;AAEG;;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 */\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,CAA0C,UAAC,KAAD,EAAQ,GAAR,EAAW;AACxE,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,47 +1,35 @@
 import * as React from 'react';
-import type { ComponentPropsCompat, ShorthandPropsCompat, ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
-export declare type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';
-export declare type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
-export declare type BadgeShape = 'rounded' | 'square' | 'circular';
-export declare type BadgeColors = 'brand' | 'danger' | 'severe' | 'warning' | 'success' | 'important' | 'informative' | 'subtle';
-export declare type BadgeProps = ComponentPropsCompat & React.HTMLAttributes<HTMLElement> & {
-    /**
-     * A Badge can be sized.
-     * @defaultvalue medium
-     */
-    size?: BadgeSize;
-    /**
-     * A Badge can be square, circular or rounded
-     * @defaultvalue circular
-     */
-    shape?: BadgeShape;
+import type { ComponentProps, ComponentState, ObjectShorthandProps } from '@fluentui/react-utilities';
+export declare type BadgeSlots = {
+    root: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    icon?: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>>;
+};
+export declare type BadgeCommons = {
     /**
      * A Badge can be filled, outline, ghost, inverted
      * @defaultvalue filled
      */
-    appearance?: BadgeAppearance;
+    appearance: 'filled' | 'ghost' | 'outline' | 'tint';
     /**
-     * A Badge has a preset of colors
-     * @defaultvalue filled
-     */
-    color?: BadgeColors;
-    /**
-     * Icon slot
+     * A Badge can be one of preset colors
+     * @defaultvalue brand
      */
-    icon?: ShorthandPropsCompat<React.HTMLAttributes<HTMLElement>>;
+    color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
     /**
-     * Position for Icon to be rendered
+     * A Badge can position the icon before or after the content.
      * @defaultvalue before
      */
-    iconPosition?: 'before' | 'after';
-};
-export declare type BadgeState = BadgeProps & {
+    iconPosition: 'before' | 'after';
     /**
-     * Ref to the root slot
+     * A Badge can be square, circular or rounded.
+     * @defaultvalue circular
      */
-    ref: React.RefObject<HTMLElement>;
+    shape: 'circular' | 'rounded' | 'square';
     /**
-     * Icon slot when processed by internal state
+     * A Badge can be on of several preset sizes.
+     * @defaultvalue medium
      */
-    icon?: ObjectShorthandPropsCompat<React.HTMLAttributes<HTMLSpanElement>>;
+    size: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
 };
+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\nexport type BadgeSize = 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest';\n\nexport type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';\n\nexport type BadgeShape = 'rounded' | 'square' | 'circular';\n\nexport type BadgeColors =\n  | 'brand'\n  | 'danger'\n  | 'severe'\n  | 'warning'\n  | 'success'\n  | 'important'\n  | 'informative'\n  | 'subtle';\n\nexport type BadgeProps = ComponentPropsCompat &\n  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\nexport type BadgeState = 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

@@ -24,12 +24,12 @@ var useStyles = /*#__PURE__*/__styles({
     "Bahqtrf": "f1kx028l",
     "qhf8xq": "f10pi13n"
   },
-  "rootSmallest": {
+  "rootTiny": {
     "a9b677": "f16dn6v3",
     "Bqenvij": "f3mu39s",
     "Be2twd7": "f130uwy9"
   },
-  "rootSmaller": {
+  "rootExtraSmall": {
     "a9b677": "fpd43o0",
     "Bqenvij": "f30q22z",
     "Be2twd7": "f1tccstq"
@@ -58,7 +58,7 @@ var useStyles = /*#__PURE__*/__styles({
     "Be2twd7": "f1ugzwwg",
     "rmohyg": "f19jf40t"
   },
-  "rootLargerLargest": {
+  "rootExtraLarge": {
     "Bf4jedk": "fwbmr0d",
     "Bqenvij": "f1d2rq10",
     "z189sj": ["f11qrl6u", "fjlbh76"],
@@ -73,7 +73,7 @@ var useStyles = /*#__PURE__*/__styles({
   "rootRounded": {
     "Dimara": "fnpfh4l"
   },
-  "rootRoundedSmallSmallerSmallest": {
+  "rootRoundedSmallToTiny": {
     "Dimara": "f1mhewp8"
   },
   "rootCircular": {
@@ -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 === 'tiny' && styles.rootTiny, state.size === 'extra-small' && styles.rootExtraSmall, state.size === 'small' && styles.rootSmall, state.size === 'medium' && styles.rootMedium, state.size === 'large' && styles.rootLarge, state.size === 'extra-large' && styles.rootExtraLarge, state.shape === 'circular' && styles.rootCircular, state.shape === 'rounded' && styles.rootRounded, state.shape === 'rounded' && (state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny') && styles.rootRoundedSmallToTiny, 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);