Initial commit

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { renderAvatar_unstable } from './renderAvatar';
+import { useAvatar_unstable } from './useAvatar';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useAvatarStyles_unstable } from './useAvatarStyles.styles';
+export const Avatar = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useAvatar_unstable(props, ref);
+    useAvatarStyles_unstable(state);
+    useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);
+    return renderAvatar_unstable(state);
+});
+Avatar.displayName = 'Avatar';

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderAvatar_unstable } from './renderAvatar';\nimport { useAvatar_unstable } from './useAvatar';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useAvatarStyles_unstable } from './useAvatarStyles.styles';\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  useCustomStyleHook_unstable('useAvatarStyles_unstable')(state);\n\n  return renderAvatar_unstable(state);\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":["React","renderAvatar_unstable","useAvatar_unstable","useCustomStyleHook_unstable","useAvatarStyles_unstable","Avatar","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,wBAAwB,QAAQ,2BAA2B;AAIpE,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQP,mBAAmBK,OAAOC;IAExCJ,yBAAyBK;IAEzBN,4BAA4B,4BAA4BM;IAExD,OAAOR,sBAAsBQ;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Avatar
+ */ export { };

node_modules/@fluentui/react-avatar/lib/components/Avatar/Avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/Avatar.types.ts"],"sourcesContent":["import { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Sizes for the avatar\n * @deprecated use AvatarSize instead\n */\nexport type AvatarSizes = AvatarSize;\n/**\n * Sizes for the avatar\n */\nexport type AvatarSize = 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;\n\n/**\n * Shape of the avatar\n */\nexport type AvatarShape = 'circular' | 'square';\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 * 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 is used to determine the initials displayed when there is no image. It is also 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?: AvatarShape;\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 needed, 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?: AvatarSize;\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    /**\n     * Hidden span to render the active state label for the purposes of including in the aria-labelledby, if needed.\n     */\n    activeAriaLabelElement?: JSX.Element;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AA6JA;;CAEC,GACD,WAWI"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/index.js

@@ -0,0 +1,4 @@
+export { Avatar } from './Avatar';
+export { renderAvatar_unstable } from './renderAvatar';
+export { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';
+export { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';

node_modules/@fluentui/react-avatar/lib/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/index.ts"],"sourcesContent":["export type {\n  AvatarNamedColor,\n  AvatarProps,\n  AvatarShape,\n  AvatarSize,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AvatarSizes,\n  AvatarSlots,\n  AvatarState,\n} from './Avatar.types';\nexport { Avatar } from './Avatar';\nexport { renderAvatar_unstable } from './renderAvatar';\nexport { DEFAULT_STRINGS, useAvatar_unstable } from './useAvatar';\nexport { avatarClassNames, useAvatarStyles_unstable, useSizeStyles } from './useAvatarStyles.styles';\n"],"names":["Avatar","renderAvatar_unstable","DEFAULT_STRINGS","useAvatar_unstable","avatarClassNames","useAvatarStyles_unstable","useSizeStyles"],"rangeMappings":";;;","mappings":"AAUA,SAASA,MAAM,QAAQ,WAAW;AAClC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,cAAc;AAClE,SAASC,gBAAgB,EAAEC,wBAAwB,EAAEC,aAAa,QAAQ,2BAA2B"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/renderAvatar.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+export const renderAvatar_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.initials && /*#__PURE__*/ _jsx(state.initials, {}),
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.image && /*#__PURE__*/ _jsx(state.image, {}),
+            state.badge && /*#__PURE__*/ _jsx(state.badge, {}),
+            state.activeAriaLabelElement
+        ]
+    });
+};

node_modules/@fluentui/react-avatar/lib/components/Avatar/renderAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Avatar/renderAvatar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AvatarSlots, AvatarState } from './Avatar.types';\n\nexport const renderAvatar_unstable = (state: AvatarState) => {\n  assertSlots<AvatarSlots>(state);\n\n  return (\n    <state.root>\n      {state.initials && <state.initials />}\n      {state.icon && <state.icon />}\n      {state.image && <state.image />}\n      {state.badge && <state.badge />}\n      {state.activeAriaLabelElement}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderAvatar_unstable","state","root","initials","icon","image","badge","activeAriaLabelElement"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IAEzB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,QAAQ,kBAAI,KAACF,MAAME,QAAQ;YACjCF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,KAAK,kBAAI,KAACJ,MAAMI,KAAK;YAC3BJ,MAAMK,KAAK,kBAAI,KAACL,MAAMK,KAAK;YAC3BL,MAAMM,sBAAsB;;;AAGnC,EAAE"}

node_modules/@fluentui/react-avatar/lib/components/Avatar/useAvatar.js

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import { getInitials } from '../../utils/index';
+import { PersonRegular } from '@fluentui/react-icons';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useAvatarContext } from '../../contexts/AvatarContext';
+export const DEFAULT_STRINGS = {
+    active: 'active',
+    inactive: 'inactive'
+};
+export const useAvatar_unstable = (props, ref)=>{
+    const { dir } = useFluent();
+    const { shape: contextShape, size: contextSize } = useAvatarContext();
+    const { name, size = contextSize !== null && contextSize !== void 0 ? contextSize : 32, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'circular', active = 'unset', activeAppearance = 'ring', idForColor } = props;
+    let { color = 'neutral' } = props;
+    // Resolve 'colorful' to a specific color name
+    if (color === 'colorful') {
+        var _ref;
+        color = avatarColors[getHashCode((_ref = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _ref !== void 0 ? _ref : '') % avatarColors.length];
+    }
+    const baseId = useId('avatar-');
+    const root = slot.always(getIntrinsicElementProps('span', {
+        role: 'img',
+        id: baseId,
+        // aria-label and/or aria-labelledby are resolved below
+        ...props,
+        ref
+    }, /* excludedPropNames: */ [
+        'name'
+    ]), {
+        elementType: 'span'
+    });
+    const [imageHidden, setImageHidden] = React.useState(undefined);
+    let image = slot.optional(props.image, {
+        defaultProps: {
+            alt: '',
+            role: 'presentation',
+            'aria-hidden': true,
+            hidden: imageHidden
+        },
+        elementType: 'img'
+    }); // Image shouldn't be rendered if its src is not set
+    if (!(image === null || image === void 0 ? void 0 : image.src)) {
+        image = undefined;
+    } // Hide the image if it fails to load and restore it on a successful load
+    if (image) {
+        image.onError = mergeCallbacks(image.onError, ()=>setImageHidden(true));
+        image.onLoad = mergeCallbacks(image.onLoad, ()=>setImageHidden(undefined));
+    } // Resolve the initials slot, defaulted to getInitials.
+    let initials = slot.optional(props.initials, {
+        renderByDefault: true,
+        defaultProps: {
+            children: getInitials(name, dir === 'rtl', {
+                firstInitialOnly: size <= 16
+            }),
+            id: baseId + '__initials'
+        },
+        elementType: 'span'
+    }); // Don't render the initials slot if it's empty
+    if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
+        initials = undefined;
+    } // Render the icon slot *only if* there aren't any initials or image to display
+    let icon = undefined;
+    if (!initials && (!image || imageHidden)) {
+        icon = slot.optional(props.icon, {
+            renderByDefault: true,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(PersonRegular, null),
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        });
+    }
+    const badge = slot.optional(props.badge, {
+        defaultProps: {
+            size: getBadgeSize(size),
+            id: baseId + '__badge'
+        },
+        elementType: PresenceBadge
+    });
+    let activeAriaLabelElement; // Resolve aria-label and/or aria-labelledby if not provided by the user
+    if (!root['aria-label'] && !root['aria-labelledby']) {
+        if (name) {
+            root['aria-label'] = name; // Include the badge in labelledby if it exists
+            if (badge) {
+                root['aria-labelledby'] = root.id + ' ' + badge.id;
+            }
+        } else if (initials) {
+            // root's aria-label should be the name, but fall back to being labelledby the initials if name is missing
+            root['aria-labelledby'] = initials.id + (badge ? ' ' + badge.id : '');
+        } // Add the active state to the aria label
+        if (active === 'active' || active === 'inactive') {
+            const activeText = DEFAULT_STRINGS[active];
+            if (root['aria-labelledby']) {
+                // If using aria-labelledby, render a hidden span and append it to the labelledby
+                const activeId = baseId + '__active';
+                root['aria-labelledby'] += ' ' + activeId;
+                activeAriaLabelElement = /*#__PURE__*/ React.createElement("span", {
+                    hidden: true,
+                    id: activeId
+                }, activeText);
+            } else if (root['aria-label']) {
+                // Otherwise, just append it to the aria-label
+                root['aria-label'] += ' ' + activeText;
+            }
+        }
+    }
+    return {
+        size,
+        shape,
+        active,
+        activeAppearance,
+        activeAriaLabelElement,
+        color,
+        components: {
+            root: 'span',
+            initials: 'span',
+            icon: 'span',
+            image: 'img',
+            badge: PresenceBadge
+        },
+        root,
+        initials,
+        icon,
+        image,
+        badge
+    };
+};
+const getBadgeSize = (size)=>{
+    if (size >= 96) {
+        return 'extra-large';
+    } else if (size >= 64) {
+        return 'large';
+    } else if (size >= 56) {
+        return 'medium';
+    } else if (size >= 40) {
+        return 'small';
+    } else if (size >= 28) {
+        return 'extra-small';
+    } else {
+        return 'tiny';
+    }
+};
+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;
+    for(let len = str.length - 1; len >= 0; len--){
+        const ch = str.charCodeAt(len);
+        const shift = len % 8;
+        hashCode ^= (ch << shift) + (ch >> 8 - shift); // eslint-disable-line no-bitwise
+    }
+    return hashCode;
+};

node_modules/@fluentui/react-avatar/lib/components/Avatar/useAvatarStyles.styles.js

@@ -0,0 +1,603 @@
+import { tokens } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+export const avatarClassNames = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge'
+};
+// CSS variables used internally in Avatar's styles
+const vars = {
+  badgeRadius: '--fui-Avatar-badgeRadius',
+  badgeGap: '--fui-Avatar-badgeGap',
+  badgeAlign: '--fui-Avatar-badgeAlign',
+  ringWidth: '--fui-Avatar-ringWidth'
+};
+const useRootClassName = /*#__PURE__*/__resetStyles("r81b29z", "r1aatmv", {
+  r: [".r81b29z{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r81b29z::before,.r81b29z::after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r81b29z::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}", ".r1aatmv{display:inline-block;flex-shrink:0;position:relative;vertical-align:middle;border-radius:var(--borderRadiusCircular);font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase300);width:32px;height:32px;}", ".r1aatmv::before,.r1aatmv::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:calc(-2 * var(--fui-Avatar-ringWidth, 0px));border-radius:inherit;transition-property:margin,opacity;transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);transition-duration:var(--durationUltraSlow),var(--durationSlower);}", ".r1aatmv::before{border-style:solid;border-width:var(--fui-Avatar-ringWidth);}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.r81b29z::before,.r81b29z::after{transition-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1aatmv::before,.r1aatmv::after{transition-duration:0.01ms;}}"]
+});
+const useImageClassName = /*#__PURE__*/__resetStyles("r136dc0n", "rjly0nl", [".r136dc0n{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}", ".rjly0nl{position:absolute;top:0;right:0;width:100%;height:100%;border-radius:inherit;object-fit:cover;vertical-align:top;}"]);
+const useIconInitialsClassName = /*#__PURE__*/__resetStyles("rip04v", "r31uzil", [".rip04v{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}", ".r31uzil{position:absolute;box-sizing:border-box;top:0;right:0;width:100%;height:100%;line-height:1;border:var(--strokeWidthThin) solid var(--colorTransparentStroke);display:flex;align-items:center;justify-content:center;vertical-align:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:inherit;}"]);
+/**
+ * Helper to create a maskImage that punches out a circle larger than the badge by `badgeGap`.
+ * This creates a transparent gap between the badge and Avatar.
+ *
+ * Used by the icon, initials, and image slots, as well as the ring ::before pseudo-element.
+ */
+const badgeMask = margin => {
+  // Center the cutout at the badge's radius away from the edge.
+  // The ring (::before) also has a 2 * ringWidth margin that also needs to be offset.
+  const centerOffset = margin ? `calc(var(${vars.badgeRadius}) + ${margin})` : `var(${vars.badgeRadius})`;
+  // radial-gradient does not have anti-aliasing, so the transparent and opaque gradient stops are offset by +/- 0.25px
+  // to "fade" from transparent to opaque over a half-pixel and ease the transition.
+  const innerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) - 0.25px)`;
+  const outerRadius = `calc(var(${vars.badgeRadius}) + var(${vars.badgeGap}) + 0.25px)`;
+  return `radial-gradient(circle at bottom ${centerOffset} var(${vars.badgeAlign}) ${centerOffset}, ` + `transparent ${innerRadius}, white ${outerRadius})`;
+};
+const useStyles = /*#__PURE__*/__styles({
+  textCaption2Strong: {
+    Be2twd7: "f13mqy1h"
+  },
+  textCaption1Strong: {
+    Be2twd7: "fy9rknc"
+  },
+  textSubtitle2: {
+    Be2twd7: "fod5ikn"
+  },
+  textSubtitle1: {
+    Be2twd7: "f1pp30po"
+  },
+  textTitle3: {
+    Be2twd7: "f1x0m3f5"
+  },
+  squareSmall: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91"
+  },
+  squareMedium: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5"
+  },
+  squareLarge: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1o0qvyv"
+  },
+  squareXLarge: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1kijzfu"
+  },
+  activeOrInactive: {
+    Bz10aip: "ftfx35i",
+    Bmy1vo4: "fv0atk9",
+    B3o57yi: "f1iry5bo",
+    Bkqvd7p: "f15n41j8",
+    Hwfdqs: "f1onx1g3"
+  },
+  ring: {
+    Ftih45: "f1wl9k8s"
+  },
+  ringBadgeCutout: {
+    f4a502: "fp2gujx"
+  },
+  ringThick: {
+    of393c: "fq1w1vq"
+  },
+  ringThicker: {
+    of393c: "fzg6ace"
+  },
+  ringThickest: {
+    of393c: "f1nu8p71"
+  },
+  shadow: {
+    Bsft5z2: "f13zj6fq"
+  },
+  shadow4: {
+    Be6vj1x: "fcjn15l"
+  },
+  shadow8: {
+    Be6vj1x: "f1tm8t9f"
+  },
+  shadow16: {
+    Be6vj1x: "f1a1aohj"
+  },
+  shadow28: {
+    Be6vj1x: "fond6v5"
+  },
+  inactive: {
+    abs64n: "fp25eh",
+    Bz10aip: "f1clczzi",
+    Bkqvd7p: "f1l3s34x",
+    Bfgortx: 0,
+    Bnvr3x9: 0,
+    b2tv09: 0,
+    Bucmhp4: 0,
+    iayac2: "flkahu5",
+    b6ubon: "fw457kn",
+    Bqinb2h: "f1wmllxl"
+  },
+  badge: {
+    qhf8xq: "f1euv43f",
+    B5kzvoi: "f1yab3r1",
+    j35jbq: ["f1e31b4d", "f1vgc2s3"]
+  },
+  badgeCutout: {
+    btxmck: "f1eugkqs"
+  },
+  badgeAlign: {
+    Dnlfbu: ["f1tlnv9o", "f1y9kyih"]
+  },
+  tiny: {
+    Bdjeniz: "f1uwoubl",
+    niu6jh: "fid048z"
+  },
+  "extra-small": {
+    Bdjeniz: "f13ar0e0",
+    niu6jh: "fid048z"
+  },
+  small: {
+    Bdjeniz: "fwwuruf",
+    niu6jh: "fid048z"
+  },
+  medium: {
+    Bdjeniz: "f1af27q5",
+    niu6jh: "fid048z"
+  },
+  large: {
+    Bdjeniz: "f18yy57a",
+    niu6jh: "f924bxt"
+  },
+  "extra-large": {
+    Bdjeniz: "f2jg042",
+    niu6jh: "f924bxt"
+  },
+  icon12: {
+    Be2twd7: "f1ugzwwg"
+  },
+  icon16: {
+    Be2twd7: "f4ybsrx"
+  },
+  icon20: {
+    Be2twd7: "fe5j1ua"
+  },
+  icon24: {
+    Be2twd7: "f1rt2boy"
+  },
+  icon28: {
+    Be2twd7: "f24l1pt"
+  },
+  icon32: {
+    Be2twd7: "ffl51b"
+  },
+  icon48: {
+    Be2twd7: "f18m8u13"
+  }
+}, {
+  d: [".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f1x0m3f5{font-size:var(--fontSizeBase600);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], [".f1o0qvyv{border-radius:var(--borderRadiusLarge);}", {
+    p: -1
+  }], [".f1kijzfu{border-radius:var(--borderRadiusXLarge);}", {
+    p: -1
+  }], ".ftfx35i{transform:perspective(1px);}", ".fv0atk9{transition-property:transform,opacity;}", ".f1iry5bo{transition-duration:var(--durationUltraSlow),var(--durationFaster);}", ".f15n41j8{transition-timing-function:var(--curveEasyEaseMax),var(--curveLinear);}", ".f1wl9k8s::before{content:\"\";}", ".fp2gujx::before{-webkit-mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)) var(--fui-Avatar-badgeAlign) calc(var(--fui-Avatar-badgeRadius) + 2 * var(--fui-Avatar-ringWidth)), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".fq1w1vq{--fui-Avatar-ringWidth:var(--strokeWidthThick);}", ".fzg6ace{--fui-Avatar-ringWidth:var(--strokeWidthThicker);}", ".f1nu8p71{--fui-Avatar-ringWidth:var(--strokeWidthThickest);}", ".f13zj6fq::after{content:\"\";}", ".fcjn15l::after{box-shadow:var(--shadow4);}", ".f1tm8t9f::after{box-shadow:var(--shadow8);}", ".f1a1aohj::after{box-shadow:var(--shadow16);}", ".fond6v5::after{box-shadow:var(--shadow28);}", ".fp25eh{opacity:0.8;}", ".f1clczzi{transform:scale(0.875);}", ".f1l3s34x{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", [".flkahu5::before,.flkahu5::after{margin:0;}", {
+    p: -1
+  }], ".fw457kn::before,.fw457kn::after{opacity:0;}", ".f1wmllxl::before,.f1wmllxl::after{transition-timing-function:var(--curveDecelerateMin),var(--curveLinear);}", ".f1euv43f{position:absolute;}", ".f1yab3r1{bottom:0;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f1eugkqs{-webkit-mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));mask-image:radial-gradient(circle at bottom var(--fui-Avatar-badgeRadius) var(--fui-Avatar-badgeAlign) var(--fui-Avatar-badgeRadius), transparent calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) - 0.25px), white calc(var(--fui-Avatar-badgeRadius) + var(--fui-Avatar-badgeGap) + 0.25px));}", ".f1tlnv9o{--fui-Avatar-badgeAlign:right;}", ".f1y9kyih{--fui-Avatar-badgeAlign:left;}", ".f1uwoubl{--fui-Avatar-badgeRadius:3px;}", ".fid048z{--fui-Avatar-badgeGap:var(--strokeWidthThin);}", ".f13ar0e0{--fui-Avatar-badgeRadius:5px;}", ".fwwuruf{--fui-Avatar-badgeRadius:6px;}", ".f1af27q5{--fui-Avatar-badgeRadius:8px;}", ".f18yy57a{--fui-Avatar-badgeRadius:10px;}", ".f924bxt{--fui-Avatar-badgeGap:var(--strokeWidthThick);}", ".f2jg042{--fui-Avatar-badgeRadius:14px;}", ".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;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f1onx1g3{transition-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
+});
+export const useSizeStyles = /*#__PURE__*/__styles({
+  "16": {
+    a9b677: "fjw5fx7",
+    Bqenvij: "fd461yt"
+  },
+  "20": {
+    a9b677: "f64fuq3",
+    Bqenvij: "fjamq6b"
+  },
+  "24": {
+    a9b677: "fq4mcun",
+    Bqenvij: "frvgh55"
+  },
+  "28": {
+    a9b677: "f1w9dchk",
+    Bqenvij: "fxldao9"
+  },
+  "32": {
+    a9b677: "f1szoe96",
+    Bqenvij: "f1d2rq10"
+  },
+  "36": {
+    a9b677: "fpdz1er",
+    Bqenvij: "f8ljn23"
+  },
+  "40": {
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac"
+  },
+  "48": {
+    a9b677: "f124akge",
+    Bqenvij: "ff2sm71"
+  },
+  "56": {
+    a9b677: "f1u66zr1",
+    Bqenvij: "fzki0ko"
+  },
+  "64": {
+    a9b677: "fa9ln6p",
+    Bqenvij: "f16k9i2m"
+  },
+  "72": {
+    a9b677: "fhcae8x",
+    Bqenvij: "f1shusfg"
+  },
+  "96": {
+    a9b677: "f1kyr2gn",
+    Bqenvij: "fypu0ge"
+  },
+  "120": {
+    a9b677: "fwfqyga",
+    Bqenvij: "fjr5b71"
+  },
+  "128": {
+    a9b677: "f1iksgmy",
+    Bqenvij: "fele2au"
+  }
+}, {
+  d: [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".fpdz1er{width:36px;}", ".f8ljn23{height:36px;}", ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", ".f124akge{width:48px;}", ".ff2sm71{height:48px;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
+});
+const useColorStyles = /*#__PURE__*/__styles({
+  neutral: {
+    sj55zd: "f11d4kpn",
+    De3pzq: "f18f03hv"
+  },
+  brand: {
+    sj55zd: "fonrgv7",
+    De3pzq: "f1blnnmj"
+  },
+  "dark-red": {
+    sj55zd: "fqjd1y1",
+    De3pzq: "f1vq2oo4"
+  },
+  cranberry: {
+    sj55zd: "fg9gses",
+    De3pzq: "f1lwxszt"
+  },
+  red: {
+    sj55zd: "f23f7i0",
+    De3pzq: "f1q9qhfq"
+  },
+  pumpkin: {
+    sj55zd: "fjnan08",
+    De3pzq: "fz91bi3"
+  },
+  peach: {
+    sj55zd: "fknu15p",
+    De3pzq: "f1b9nr51"
+  },
+  marigold: {
+    sj55zd: "f9603vw",
+    De3pzq: "f3z4w6d"
+  },
+  gold: {
+    sj55zd: "fmq0uwp",
+    De3pzq: "fg50kya"
+  },
+  brass: {
+    sj55zd: "f28g5vo",
+    De3pzq: "f4w2gd0"
+  },
+  brown: {
+    sj55zd: "ftl572b",
+    De3pzq: "f14wu1f4"
+  },
+  forest: {
+    sj55zd: "f1gymlvd",
+    De3pzq: "f19ut4y6"
+  },
+  seafoam: {
+    sj55zd: "fnnb6wn",
+    De3pzq: "f1n057jc"
+  },
+  "dark-green": {
+    sj55zd: "ff58qw8",
+    De3pzq: "f11t05wk"
+  },
+  "light-teal": {
+    sj55zd: "f1up9qbj",
+    De3pzq: "f42feg1"
+  },
+  teal: {
+    sj55zd: "f135dsb4",
+    De3pzq: "f6hvv1p"
+  },
+  steel: {
+    sj55zd: "f151dlcp",
+    De3pzq: "f1lnp8zf"
+  },
+  blue: {
+    sj55zd: "f1rjv50u",
+    De3pzq: "f1ggcpy6"
+  },
+  "royal-blue": {
+    sj55zd: "f1emykk5",
+    De3pzq: "f12rj61f"
+  },
+  cornflower: {
+    sj55zd: "fqsigj7",
+    De3pzq: "f8k7hur"
+  },
+  navy: {
+    sj55zd: "f1nj97xi",
+    De3pzq: "f19gw0ux"
+  },
+  lavender: {
+    sj55zd: "fwctg0i",
+    De3pzq: "ff379vm"
+  },
+  purple: {
+    sj55zd: "fjrsgpu",
+    De3pzq: "f1mzf1e1"
+  },
+  grape: {
+    sj55zd: "f1fiiydq",
+    De3pzq: "f1o4k8oy"
+  },
+  lilac: {
+    sj55zd: "f1res9jt",
+    De3pzq: "f1x6mz1o"
+  },
+  pink: {
+    sj55zd: "fv3fbbi",
+    De3pzq: "fydlv6t"
+  },
+  magenta: {
+    sj55zd: "f1f1fwnz",
+    De3pzq: "f4xb6j5"
+  },
+  plum: {
+    sj55zd: "f8ptl6j",
+    De3pzq: "fqo8e26"
+  },
+  beige: {
+    sj55zd: "f1ntv3ld",
+    De3pzq: "f101elhj"
+  },
+  mink: {
+    sj55zd: "f1fscmp",
+    De3pzq: "f13g8o5c"
+  },
+  platinum: {
+    sj55zd: "f1dr00v2",
+    De3pzq: "fkh7blw"
+  },
+  anchor: {
+    sj55zd: "f1f3ti53",
+    De3pzq: "fu4yj0j"
+  }
+}, {
+  d: [".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1blnnmj{background-color:var(--colorBrandBackgroundStatic);}", ".fqjd1y1{color:var(--colorPaletteDarkRedForeground2);}", ".f1vq2oo4{background-color:var(--colorPaletteDarkRedBackground2);}", ".fg9gses{color:var(--colorPaletteCranberryForeground2);}", ".f1lwxszt{background-color:var(--colorPaletteCranberryBackground2);}", ".f23f7i0{color:var(--colorPaletteRedForeground2);}", ".f1q9qhfq{background-color:var(--colorPaletteRedBackground2);}", ".fjnan08{color:var(--colorPalettePumpkinForeground2);}", ".fz91bi3{background-color:var(--colorPalettePumpkinBackground2);}", ".fknu15p{color:var(--colorPalettePeachForeground2);}", ".f1b9nr51{background-color:var(--colorPalettePeachBackground2);}", ".f9603vw{color:var(--colorPaletteMarigoldForeground2);}", ".f3z4w6d{background-color:var(--colorPaletteMarigoldBackground2);}", ".fmq0uwp{color:var(--colorPaletteGoldForeground2);}", ".fg50kya{background-color:var(--colorPaletteGoldBackground2);}", ".f28g5vo{color:var(--colorPaletteBrassForeground2);}", ".f4w2gd0{background-color:var(--colorPaletteBrassBackground2);}", ".ftl572b{color:var(--colorPaletteBrownForeground2);}", ".f14wu1f4{background-color:var(--colorPaletteBrownBackground2);}", ".f1gymlvd{color:var(--colorPaletteForestForeground2);}", ".f19ut4y6{background-color:var(--colorPaletteForestBackground2);}", ".fnnb6wn{color:var(--colorPaletteSeafoamForeground2);}", ".f1n057jc{background-color:var(--colorPaletteSeafoamBackground2);}", ".ff58qw8{color:var(--colorPaletteDarkGreenForeground2);}", ".f11t05wk{background-color:var(--colorPaletteDarkGreenBackground2);}", ".f1up9qbj{color:var(--colorPaletteLightTealForeground2);}", ".f42feg1{background-color:var(--colorPaletteLightTealBackground2);}", ".f135dsb4{color:var(--colorPaletteTealForeground2);}", ".f6hvv1p{background-color:var(--colorPaletteTealBackground2);}", ".f151dlcp{color:var(--colorPaletteSteelForeground2);}", ".f1lnp8zf{background-color:var(--colorPaletteSteelBackground2);}", ".f1rjv50u{color:var(--colorPaletteBlueForeground2);}", ".f1ggcpy6{background-color:var(--colorPaletteBlueBackground2);}", ".f1emykk5{color:var(--colorPaletteRoyalBlueForeground2);}", ".f12rj61f{background-color:var(--colorPaletteRoyalBlueBackground2);}", ".fqsigj7{color:var(--colorPaletteCornflowerForeground2);}", ".f8k7hur{background-color:var(--colorPaletteCornflowerBackground2);}", ".f1nj97xi{color:var(--colorPaletteNavyForeground2);}", ".f19gw0ux{background-color:var(--colorPaletteNavyBackground2);}", ".fwctg0i{color:var(--colorPaletteLavenderForeground2);}", ".ff379vm{background-color:var(--colorPaletteLavenderBackground2);}", ".fjrsgpu{color:var(--colorPalettePurpleForeground2);}", ".f1mzf1e1{background-color:var(--colorPalettePurpleBackground2);}", ".f1fiiydq{color:var(--colorPaletteGrapeForeground2);}", ".f1o4k8oy{background-color:var(--colorPaletteGrapeBackground2);}", ".f1res9jt{color:var(--colorPaletteLilacForeground2);}", ".f1x6mz1o{background-color:var(--colorPaletteLilacBackground2);}", ".fv3fbbi{color:var(--colorPalettePinkForeground2);}", ".fydlv6t{background-color:var(--colorPalettePinkBackground2);}", ".f1f1fwnz{color:var(--colorPaletteMagentaForeground2);}", ".f4xb6j5{background-color:var(--colorPaletteMagentaBackground2);}", ".f8ptl6j{color:var(--colorPalettePlumForeground2);}", ".fqo8e26{background-color:var(--colorPalettePlumBackground2);}", ".f1ntv3ld{color:var(--colorPaletteBeigeForeground2);}", ".f101elhj{background-color:var(--colorPaletteBeigeBackground2);}", ".f1fscmp{color:var(--colorPaletteMinkForeground2);}", ".f13g8o5c{background-color:var(--colorPaletteMinkBackground2);}", ".f1dr00v2{color:var(--colorPalettePlatinumForeground2);}", ".fkh7blw{background-color:var(--colorPalettePlatinumBackground2);}", ".f1f3ti53{color:var(--colorPaletteAnchorForeground2);}", ".fu4yj0j{background-color:var(--colorPaletteAnchorBackground2);}"]
+});
+const useRingColorStyles = /*#__PURE__*/__styles({
+  neutral: {
+    Bic5iru: "f1uuiafn"
+  },
+  brand: {
+    Bic5iru: "f1uuiafn"
+  },
+  "dark-red": {
+    Bic5iru: "f1t2x9on"
+  },
+  cranberry: {
+    Bic5iru: "f1pvshc9"
+  },
+  red: {
+    Bic5iru: "f1ectbk9"
+  },
+  pumpkin: {
+    Bic5iru: "fvzpl0b"
+  },
+  peach: {
+    Bic5iru: "fwj2kd7"
+  },
+  marigold: {
+    Bic5iru: "fr120vy"
+  },
+  gold: {
+    Bic5iru: "f8xmmar"
+  },
+  brass: {
+    Bic5iru: "f1hbety2"
+  },
+  brown: {
+    Bic5iru: "f1vg3s4g"
+  },
+  forest: {
+    Bic5iru: "f1m3olm5"
+  },
+  seafoam: {
+    Bic5iru: "f17xiqtr"
+  },
+  "dark-green": {
+    Bic5iru: "fx32vyh"
+  },
+  "light-teal": {
+    Bic5iru: "f1mkihwv"
+  },
+  teal: {
+    Bic5iru: "fecnooh"
+  },
+  steel: {
+    Bic5iru: "f15hfgzm"
+  },
+  blue: {
+    Bic5iru: "fqproka"
+  },
+  "royal-blue": {
+    Bic5iru: "f17v2w59"
+  },
+  cornflower: {
+    Bic5iru: "fp0q1mo"
+  },
+  navy: {
+    Bic5iru: "f1nlym55"
+  },
+  lavender: {
+    Bic5iru: "f62vk8h"
+  },
+  purple: {
+    Bic5iru: "f15zl69q"
+  },
+  grape: {
+    Bic5iru: "f53w4j7"
+  },
+  lilac: {
+    Bic5iru: "fu2771t"
+  },
+  pink: {
+    Bic5iru: "fzflscs"
+  },
+  magenta: {
+    Bic5iru: "fb6rmqc"
+  },
+  plum: {
+    Bic5iru: "f1a4gm5b"
+  },
+  beige: {
+    Bic5iru: "f1qpf9z1"
+  },
+  mink: {
+    Bic5iru: "f1l7or83"
+  },
+  platinum: {
+    Bic5iru: "fzrj0iu"
+  },
+  anchor: {
+    Bic5iru: "f8oz6wf"
+  }
+}, {
+  d: [".f1uuiafn::before{color:var(--colorBrandStroke1);}", ".f1t2x9on::before{color:var(--colorPaletteDarkRedBorderActive);}", ".f1pvshc9::before{color:var(--colorPaletteCranberryBorderActive);}", ".f1ectbk9::before{color:var(--colorPaletteRedBorderActive);}", ".fvzpl0b::before{color:var(--colorPalettePumpkinBorderActive);}", ".fwj2kd7::before{color:var(--colorPalettePeachBorderActive);}", ".fr120vy::before{color:var(--colorPaletteMarigoldBorderActive);}", ".f8xmmar::before{color:var(--colorPaletteGoldBorderActive);}", ".f1hbety2::before{color:var(--colorPaletteBrassBorderActive);}", ".f1vg3s4g::before{color:var(--colorPaletteBrownBorderActive);}", ".f1m3olm5::before{color:var(--colorPaletteForestBorderActive);}", ".f17xiqtr::before{color:var(--colorPaletteSeafoamBorderActive);}", ".fx32vyh::before{color:var(--colorPaletteDarkGreenBorderActive);}", ".f1mkihwv::before{color:var(--colorPaletteLightTealBorderActive);}", ".fecnooh::before{color:var(--colorPaletteTealBorderActive);}", ".f15hfgzm::before{color:var(--colorPaletteSteelBorderActive);}", ".fqproka::before{color:var(--colorPaletteBlueBorderActive);}", ".f17v2w59::before{color:var(--colorPaletteRoyalBlueBorderActive);}", ".fp0q1mo::before{color:var(--colorPaletteCornflowerBorderActive);}", ".f1nlym55::before{color:var(--colorPaletteNavyBorderActive);}", ".f62vk8h::before{color:var(--colorPaletteLavenderBorderActive);}", ".f15zl69q::before{color:var(--colorPalettePurpleBorderActive);}", ".f53w4j7::before{color:var(--colorPaletteGrapeBorderActive);}", ".fu2771t::before{color:var(--colorPaletteLilacBorderActive);}", ".fzflscs::before{color:var(--colorPalettePinkBorderActive);}", ".fb6rmqc::before{color:var(--colorPaletteMagentaBorderActive);}", ".f1a4gm5b::before{color:var(--colorPalettePlumBorderActive);}", ".f1qpf9z1::before{color:var(--colorPaletteBeigeBorderActive);}", ".f1l7or83::before{color:var(--colorPaletteMinkBorderActive);}", ".fzrj0iu::before{color:var(--colorPalettePlatinumBorderActive);}", ".f8oz6wf::before{color:var(--colorPaletteAnchorBorderActive);}"]
+});
+export const useAvatarStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    size,
+    shape,
+    active,
+    activeAppearance,
+    color
+  } = state;
+  const rootClassName = useRootClassName();
+  const imageClassName = useImageClassName();
+  const iconInitialsClassName = useIconInitialsClassName();
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const colorStyles = useColorStyles();
+  const ringColorStyles = useRingColorStyles();
+  const rootClasses = [rootClassName, size !== 32 && sizeStyles[size]];
+  if (state.badge) {
+    rootClasses.push(styles.badgeAlign, styles[state.badge.size || 'medium']);
+  }
+  if (size <= 24) {
+    rootClasses.push(styles.textCaption2Strong);
+  } else if (size <= 28) {
+    rootClasses.push(styles.textCaption1Strong);
+  } else if (size <= 40) {
+    // Default text size included in useRootClassName
+  } else if (size <= 56) {
+    rootClasses.push(styles.textSubtitle2);
+  } else if (size <= 96) {
+    rootClasses.push(styles.textSubtitle1);
+  } else {
+    rootClasses.push(styles.textTitle3);
+  }
+  if (shape === 'square') {
+    if (size <= 24) {
+      rootClasses.push(styles.squareSmall);
+    } else if (size <= 48) {
+      rootClasses.push(styles.squareMedium);
+    } else if (size <= 72) {
+      rootClasses.push(styles.squareLarge);
+    } else {
+      rootClasses.push(styles.squareXLarge);
+    }
+  }
+  if (active === 'active' || active === 'inactive') {
+    rootClasses.push(styles.activeOrInactive);
+    if (activeAppearance === 'ring' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.ring, ringColorStyles[color]);
+      if (state.badge) {
+        rootClasses.push(styles.ringBadgeCutout);
+      }
+      if (size <= 48) {
+        rootClasses.push(styles.ringThick);
+      } else if (size <= 64) {
+        rootClasses.push(styles.ringThicker);
+      } else {
+        rootClasses.push(styles.ringThickest);
+      }
+    }
+    if (activeAppearance === 'shadow' || activeAppearance === 'ring-shadow') {
+      rootClasses.push(styles.shadow);
+      if (size <= 28) {
+        rootClasses.push(styles.shadow4);
+      } else if (size <= 48) {
+        rootClasses.push(styles.shadow8);
+      } else if (size <= 64) {
+        rootClasses.push(styles.shadow16);
+      } else {
+        rootClasses.push(styles.shadow28);
+      }
+    }
+    // Note: The inactive style overrides some of the activeAppearance styles and must be applied after them
+    if (active === 'inactive') {
+      rootClasses.push(styles.inactive);
+    }
+  }
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
+  if (state.badge) {
+    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
+  }
+  if (state.image) {
+    state.image.className = mergeClasses(avatarClassNames.image, imageClassName, colorStyles[color], state.badge && styles.badgeCutout, state.image.className);
+  }
+  if (state.initials) {
+    state.initials.className = mergeClasses(avatarClassNames.initials, iconInitialsClassName, colorStyles[color], state.badge && styles.badgeCutout, state.initials.className);
+  }
+  if (state.icon) {
+    let iconSizeClass;
+    if (size <= 16) {
+      iconSizeClass = styles.icon12;
+    } else if (size <= 24) {
+      iconSizeClass = styles.icon16;
+    } else if (size <= 40) {
+      iconSizeClass = styles.icon20;
+    } else if (size <= 48) {
+      iconSizeClass = styles.icon24;
+    } else if (size <= 56) {
+      iconSizeClass = styles.icon28;
+    } else if (size <= 72) {
+      iconSizeClass = styles.icon32;
+    } else {
+      iconSizeClass = styles.icon48;
+    }
+    state.icon.className = mergeClasses(avatarClassNames.icon, iconInitialsClassName, iconSizeClass, colorStyles[color], state.badge && styles.badgeCutout, state.icon.className);
+  }
+  return state;
+};