@fluentui/react-avatar 9.0.0-rc.9 → 9.0.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { Button } from '@fluentui/react-button';
+/// <reference types="react" />
+
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
@@ -11,20 +12,57 @@ import { TooltipProps } from '@fluentui/react-tooltip';
 
 export declare const Avatar: ForwardRefComponent<AvatarProps>;
 
-/**
- * @deprecated Use `avatarClassNames.root` instead.
- */
-export declare const avatarClassName = "fui-Avatar";
-
 export declare const avatarClassNames: SlotClassNames<AvatarSlots>;
 
 /**
- * AvatarGroup component - TODO: add more docs
+ * The AvatarGroup component represents a group of multiple people or entities by taking care of the arrangement
+ * of individual Avatars in a spread, stack, or pie layout.
  */
 export declare const AvatarGroup: ForwardRefComponent<AvatarGroupProps>;
 
 export declare const avatarGroupClassNames: SlotClassNames<AvatarGroupSlots>;
 
+/**
+ * The AvatarGroupItem component represents a single person or entity.
+ * AvatarGroupItem should only be used in an AvatarGroup component.
+ */
+export declare const AvatarGroupItem: ForwardRefComponent<AvatarGroupItemProps>;
+
+export declare const avatarGroupItemClassNames: SlotClassNames<AvatarGroupItemSlots>;
+
+/**
+ * AvatarGroupItem Props
+ */
+export declare type AvatarGroupItemProps = Omit<ComponentProps<Partial<AvatarGroupItemSlots>, 'avatar'>, 'size' | 'shape'>;
+
+export declare type AvatarGroupItemSlots = {
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Avatar that represents a person or entity.
+     */
+    avatar: NonNullable<Slot<typeof Avatar>>;
+    /**
+     * Label used for the name of the AvatarGroupItem when rendered as an overflow item.
+     * The content of the label, by default, is the `name` prop from the `avatar` slot.
+     */
+    overflowLabel: NonNullable<Slot<'span'>>;
+};
+
+/**
+ * State used in rendering AvatarGroupItem
+ */
+export declare type AvatarGroupItemState = ComponentState<AvatarGroupItemSlots> & {
+    /**
+     * Whether the Avatar is an overflow item.
+     *
+     * @default false
+     */
+    isOverflowItem?: boolean;
+    nonOverflowAvatarsCount: number;
+    layout: AvatarGroupProps['layout'];
+    size: AvatarSizes;
+};
+
 /**
  * AvatarGroup Props
  */
@@ -36,57 +74,55 @@ export declare type AvatarGroupProps = ComponentProps<AvatarGroupSlots> & {
     layout?: 'spread' | 'stack' | 'pie';
     /**
      * Maximum number of Avatars to be displayed before overflowing.
-     * NOTE: if pie layout is used, `maxAvatars` will be ignored.
+     * Note: if pie layout is used, `maxAvatars` will be ignored.
      * @default 5
      */
     maxAvatars?: number;
     /**
      * Whether the overflow indicator should render an icon instead of the number of overflowed avatars.
-     * @default false
+     * Note: The overflowIndicator will default to `icon` when the size is less than 24.
+     * @default count
      */
-    overflowIndicator?: 'number-overflowed' | 'icon';
+    overflowIndicator?: 'count' | 'icon';
     /**
      * Size of the avatars.
      * @default 32
      */
     size?: AvatarSizes;
-    /**
-     * Strings for localizing text in the tooltip.
-     */
-    strings?: AvatarGroupStrings;
 };
 
 export declare type AvatarGroupSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<'div'>>;
     /**
      * Popover trigger slot that can be used to change the overflow indicator.
      */
-    popoverTrigger?: Slot<typeof Button>;
+    overflowButton?: NonNullable<Slot<'button'>>;
     /**
-     * Popover surface that will be displayed when the popover is triggered.
+     * List that contains the overflow AvatarGroupItems.
      */
-    popoverSurface?: Slot<typeof PopoverSurface>;
+    overflowContent?: NonNullable<Slot<typeof PopoverSurface>>;
 };
 
 /**
  * State used in rendering AvatarGroup
  */
-export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & {
-    tooltipContent: TooltipProps['content'];
-};
-
-declare type AvatarGroupStrings = {
+export declare type AvatarGroupState = ComponentState<AvatarGroupSlots> & Required<Pick<AvatarGroupProps, 'layout' | 'size' | 'overflowIndicator'>> & {
+    /**
+     * Whether there are more Avatars than `maxAvatars`.
+     * @default false
+     */
+    hasOverflow: boolean;
     /**
-     * Text applied to the overflow indicator's tooltip.
-     * Can include the token "\{numOverflowedAvatars\}" which will be replaced with the number of overflowed avatars.
+     * Tooltip content for the overflow indicator.
      */
-    tooltipContent: string;
+    tooltipContent: TooltipProps['content'];
+    nonOverflowAvatarsCount: number;
 };
 
 /**
  * A specific named color for the Avatar
  */
-export declare type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
+export declare type AvatarNamedColor = 'dark-red' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'dark-green' | 'light-teal' | 'teal' | 'steel' | 'blue' | 'royal-blue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
 /**
  * Properties for Avatar
@@ -209,6 +245,8 @@ export declare type AvatarState = ComponentState<AvatarSlots> & Required<Pick<Av
  *
  * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
  * could be derived from the name.
+ *
+ * @internal
  */
 export declare function getInitials(displayName: string | undefined | null, isRtl: boolean, options?: {
     /** Should initials be generated from phone numbers (default false) */
@@ -224,6 +262,11 @@ export declare const renderAvatar_unstable: (state: AvatarState) => JSX.Element;
  */
 export declare const renderAvatarGroup_unstable: (state: AvatarGroupState) => JSX.Element;
 
+/**
+ * Render the final JSX of AvatarGroupItem
+ */
+export declare const renderAvatarGroupItem_unstable: (state: AvatarGroupItemState) => JSX.Element;
+
 export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<HTMLElement>) => AvatarState;
 
 /**
@@ -237,6 +280,22 @@ export declare const useAvatar_unstable: (props: AvatarProps, ref: React_2.Ref<H
  */
 export declare const useAvatarGroup_unstable: (props: AvatarGroupProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupState;
 
+/**
+ * Create the state required to render AvatarGroupItem.
+ *
+ * The returned state can be modified with hooks such as useAvatarGroupItemStyles_unstable,
+ * before being passed to renderAvatarGroupItem_unstable.
+ *
+ * @param props - props from this instance of AvatarGroupItem
+ * @param ref - reference to root HTMLElement of AvatarGroupItem
+ */
+export declare const useAvatarGroupItem_unstable: (props: AvatarGroupItemProps, ref: React_2.Ref<HTMLElement>) => AvatarGroupItemState;
+
+/**
+ * Apply styling to the AvatarGroupItem slots based on the state
+ */
+export declare const useAvatarGroupItemStyles_unstable: (state: AvatarGroupItemState) => AvatarGroupItemState;
+
 /**
  * Apply styling to the AvatarGroup slots based on the state
  */

package/lib/AvatarGroupItem.js

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

package/lib/AvatarGroupItem.js.map

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

package/lib/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;AAEA,EAAA,wBAAwB,CAAC,KAAD,CAAxB;AAEA,SAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EAEA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CANuD,CAAjD;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useAvatarStyles_unstable } from './useAvatarStyles';\nimport type { AvatarProps } from './Avatar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const Avatar: ForwardRefComponent<AvatarProps> = React.forwardRef((props, ref) => {\n  const state = useAvatar_unstable(props, ref);\n\n  useAvatarStyles_unstable(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'darkRed'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'darkGreen'\n  | 'lightTeal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royalBlue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n  };\n"]}
+{"version":3,"file":"Avatar.types.js","sourceRoot":"../src/","sources":["components/Avatar/Avatar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AvatarSlots = {\n  root: Slot<'span'>;\n\n  /**\n   * The Avatar's image.\n   *\n   * Usage e.g.: `image={{ src: '...' }}`\n   */\n  image?: Slot<'img'>;\n\n  /**\n   * (optional) Custom initials.\n   *\n   * It is usually not necessary to specify custom initials; by default they will be derived from the `name` prop,\n   * using the `getInitials` function.\n   *\n   * The initials are displayed when there is no image (including while the image is loading).\n   */\n  initials?: Slot<'span'>;\n\n  /**\n   * Icon to be displayed when the avatar doesn't have an image or initials.\n   *\n   * @default `PersonRegular` (the default icon's size depends on the Avatar's size)\n   */\n  icon?: Slot<'span'>;\n\n  /**\n   * Badge to show the avatar's presence status.\n   */\n  badge?: Slot<typeof PresenceBadge>;\n};\n\n/**\n * A specific named color for the Avatar\n */\nexport type AvatarNamedColor =\n  | 'dark-red'\n  | 'cranberry'\n  | 'red'\n  | 'pumpkin'\n  | 'peach'\n  | 'marigold'\n  | 'gold'\n  | 'brass'\n  | 'brown'\n  | 'forest'\n  | 'seafoam'\n  | 'dark-green'\n  | 'light-teal'\n  | 'teal'\n  | 'steel'\n  | 'blue'\n  | 'royal-blue'\n  | 'cornflower'\n  | 'navy'\n  | 'lavender'\n  | 'purple'\n  | 'grape'\n  | 'lilac'\n  | 'pink'\n  | 'magenta'\n  | 'plum'\n  | 'beige'\n  | 'mink'\n  | 'platinum'\n  | 'anchor';\n\n/**\n * Sizes that can be used for the Avatar\n */\nexport type AvatarSizes = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Properties for Avatar\n */\nexport type AvatarProps = Omit<ComponentProps<AvatarSlots>, 'color'> & {\n  /**\n   * Optional activity indicator\n   * * active: the avatar will be decorated according to activeAppearance\n   * * inactive: the avatar will be reduced in size and partially transparent\n   * * unset: normal display\n   *\n   * @default unset\n   */\n  active?: 'active' | 'inactive' | 'unset';\n\n  /**\n   * The appearance when `active=\"active\"`\n   *\n   * @default ring\n   */\n  activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';\n\n  /**\n   * The color when displaying either an icon or initials.\n   * * neutral (default): gray\n   * * brand: color from the brand palette\n   * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or idForColor if provided)\n   * * [AvatarNamedColor]: a specific color from the theme\n   *\n   * @default neutral\n   */\n  color?: 'neutral' | 'brand' | 'colorful' | AvatarNamedColor;\n\n  /**\n   * Specify a string to be used instead of the name, to determine which color to use when color=\"colorful\".\n   * Use this when a name is not available, but there is another unique identifier that can be used instead.\n   */\n  idForColor?: string | undefined;\n\n  /**\n   * The name of the person or entity represented by this Avatar. This should always be provided if it is available.\n   *\n   * The name will be used to determine the initials displayed when there is no icon, as well as provided to\n   * accessibility tools.\n   */\n  name?: string;\n\n  /**\n   * The avatar can have a circular or square shape.\n   * @default circular\n   */\n  shape?: 'circular' | 'square';\n\n  /**\n   * Size of the avatar in pixels.\n   *\n   * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and\n   * based on design guidelines for the Avatar control.\n   *\n   * Note: At size 16, if initials are displayed, only the first initial will be rendered.\n   *\n   * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`\n   * to override the rendered size.\n   *\n   * For example, to set the avatar to 45px in size:\n   * `<Avatar size={40} style={{ width: '45px', height: '45px' }} />`\n   *\n   * @default 32\n   */\n  size?: AvatarSizes;\n};\n\n/**\n * State used in rendering Avatar\n */\nexport type AvatarState = ComponentState<AvatarSlots> &\n  Required<Pick<AvatarProps, 'active' | 'activeAppearance' | 'shape' | 'size'>> & {\n    /**\n     * The Avatar's color, it matches props.color but with `'colorful'` resolved to a named color\n     */\n    color: NonNullable<Exclude<AvatarProps['color'], 'colorful'>>;\n  };\n"]}

package/lib/components/Avatar/renderAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAc,KAAd,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CADrB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAJlB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,EAEG,KAAK,CAAC,IAAN,iBAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,EAGG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAHlB,EAIG,KAAK,CAAC,KAAN,iBAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJlB,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  const { slots, slotProps } = getSlots<AvatarSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.initials && <slots.initials {...slotProps.initials} />}\n      {slots.icon && <slots.icon {...slotProps.icon} />}\n      {slots.image && <slots.image {...slotProps.image} />}\n      {slots.badge && <slots.badge {...slotProps.badge} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Avatar/useAvatar.js

@@ -3,7 +3,7 @@ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-
 import { getInitials } from '../../utils/index';
 import { PersonRegular } from '@fluentui/react-icons';
 import { PresenceBadge } from '@fluentui/react-badge';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useMergedEventCallbacks } from '@fluentui/react-utilities';
 export const useAvatar_unstable = (props, ref) => {
   var _a;
@@ -44,7 +44,7 @@ export const useAvatar_unstable = (props, ref) => {
       children: getInitials(name, dir === 'rtl', {
         firstInitialOnly: size <= 16
       }),
-      'aria-hidden': true
+      id: baseId + '__initials'
     }
   }); // Render the icon slot *only if* there aren't any initials to display.
 
@@ -56,8 +56,7 @@ export const useAvatar_unstable = (props, ref) => {
       required: true,
       defaultProps: {
         children: /*#__PURE__*/React.createElement(PersonRegular, null),
-        'aria-hidden': true,
-        id: baseId + '__initials'
+        'aria-hidden': true
       }
     });
   }
@@ -83,8 +82,6 @@ export const useAvatar_unstable = (props, ref) => {
   const badge = resolveShorthand(props.badge, {
     defaultProps: {
       size: getBadgeSize(size),
-      role: 'presentation',
-      'aria-hidden': true,
       id: baseId + '__badge'
     }
   }); // Resolve aria-label and/or aria-labelledby if not provided by the user
@@ -139,7 +136,7 @@ const getBadgeSize = size => {
   }
 };
 
-const avatarColors = ['darkRed', 'cranberry', 'red', 'pumpkin', 'peach', 'marigold', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'darkGreen', 'lightTeal', 'teal', 'steel', 'blue', 'royalBlue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor'];
+const avatarColors = ['dark-red', 'cranberry', 'red', 'pumpkin', 'peach', 'marigold', 'gold', 'brass', 'brown', 'forest', 'seafoam', 'dark-green', 'light-teal', 'teal', 'steel', 'blue', 'royal-blue', 'cornflower', 'navy', 'lavender', 'purple', 'grape', 'lilac', 'pink', 'magenta', 'plum', 'beige', 'mink', 'platinum', 'anchor'];
 
 const getHashCode = str => {
   let hashCode = 0;

package/lib/components/Avatar/useAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      'aria-hidden': true,\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n        id: baseId + '__initials',\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n  const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n  if (image) {\n    image.onError = imageOnError;\n    image.onLoad = imageOnLoad;\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      role: 'presentation',\n      'aria-hidden': true,\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'darkRed',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'darkGreen',\n  'lightTeal',\n  'teal',\n  'steel',\n  'blue',\n  'royalBlue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';\nimport { PersonRegular } from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useMergedEventCallbacks } from '@fluentui/react-utilities';\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { name, size = 32, shape = 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;\n  let { color = 'neutral' } = props;\n\n  // Resolve 'colorful' to a specific color name\n  if (color === 'colorful') {\n    color = avatarColors[getHashCode(idForColor ?? name ?? '') % avatarColors.length];\n  }\n\n  const baseId = useId('avatar-');\n\n  const root: AvatarState['root'] = getNativeElementProps(\n    'span',\n    {\n      role: 'img',\n      id: baseId,\n      // aria-label and/or aria-labelledby are resolved below\n      ...props,\n      ref,\n    },\n    /* excludedPropNames: */ ['name'],\n  );\n\n  // Resolve the initials slot, defaulted to getInitials.\n  let initials: AvatarState['initials'] = resolveShorthand(props.initials, {\n    required: true,\n    defaultProps: {\n      children: getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),\n      id: baseId + '__initials',\n    },\n  });\n\n  // Render the icon slot *only if* there aren't any initials to display.\n  let icon: AvatarState['icon'] = undefined;\n  if (!initials?.children) {\n    initials = undefined;\n    icon = resolveShorthand(props.icon, {\n      required: true,\n      defaultProps: {\n        children: <PersonRegular />,\n        'aria-hidden': true,\n      },\n    });\n  }\n\n  const [imageHidden, setImageHidden] = React.useState<true | undefined>(undefined);\n  const image: AvatarState['image'] = resolveShorthand(props.image, {\n    defaultProps: {\n      alt: '',\n      role: 'presentation',\n      'aria-hidden': true,\n      hidden: imageHidden,\n    },\n  });\n\n  // Hide the image if it fails to load and restore it on a successful load\n  const imageOnError = useMergedEventCallbacks(image?.onError, () => setImageHidden(true));\n  const imageOnLoad = useMergedEventCallbacks(image?.onLoad, () => setImageHidden(undefined));\n  if (image) {\n    image.onError = imageOnError;\n    image.onLoad = imageOnLoad;\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  // Resolve aria-label and/or aria-labelledby if not provided by the user\n  if (!root['aria-label'] && !root['aria-labelledby']) {\n    if (name) {\n      root['aria-label'] = name;\n\n      // Include the badge in labelledby if it exists\n      if (badge) {\n        root['aria-labelledby'] = root.id + ' ' + badge.id;\n      }\n    } else if (initials) {\n      // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing\n      root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    color,\n\n    components: {\n      root: 'span',\n      initials: 'span',\n      icon: 'span',\n      image: 'img',\n      badge: PresenceBadge,\n    },\n\n    root,\n    initials,\n    icon,\n    image,\n    badge,\n  };\n};\n\nconst getBadgeSize = (size: AvatarState['size']) => {\n  if (size >= 96) {\n    return 'extra-large';\n  } else if (size >= 64) {\n    return 'large';\n  } else if (size >= 56) {\n    return 'medium';\n  } else if (size >= 40) {\n    return 'small';\n  } else if (size >= 28) {\n    return 'extra-small';\n  } else {\n    return 'tiny';\n  }\n};\n\nconst avatarColors: AvatarNamedColor[] = [\n  'dark-red',\n  'cranberry',\n  'red',\n  'pumpkin',\n  'peach',\n  'marigold',\n  'gold',\n  'brass',\n  'brown',\n  'forest',\n  'seafoam',\n  'dark-green',\n  'light-teal',\n  'teal',\n  'steel',\n  'blue',\n  'royal-blue',\n  'cornflower',\n  'navy',\n  'lavender',\n  'purple',\n  'grape',\n  'lilac',\n  'pink',\n  'magenta',\n  'plum',\n  'beige',\n  'mink',\n  'platinum',\n  'anchor',\n];\n\nconst getHashCode = (str: string): number => {\n  let hashCode = 0;\n  for (let len: number = str.length - 1; len >= 0; len--) {\n    const ch = str.charCodeAt(len);\n    const shift = len % 8;\n    hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise\n  }\n\n  return hashCode;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Avatar/useAvatarStyles.js

@@ -1,10 +1,5 @@
 import { mergeClasses, __styles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-/**
- * @deprecated Use `avatarClassNames.root` instead.
- */
-
-export const avatarClassName = 'fui-Avatar';
 export const avatarClassNames = {
   root: 'fui-Avatar',
   image: 'fui-Avatar__image',
@@ -117,71 +112,71 @@ const useStyles = /*#__PURE__*/__styles({
     "Bmy1vo4": "fv0atk9",
     "B3o57yi": "f19s7mzo",
     "Cwk7ip": "f1iounmt",
-    "rurcny": "fuzzvh5",
-    "xx9plb": "fxf9f1y",
-    "Bf8kmfk": "f14oqhab",
-    "Byque4d": ["f1t0u0az", "fmlx6bj"],
-    "Bj2wrql": "flqennz",
-    "qd6xl9": ["fmlx6bj", "f1t0u0az"],
-    "px8gyy": ["f7gntx7", "f1mc89cj"],
-    "B5c9fhp": ["f1mc89cj", "f7gntx7"],
-    "Bhe99jt": ["f1vj2lhw", "f1trbl44"],
-    "B2r1szc": ["f1trbl44", "f1vj2lhw"],
-    "iukgx1": "f1psx457",
-    "B5szp9g": "feqeuj",
-    "Bk5q3gb": "f1o6ticg"
+    "Ftih45": "f1wl9k8s",
+    "Brfgrao": "f1j7ml58",
+    "Bciustq": "ffi060y",
+    "Fbdkly": ["f1fzr1x6", "f1f351id"],
+    "lawp4y": "fchca7p",
+    "mdwyqc": ["f1f351id", "f1fzr1x6"],
+    "Budzafs": ["f1kd9phw", "fyf2ch2"],
+    "r59vdv": ["fyf2ch2", "f1kd9phw"],
+    "n07z76": ["f1gnrg9b", "f1xx2lx6"],
+    "ck0cow": ["f1xx2lx6", "f1gnrg9b"],
+    "B8bqphf": "f1e9wvyh",
+    "h7gv66": "f1vqt3t1",
+    "Bvy8d8o": "f1waqg4f"
   },
   "ring": {
-    "ijj6k": "f17s8eb2",
-    "I89eb": ["fv9ryek", "f2ueew"],
-    "Bp1vogq": "f1jwrqhc",
-    "Bohd3ja": ["f2ueew", "fv9ryek"],
-    "Bdixowu": "f1bwkb58",
-    "cqycoz": ["fiio4mc", "fc8z0qo"],
-    "Epwjcz": "f1m5ya7j",
-    "Bwdktmn": ["fc8z0qo", "fiio4mc"]
+    "Bq4z7u6": "f1tikrig",
+    "Bk5zm6e": ["f1v0fw5y", "f19vwj9b"],
+    "Bqjgrrk": "fpeaeip",
+    "Bm6vgfq": ["f19vwj9b", "f1v0fw5y"],
+    "Bdkvgpv": "f163fonl",
+    "m598lv": ["f1yq6w5o", "f1jpmc5p"],
+    "qa3bma": "f11yjt3y",
+    "Bbv0w2i": ["f1jpmc5p", "f1yq6w5o"]
   },
   "ringThick": {
-    "D18yk7": "fh80ci2",
-    "vrnxjr": ["f2bwiux", "fsprf8b"],
-    "z1nrnc": "f3h6zru",
-    "Hpwax1": ["fsprf8b", "f2bwiux"],
-    "dj0dih": "f1q8k45v",
-    "D4ky5z": ["fsu5318", "f17ooz8x"],
-    "k1i1uq": "f1tf78pn",
-    "Bcasopp": ["f17ooz8x", "fsu5318"]
+    "qehafq": "f1rbtjc9",
+    "Bicfajf": ["f1wm0e7m", "f1o0l8kp"],
+    "susq4k": "f1tz5420",
+    "Biibvgv": ["f1o0l8kp", "f1wm0e7m"],
+    "B0qfbqy": "f1q30tuz",
+    "B4f6apu": ["f9c0djs", "fcwzx2y"],
+    "y0oebl": "f1hdqo1a",
+    "uvfttm": ["fcwzx2y", "f9c0djs"]
   },
   "ringThicker": {
-    "D18yk7": "f19fdhy9",
-    "vrnxjr": ["fylzcb7", "fsjc8ey"],
-    "z1nrnc": "fw4k5ov",
-    "Hpwax1": ["fsjc8ey", "fylzcb7"],
-    "dj0dih": "fcdg7pk",
-    "D4ky5z": ["fqkplwy", "f14dmnnh"],
-    "k1i1uq": "fccqzkf",
-    "Bcasopp": ["f14dmnnh", "fqkplwy"]
+    "qehafq": "fk7ejgl",
+    "Bicfajf": ["f12sbt0w", "f1tnh028"],
+    "susq4k": "fcrsff4",
+    "Biibvgv": ["f1tnh028", "f12sbt0w"],
+    "B0qfbqy": "f1jrge4j",
+    "B4f6apu": ["fc2vpa6", "f133djwz"],
+    "y0oebl": "f9hcsm3",
+    "uvfttm": ["f133djwz", "fc2vpa6"]
   },
   "ringThickest": {
-    "D18yk7": "flif9b5",
-    "vrnxjr": ["fo923rx", "f7jyntm"],
-    "z1nrnc": "f18p1wo9",
-    "Hpwax1": ["f7jyntm", "fo923rx"],
-    "dj0dih": "fjoz5ua",
-    "D4ky5z": ["f1lg5lk7", "fthel6x"],
-    "k1i1uq": "f4i03fv",
-    "Bcasopp": ["fthel6x", "f1lg5lk7"]
+    "qehafq": "fl3e39p",
+    "Bicfajf": ["f14m8wrz", "fckzhtt"],
+    "susq4k": "fnxq6pw",
+    "Biibvgv": ["fckzhtt", "f14m8wrz"],
+    "B0qfbqy": "fr6r3yi",
+    "B4f6apu": ["ftxoq8w", "f4gs2h8"],
+    "y0oebl": "f9gga8r",
+    "uvfttm": ["f4gs2h8", "ftxoq8w"]
   },
   "shadow4": {
-    "Byi50p1": "f15gzsq7"
+    "h8m2vh": "f196qwgu"
   },
   "shadow8": {
-    "Byi50p1": "f1eebxl"
+    "h8m2vh": "fut48mo"
   },
   "shadow16": {
-    "Byi50p1": "fsnqaoy"
+    "h8m2vh": "fh2kfig"
   },
   "shadow28": {
-    "Byi50p1": "f1sh7vtk"
+    "h8m2vh": "f4c2u2p"
   },
   "inactive": {
     "abs64n": "fp25eh",
@@ -189,14 +184,14 @@ const useStyles = /*#__PURE__*/__styles({
     "Bmy1vo4": "fv0atk9",
     "B3o57yi": "f19s7mzo",
     "Cwk7ip": "ftf4am9",
-    "D18yk7": "fede8dz",
-    "vrnxjr": ["fhlqc5k", "flnsm0g"],
-    "z1nrnc": "fc3uzr1",
-    "Hpwax1": ["flnsm0g", "fhlqc5k"],
-    "ngabwx": "f1429bq1",
-    "iukgx1": "f1psx457",
-    "B5szp9g": "feqeuj",
-    "Bk5q3gb": "fuorts1"
+    "qehafq": "fe3o830",
+    "Bicfajf": ["fzynn9s", "f1z0ukd1"],
+    "susq4k": "f1kyqvp9",
+    "Biibvgv": ["f1z0ukd1", "fzynn9s"],
+    "vz82u": "f1dhznln",
+    "B8bqphf": "f1e9wvyh",
+    "h7gv66": "f1vqt3t1",
+    "Bvy8d8o": "f1q0dkoh"
   },
   "badge": {
     "qhf8xq": "f1euv43f",
@@ -273,10 +268,10 @@ const useStyles = /*#__PURE__*/__styles({
     "Be2twd7": "f18m8u13"
   }
 }, {
-  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f14oqhab:before{top:0;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".flqennz:before{bottom:0;}", ".f7gntx7:before{border-bottom-right-radius:inherit;}", ".f1mc89cj:before{border-bottom-left-radius:inherit;}", ".f1vj2lhw:before{border-top-right-radius:inherit;}", ".f1trbl44:before{border-top-left-radius:inherit;}", ".f1psx457:before{transition-property:margin,opacity;}", ".feqeuj:before{transition-duration:500ms,400ms;}", ".f1o6ticg:before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f17s8eb2:before{border-top-color:var(--colorBrandBackgroundStatic);}", ".fv9ryek:before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f2ueew:before{border-left-color:var(--colorBrandBackgroundStatic);}", ".f1jwrqhc:before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f1bwkb58:before{border-top-style:solid;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".fh80ci2:before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f2bwiux:before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".fsprf8b:before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f3h6zru:before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q8k45v:before{border-top-width:var(--strokeWidthThick);}", ".fsu5318:before{border-right-width:var(--strokeWidthThick);}", ".f17ooz8x:before{border-left-width:var(--strokeWidthThick);}", ".f1tf78pn:before{border-bottom-width:var(--strokeWidthThick);}", ".f19fdhy9:before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".fylzcb7:before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".fsjc8ey:before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fw4k5ov:before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".fcdg7pk:before{border-top-width:var(--strokeWidthThicker);}", ".fqkplwy:before{border-right-width:var(--strokeWidthThicker);}", ".f14dmnnh:before{border-left-width:var(--strokeWidthThicker);}", ".fccqzkf:before{border-bottom-width:var(--strokeWidthThicker);}", ".flif9b5:before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".fo923rx:before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".f7jyntm:before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".f18p1wo9:before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fjoz5ua:before{border-top-width:var(--strokeWidthThickest);}", ".f1lg5lk7:before{border-right-width:var(--strokeWidthThickest);}", ".fthel6x:before{border-left-width:var(--strokeWidthThickest);}", ".f4i03fv:before{border-bottom-width:var(--strokeWidthThickest);}", ".f15gzsq7:before{box-shadow:var(--shadow4);}", ".f1eebxl:before{box-shadow:var(--shadow8);}", ".fsnqaoy:before{box-shadow:var(--shadow16);}", ".f1sh7vtk:before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fede8dz:before{margin-top:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".fc3uzr1:before{margin-bottom:0;}", ".f1429bq1:before{opacity:0;}", ".fuorts1:before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"]
+  "d": [".f14t3ns0{display:inline-block;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".fnivh3a{border-bottom-right-radius:var(--borderRadiusXLarge);}", ".fc7yr5o{border-bottom-left-radius:var(--borderRadiusXLarge);}", ".f1el4m67{border-top-right-radius:var(--borderRadiusXLarge);}", ".f8yange{border-top-left-radius:var(--borderRadiusXLarge);}", ".ftfx35i{-webkit-transform:perspective(1px);-moz-transform:perspective(1px);-ms-transform:perspective(1px);transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f19s7mzo{transition-duration:500ms,100ms;}", ".f1iounmt{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1wl9k8s::before{content:\"\";}", ".f1j7ml58::before{position:absolute;}", ".ffi060y::before{top:0;}", ".f1fzr1x6::before{left:0;}", ".f1f351id::before{right:0;}", ".fchca7p::before{bottom:0;}", ".f1kd9phw::before{border-bottom-right-radius:inherit;}", ".fyf2ch2::before{border-bottom-left-radius:inherit;}", ".f1gnrg9b::before{border-top-right-radius:inherit;}", ".f1xx2lx6::before{border-top-left-radius:inherit;}", ".f1e9wvyh::before{transition-property:margin,opacity;}", ".f1vqt3t1::before{transition-duration:500ms,400ms;}", ".f1waqg4f::before{transition-delay:cubic-bezier(0.80,0.00,0.20,1.00),linear;}", ".f1tikrig::before{border-top-color:var(--colorBrandBackgroundStatic);}", ".f1v0fw5y::before{border-right-color:var(--colorBrandBackgroundStatic);}", ".f19vwj9b::before{border-left-color:var(--colorBrandBackgroundStatic);}", ".fpeaeip::before{border-bottom-color:var(--colorBrandBackgroundStatic);}", ".f163fonl::before{border-top-style:solid;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1rbtjc9::before{margin-top:calc(-2 * var(--strokeWidthThick));}", ".f1wm0e7m::before{margin-right:calc(-2 * var(--strokeWidthThick));}", ".f1o0l8kp::before{margin-left:calc(-2 * var(--strokeWidthThick));}", ".f1tz5420::before{margin-bottom:calc(-2 * var(--strokeWidthThick));}", ".f1q30tuz::before{border-top-width:var(--strokeWidthThick);}", ".f9c0djs::before{border-right-width:var(--strokeWidthThick);}", ".fcwzx2y::before{border-left-width:var(--strokeWidthThick);}", ".f1hdqo1a::before{border-bottom-width:var(--strokeWidthThick);}", ".fk7ejgl::before{margin-top:calc(-2 * var(--strokeWidthThicker));}", ".f12sbt0w::before{margin-right:calc(-2 * var(--strokeWidthThicker));}", ".f1tnh028::before{margin-left:calc(-2 * var(--strokeWidthThicker));}", ".fcrsff4::before{margin-bottom:calc(-2 * var(--strokeWidthThicker));}", ".f1jrge4j::before{border-top-width:var(--strokeWidthThicker);}", ".fc2vpa6::before{border-right-width:var(--strokeWidthThicker);}", ".f133djwz::before{border-left-width:var(--strokeWidthThicker);}", ".f9hcsm3::before{border-bottom-width:var(--strokeWidthThicker);}", ".fl3e39p::before{margin-top:calc(-2 * var(--strokeWidthThickest));}", ".f14m8wrz::before{margin-right:calc(-2 * var(--strokeWidthThickest));}", ".fckzhtt::before{margin-left:calc(-2 * var(--strokeWidthThickest));}", ".fnxq6pw::before{margin-bottom:calc(-2 * var(--strokeWidthThickest));}", ".fr6r3yi::before{border-top-width:var(--strokeWidthThickest);}", ".ftxoq8w::before{border-right-width:var(--strokeWidthThickest);}", ".f4gs2h8::before{border-left-width:var(--strokeWidthThickest);}", ".f9gga8r::before{border-bottom-width:var(--strokeWidthThickest);}", ".f196qwgu::before{box-shadow:var(--shadow4);}", ".fut48mo::before{box-shadow:var(--shadow8);}", ".fh2kfig::before{box-shadow:var(--shadow16);}", ".f4c2u2p::before{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{-webkit-transform:scale(0.875);-moz-transform:scale(0.875);-ms-transform:scale(0.875);transform:scale(0.875);}", ".ftf4am9{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".fe3o830::before{margin-top:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".f1kyqvp9::before{margin-bottom:0;}", ".f1dhznln::before{opacity:0;}", ".f1q0dkoh::before{transition-delay:cubic-bezier(0.33,0.00,0.10,1.00),linear;}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".ffo9j2l{box-shadow:0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);}", ".f1nayfl2{box-shadow:0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1ps3kmd{object-fit:cover;}", ".f12kltsn{vertical-align:top;}", ".f1ewtqcl{box-sizing:border-box;}", ".fp6vxd{line-height:1;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fa4t5tb{vertical-align:center;}", ".f17mccla{text-align:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}", ".f24l1pt{font-size:28px;}", ".ffl51b{font-size:32px;}", ".f18m8u13{font-size:48px;}"]
 });
 
-const useSizeStyles = /*#__PURE__*/__styles({
+export const useSizeStyles = /*#__PURE__*/__styles({
   "16": {
     "a9b677": "fjw5fx7",
     "Bqenvij": "fd461yt"
@@ -346,7 +341,7 @@ const useColorStyles = /*#__PURE__*/__styles({
     "sj55zd": "fqpbvvt",
     "De3pzq": "f1blnnmj"
   },
-  "darkRed": {
+  "dark-red": {
     "sj55zd": "fqjd1y1",
     "De3pzq": "f1vq2oo4"
   },
@@ -390,11 +385,11 @@ const useColorStyles = /*#__PURE__*/__styles({
     "sj55zd": "fnnb6wn",
     "De3pzq": "f1n057jc"
   },
-  "darkGreen": {
+  "dark-green": {
     "sj55zd": "ff58qw8",
     "De3pzq": "f11t05wk"
   },
-  "lightTeal": {
+  "light-teal": {
     "sj55zd": "f1up9qbj",
     "De3pzq": "f42feg1"
   },
@@ -410,7 +405,7 @@ const useColorStyles = /*#__PURE__*/__styles({
     "sj55zd": "f1rjv50u",
     "De3pzq": "f1ggcpy6"
   },
-  "royalBlue": {
+  "royal-blue": {
     "sj55zd": "f1emykk5",
     "De3pzq": "f12rj61f"
   },