@fluentui/react-avatar 9.2.5 → 9.2.7

package/lib-amd/components/Avatar/renderAvatar.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderAvatar_unstable = void 0;
+    var renderAvatar_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.initials && React.createElement(slots.initials, tslib_1.__assign({}, slotProps.initials)),
+            slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            slots.image && React.createElement(slots.image, tslib_1.__assign({}, slotProps.image)),
+            slots.badge && React.createElement(slots.badge, tslib_1.__assign({}, slotProps.badge)),
+            state.activeAriaLabelElement));
+    };
+    exports.renderAvatar_unstable = renderAvatar_unstable;
+});
+//# sourceMappingURL=renderAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;IAIO,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAE1D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,QAAQ,uBAAK,SAAS,CAAC,QAAQ,EAAI;YAC5D,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAChD,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnD,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnD,KAAK,CAAC,sBAAsB,CAClB,CACd,CAAC;IACJ,CAAC,CAAC;IAZW,QAAA,qBAAqB,yBAYhC","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      {state.activeAriaLabelElement}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Avatar/useAvatar.js

@@ -0,0 +1,175 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../utils/index", "@fluentui/react-icons", "@fluentui/react-badge", "@fluentui/react-shared-contexts", "../../contexts/AvatarContext"], function (require, exports, tslib_1, React, react_utilities_1, index_1, react_icons_1, react_badge_1, react_shared_contexts_1, AvatarContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatar_unstable = exports.DEFAULT_STRINGS = void 0;
+    exports.DEFAULT_STRINGS = {
+        active: 'active',
+        inactive: 'inactive',
+    };
+    var useAvatar_unstable = function (props, ref) {
+        var _a;
+        var dir = react_shared_contexts_1.useFluent_unstable().dir;
+        var contextSize = AvatarContext_1.useAvatarContext().size;
+        var name = props.name, _b = props.size, size = _b === void 0 ? contextSize !== null && contextSize !== void 0 ? contextSize : 32 : _b, _c = props.shape, shape = _c === void 0 ? 'circular' : _c, _d = props.active, active = _d === void 0 ? 'unset' : _d, _e = props.activeAppearance, activeAppearance = _e === void 0 ? 'ring' : _e, idForColor = props.idForColor;
+        var _f = props.color, color = _f === void 0 ? 'neutral' : _f;
+        // Resolve 'colorful' to a specific color name
+        if (color === 'colorful') {
+            color = avatarColors[getHashCode((_a = idForColor !== null && idForColor !== void 0 ? idForColor : name) !== null && _a !== void 0 ? _a : '') % avatarColors.length];
+        }
+        var baseId = react_utilities_1.useId('avatar-');
+        var root = react_utilities_1.getNativeElementProps('span', tslib_1.__assign(tslib_1.__assign({ role: 'img', id: baseId }, props), { ref: ref }), 
+        /* excludedPropNames: */ ['name']);
+        // Resolve the initials slot, defaulted to getInitials.
+        var initials = react_utilities_1.resolveShorthand(props.initials, {
+            required: true,
+            defaultProps: {
+                children: index_1.getInitials(name, dir === 'rtl', { firstInitialOnly: size <= 16 }),
+                id: baseId + '__initials',
+            },
+        });
+        // Render the icon slot *only if* there aren't any initials to display.
+        var icon = undefined;
+        if (!(initials === null || initials === void 0 ? void 0 : initials.children)) {
+            initials = undefined;
+            icon = react_utilities_1.resolveShorthand(props.icon, {
+                required: true,
+                defaultProps: {
+                    children: React.createElement(react_icons_1.PersonRegular, null),
+                    'aria-hidden': true,
+                },
+            });
+        }
+        var _g = React.useState(undefined), imageHidden = _g[0], setImageHidden = _g[1];
+        var image = react_utilities_1.resolveShorthand(props.image, {
+            defaultProps: {
+                alt: '',
+                role: 'presentation',
+                'aria-hidden': true,
+                hidden: imageHidden,
+            },
+        });
+        // Hide the image if it fails to load and restore it on a successful load
+        if (image) {
+            image.onError = react_utilities_1.mergeCallbacks(image.onError, function () { return setImageHidden(true); });
+            image.onLoad = react_utilities_1.mergeCallbacks(image.onLoad, function () { return setImageHidden(undefined); });
+        }
+        var badge = react_utilities_1.resolveShorthand(props.badge, {
+            defaultProps: {
+                size: getBadgeSize(size),
+                id: baseId + '__badge',
+            },
+        });
+        var 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') {
+                var activeText = exports.DEFAULT_STRINGS[active];
+                if (root['aria-labelledby']) {
+                    // If using aria-labelledby, render a hidden span and append it to the labelledby
+                    var activeId = baseId + '__active';
+                    root['aria-labelledby'] += ' ' + activeId;
+                    activeAriaLabelElement = (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: size,
+            shape: shape,
+            active: active,
+            activeAppearance: activeAppearance,
+            activeAriaLabelElement: activeAriaLabelElement,
+            color: color,
+            components: {
+                root: 'span',
+                initials: 'span',
+                icon: 'span',
+                image: 'img',
+                badge: react_badge_1.PresenceBadge,
+            },
+            root: root,
+            initials: initials,
+            icon: icon,
+            image: image,
+            badge: badge,
+        };
+    };
+    exports.useAvatar_unstable = useAvatar_unstable;
+    var getBadgeSize = function (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';
+        }
+    };
+    var 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',
+    ];
+    var getHashCode = function (str) {
+        var hashCode = 0;
+        for (var len = str.length - 1; len >= 0; len--) {
+            var ch = str.charCodeAt(len);
+            var shift = len % 8;
+            hashCode ^= (ch << shift) + (ch >> (8 - shift)); // eslint-disable-line no-bitwise
+        }
+        return hashCode;
+    };
+});
+//# sourceMappingURL=useAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, 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 { useAvatarContext } from '../../contexts/AvatarContext';\n\nexport const DEFAULT_STRINGS = {\n  active: 'active',\n  inactive: 'inactive',\n};\n\nexport const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElement>): AvatarState => {\n  const { dir } = useFluent();\n  const { size: contextSize } = useAvatarContext();\n  const {\n    name,\n    size = contextSize ?? (32 as const),\n    shape = 'circular',\n    active = 'unset',\n    activeAppearance = 'ring',\n    idForColor,\n  } = 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  if (image) {\n    image.onError = mergeCallbacks(image.onError, () => setImageHidden(true));\n    image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined));\n  }\n\n  const badge: AvatarState['badge'] = resolveShorthand(props.badge, {\n    defaultProps: {\n      size: getBadgeSize(size),\n      id: baseId + '__badge',\n    },\n  });\n\n  let activeAriaLabelElement: AvatarState['activeAriaLabelElement'];\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    // Add the active state to the aria label\n    if (active === 'active' || active === 'inactive') {\n      const activeText = DEFAULT_STRINGS[active];\n      if (root['aria-labelledby']) {\n        // If using aria-labelledby, render a hidden span and append it to the labelledby\n        const activeId = baseId + '__active';\n        root['aria-labelledby'] += ' ' + activeId;\n        activeAriaLabelElement = (\n          <span hidden id={activeId}>\n            {activeText}\n          </span>\n        );\n      } else if (root['aria-label']) {\n        // Otherwise, just append it to the aria-label\n        root['aria-label'] += ' ' + activeText;\n      }\n    }\n  }\n\n  return {\n    size,\n    shape,\n    active,\n    activeAppearance,\n    activeAriaLabelElement,\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"]}

package/lib-amd/components/Avatar/useAvatarStyles.js

@@ -0,0 +1,390 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useAvatarStyles_unstable = exports.useSizeStyles = exports.avatarClassNames = void 0;
+    exports.avatarClassNames = {
+        root: 'fui-Avatar',
+        image: 'fui-Avatar__image',
+        initials: 'fui-Avatar__initials',
+        icon: 'fui-Avatar__icon',
+        badge: 'fui-Avatar__badge',
+    };
+    var animations = {
+        fastOutSlowInMax: react_theme_1.tokens.curveDecelerateMax,
+        fastOutSlowInMid: react_theme_1.tokens.curveDecelerateMid,
+        fastOutSlowInMin: react_theme_1.tokens.curveDecelerateMin,
+        slowOutFastInMax: react_theme_1.tokens.curveAccelerateMax,
+        slowOutFastInMid: react_theme_1.tokens.curveAccelerateMid,
+        slowOutFastInMin: react_theme_1.tokens.curveAccelerateMin,
+        fastEase: react_theme_1.tokens.curveEasyEaseMax,
+        normalEase: react_theme_1.tokens.curveEasyEase,
+        nullEasing: react_theme_1.tokens.curveLinear,
+    };
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign({ display: 'inline-block', flexShrink: 0, position: 'relative', verticalAlign: 'middle' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), { fontFamily: react_theme_1.tokens.fontFamilyBase, fontWeight: react_theme_1.tokens.fontWeightSemibold }),
+        textCaption2Strong: {
+            fontSize: react_theme_1.tokens.fontSizeBase100,
+            fontWeight: react_theme_1.tokens.fontWeightSemibold,
+        },
+        textCaption1Strong: { fontSize: react_theme_1.tokens.fontSizeBase200 },
+        textBody1Strong: { fontSize: react_theme_1.tokens.fontSizeBase300 },
+        textSubtitle2: { fontSize: react_theme_1.tokens.fontSizeBase400 },
+        textSubtitle1: { fontSize: react_theme_1.tokens.fontSizeBase500 },
+        textTitle: { fontSize: react_theme_1.tokens.fontSizeBase600 },
+        squareSmall: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)),
+        squareMedium: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
+        squareLarge: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge)),
+        squareXLarge: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusXLarge)),
+        activeOrInactive: {
+            transform: 'perspective(1px)',
+            transitionProperty: 'transform, opacity',
+            transitionDuration: react_theme_1.tokens.durationUltraSlow + ", " + react_theme_1.tokens.durationFaster,
+            transitionDelay: animations.fastEase + ", " + animations.nullEasing,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+            },
+            '::before': tslib_1.__assign(tslib_1.__assign({ content: '""', position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }, react_1.shorthands.borderRadius('inherit')), { transitionProperty: 'margin, opacity', transitionDuration: react_theme_1.tokens.durationUltraSlow + ", " + react_theme_1.tokens.durationSlower, transitionDelay: animations.fastEase + ", " + animations.nullEasing, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+        },
+        ring: {
+            '::before': tslib_1.__assign({}, react_1.shorthands.borderStyle('solid')),
+        },
+        ringThick: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.margin("calc(-2 * " + react_theme_1.tokens.strokeWidthThick + ")")), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThick)),
+        },
+        ringThicker: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.margin("calc(-2 * " + react_theme_1.tokens.strokeWidthThicker + ")")), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThicker)),
+        },
+        ringThickest: {
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.margin("calc(-2 * " + react_theme_1.tokens.strokeWidthThickest + ")")), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThickest)),
+        },
+        shadow4: { '::before': { boxShadow: react_theme_1.tokens.shadow4 } },
+        shadow8: { '::before': { boxShadow: react_theme_1.tokens.shadow8 } },
+        shadow16: { '::before': { boxShadow: react_theme_1.tokens.shadow16 } },
+        shadow28: { '::before': { boxShadow: react_theme_1.tokens.shadow28 } },
+        inactive: {
+            opacity: '0.8',
+            transform: 'scale(0.875)',
+            transitionProperty: 'transform, opacity',
+            transitionDuration: react_theme_1.tokens.durationUltraSlow + ", " + react_theme_1.tokens.durationFaster,
+            transitionDelay: animations.fastOutSlowInMin + ", " + animations.nullEasing,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+                transitionDelay: '0.01ms',
+            },
+            '::before': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.margin(0)), { opacity: 0, transitionProperty: 'margin, opacity', transitionDuration: react_theme_1.tokens.durationUltraSlow + ", " + react_theme_1.tokens.durationSlower, transitionDelay: animations.fastOutSlowInMin + ", " + animations.nullEasing, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+        },
+        badge: {
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThin + " " + react_theme_1.tokens.colorNeutralBackground1,
+        },
+        badgeLarge: {
+            boxShadow: "0 0 0 " + react_theme_1.tokens.strokeWidthThick + " " + react_theme_1.tokens.colorNeutralBackground1,
+        },
+        image: tslib_1.__assign(tslib_1.__assign({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }, react_1.shorthands.borderRadius('inherit')), { objectFit: 'cover', verticalAlign: 'top' }),
+        iconInitials: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'absolute', boxSizing: 'border-box', top: 0, left: 0, width: '100%', height: '100%', lineHeight: '1' }, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorTransparentStroke)), { display: 'flex', alignItems: 'center', justifyContent: 'center', verticalAlign: 'center', textAlign: 'center', userSelect: 'none' }), react_1.shorthands.borderRadius('inherit')),
+        icon12: { fontSize: '12px' },
+        icon16: { fontSize: '16px' },
+        icon20: { fontSize: '20px' },
+        icon24: { fontSize: '24px' },
+        icon28: { fontSize: '28px' },
+        icon32: { fontSize: '32px' },
+        icon48: { fontSize: '48px' },
+    });
+    exports.useSizeStyles = react_1.makeStyles({
+        16: { width: '16px', height: '16px' },
+        20: { width: '20px', height: '20px' },
+        24: { width: '24px', height: '24px' },
+        28: { width: '28px', height: '28px' },
+        32: { width: '32px', height: '32px' },
+        36: { width: '36px', height: '36px' },
+        40: { width: '40px', height: '40px' },
+        48: { width: '48px', height: '48px' },
+        56: { width: '56px', height: '56px' },
+        64: { width: '64px', height: '64px' },
+        72: { width: '72px', height: '72px' },
+        96: { width: '96px', height: '96px' },
+        120: { width: '120px', height: '120px' },
+        128: { width: '128px', height: '128px' },
+    });
+    var useColorStyles = react_1.makeStyles({
+        neutral: {
+            color: react_theme_1.tokens.colorNeutralForeground3,
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground6,
+            // The ::before element is the ring when active
+            '::before': { color: react_theme_1.tokens.colorBrandStroke1 },
+        },
+        brand: {
+            color: react_theme_1.tokens.colorNeutralForegroundStaticInverted,
+            backgroundColor: react_theme_1.tokens.colorBrandBackgroundStatic,
+            '::before': { color: react_theme_1.tokens.colorBrandStroke1 },
+        },
+        'dark-red': {
+            color: react_theme_1.tokens.colorPaletteDarkRedForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteDarkRedBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteDarkRedBorderActive },
+        },
+        cranberry: {
+            color: react_theme_1.tokens.colorPaletteCranberryForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteCranberryBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteCranberryBorderActive },
+        },
+        red: {
+            color: react_theme_1.tokens.colorPaletteRedForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteRedBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteRedBorderActive },
+        },
+        pumpkin: {
+            color: react_theme_1.tokens.colorPalettePumpkinForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePumpkinBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePumpkinBorderActive },
+        },
+        peach: {
+            color: react_theme_1.tokens.colorPalettePeachForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePeachBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePeachBorderActive },
+        },
+        marigold: {
+            color: react_theme_1.tokens.colorPaletteMarigoldForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteMarigoldBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteMarigoldBorderActive },
+        },
+        gold: {
+            color: react_theme_1.tokens.colorPaletteGoldForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteGoldBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteGoldBorderActive },
+        },
+        brass: {
+            color: react_theme_1.tokens.colorPaletteBrassForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteBrassBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteBrassBorderActive },
+        },
+        brown: {
+            color: react_theme_1.tokens.colorPaletteBrownForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteBrownBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteBrownBorderActive },
+        },
+        forest: {
+            color: react_theme_1.tokens.colorPaletteForestForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteForestBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteForestBorderActive },
+        },
+        seafoam: {
+            color: react_theme_1.tokens.colorPaletteSeafoamForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteSeafoamBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteSeafoamBorderActive },
+        },
+        'dark-green': {
+            color: react_theme_1.tokens.colorPaletteDarkGreenForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteDarkGreenBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteDarkGreenBorderActive },
+        },
+        'light-teal': {
+            color: react_theme_1.tokens.colorPaletteLightTealForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteLightTealBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteLightTealBorderActive },
+        },
+        teal: {
+            color: react_theme_1.tokens.colorPaletteTealForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteTealBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteTealBorderActive },
+        },
+        steel: {
+            color: react_theme_1.tokens.colorPaletteSteelForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteSteelBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteSteelBorderActive },
+        },
+        blue: {
+            color: react_theme_1.tokens.colorPaletteBlueForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteBlueBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteBlueBorderActive },
+        },
+        'royal-blue': {
+            color: react_theme_1.tokens.colorPaletteRoyalBlueForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteRoyalBlueBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteRoyalBlueBorderActive },
+        },
+        cornflower: {
+            color: react_theme_1.tokens.colorPaletteCornflowerForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteCornflowerBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteCornflowerBorderActive },
+        },
+        navy: {
+            color: react_theme_1.tokens.colorPaletteNavyForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteNavyBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteNavyBorderActive },
+        },
+        lavender: {
+            color: react_theme_1.tokens.colorPaletteLavenderForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteLavenderBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteLavenderBorderActive },
+        },
+        purple: {
+            color: react_theme_1.tokens.colorPalettePurpleForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePurpleBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePurpleBorderActive },
+        },
+        grape: {
+            color: react_theme_1.tokens.colorPaletteGrapeForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteGrapeBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteGrapeBorderActive },
+        },
+        lilac: {
+            color: react_theme_1.tokens.colorPaletteLilacForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteLilacBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteLilacBorderActive },
+        },
+        pink: {
+            color: react_theme_1.tokens.colorPalettePinkForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePinkBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePinkBorderActive },
+        },
+        magenta: {
+            color: react_theme_1.tokens.colorPaletteMagentaForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteMagentaBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteMagentaBorderActive },
+        },
+        plum: {
+            color: react_theme_1.tokens.colorPalettePlumForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePlumBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePlumBorderActive },
+        },
+        beige: {
+            color: react_theme_1.tokens.colorPaletteBeigeForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteBeigeBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteBeigeBorderActive },
+        },
+        mink: {
+            color: react_theme_1.tokens.colorPaletteMinkForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteMinkBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteMinkBorderActive },
+        },
+        platinum: {
+            color: react_theme_1.tokens.colorPalettePlatinumForeground2,
+            backgroundColor: react_theme_1.tokens.colorPalettePlatinumBackground2,
+            '::before': { color: react_theme_1.tokens.colorPalettePlatinumBorderActive },
+        },
+        anchor: {
+            color: react_theme_1.tokens.colorPaletteAnchorForeground2,
+            backgroundColor: react_theme_1.tokens.colorPaletteAnchorBackground2,
+            '::before': { color: react_theme_1.tokens.colorPaletteAnchorBorderActive },
+        },
+    });
+    var useAvatarStyles_unstable = function (state) {
+        var size = state.size, shape = state.shape, active = state.active, activeAppearance = state.activeAppearance, color = state.color;
+        var styles = useStyles();
+        var sizeStyles = exports.useSizeStyles();
+        var colorStyles = useColorStyles();
+        var rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];
+        if (size <= 24) {
+            rootClasses.push(styles.textCaption2Strong);
+        }
+        else if (size <= 28) {
+            rootClasses.push(styles.textCaption1Strong);
+        }
+        else if (size <= 40) {
+            rootClasses.push(styles.textBody1Strong);
+        }
+        else if (size <= 56) {
+            rootClasses.push(styles.textSubtitle2);
+        }
+        else if (size <= 96) {
+            rootClasses.push(styles.textSubtitle1);
+        }
+        else {
+            rootClasses.push(styles.textTitle);
+        }
+        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);
+                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') {
+                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 = react_1.mergeClasses.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray([exports.avatarClassNames.root], rootClasses), [state.root.className]));
+        if (state.badge) {
+            state.badge.className = react_1.mergeClasses(exports.avatarClassNames.badge, styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+        }
+        if (state.image) {
+            state.image.className = react_1.mergeClasses(exports.avatarClassNames.image, styles.image, state.image.className);
+        }
+        if (state.initials) {
+            state.initials.className = react_1.mergeClasses(exports.avatarClassNames.initials, styles.iconInitials, state.initials.className);
+        }
+        if (state.icon) {
+            var iconSizeClass = void 0;
+            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 = react_1.mergeClasses(exports.avatarClassNames.icon, styles.iconInitials, iconSizeClass, state.icon.className);
+        }
+        return state;
+    };
+    exports.useAvatarStyles_unstable = useAvatarStyles_unstable;
+});
+//# sourceMappingURL=useAvatarStyles.js.map