@fluentui/react-avatar 9.0.0-alpha.80 → 9.0.0-alpha.84

package/lib-amd/components/Avatar/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Avatar.types';
-export * from './Avatar';
-export * from './renderAvatar';
-export * from './useAvatar';
-export * from './useAvatarStyles';

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

@@ -1,10 +0,0 @@
-define(["require", "exports", "tslib", "./Avatar.types", "./Avatar", "./renderAvatar", "./useAvatar", "./useAvatarStyles"], function (require, exports, tslib_1, Avatar_types_1, Avatar_1, renderAvatar_1, useAvatar_1, useAvatarStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Avatar_types_1, exports);
-    tslib_1.__exportStar(Avatar_1, exports);
-    tslib_1.__exportStar(renderAvatar_1, exports);
-    tslib_1.__exportStar(useAvatar_1, exports);
-    tslib_1.__exportStar(useAvatarStyles_1, exports);
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Avatar/index.ts"],"names":[],"mappings":";;;IAAA,8CAA+B;IAC/B,wCAAyB;IACzB,8CAA+B;IAC/B,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Avatar.types';\nexport * from './Avatar';\nexport * from './renderAvatar';\nexport * from './useAvatar';\nexport * from './useAvatarStyles';\n"]}

package/lib-amd/components/Avatar/renderAvatar.d.ts

@@ -1,2 +0,0 @@
-import type { AvatarState } from './Avatar.types';
-export declare const renderAvatar: (state: AvatarState) => JSX.Element;

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"renderAvatar.js","sourceRoot":"../src/","sources":["components/Avatar/renderAvatar.tsx"],"names":[],"mappings":";;;;IAKO,IAAM,YAAY,GAAG,UAAC,KAAkB;QACvC,IAAA,KAAuB,gCAAc,CAAC,KAAK,EAAE,sCAA0B,CAAC,EAAtE,KAAK,WAAA,EAAE,SAAS,eAAsD,CAAC;QAC/E,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACnC,KAAK,CAAC,QAAQ,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YACrD,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpC,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACzB,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,YAAY,gBAUvB","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { avatarShorthandPropsCompat } from './useAvatar';\nimport type { AvatarState } from './Avatar.types';\n\nexport const renderAvatar = (state: AvatarState) => {\n  const { slots, slotProps } = getSlotsCompat(state, avatarShorthandPropsCompat);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.label {...slotProps.label} />\n      {state.showIcon && <slots.icon {...slotProps.icon} />}\n      <slots.image {...slotProps.image} />\n      <slots.badge {...slotProps.badge} />\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Avatar/useAvatar.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { AvatarProps, AvatarState, AvatarShorthandPropsCompat } from './Avatar.types';
-/**
- * Names of the shorthand properties in AvatarProps
- */
-export declare const avatarShorthandPropsCompat: AvatarShorthandPropsCompat[];
-export declare const useAvatar: (props: AvatarProps, ref: React.Ref<HTMLElement>, defaultProps?: AvatarProps | undefined) => AvatarState;

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

@@ -1,141 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../../utils/index", "@fluentui/react-icons", "@fluentui/react-badge"], function (require, exports, tslib_1, React, react_utilities_1, index_1, react_icons_1, react_badge_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useAvatar = exports.avatarShorthandPropsCompat = void 0;
-    /**
-     * Names of the shorthand properties in AvatarProps
-     */
-    exports.avatarShorthandPropsCompat = ['label', 'image', 'badge', 'icon'];
-    var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.avatarShorthandPropsCompat });
-    var useAvatar = function (props, ref, defaultProps) {
-        var state = mergeProps({
-            as: 'span',
-            label: { as: 'span' },
-            icon: { as: 'span' },
-            size: 32,
-            color: 'neutral',
-            activeDisplay: 'ring',
-            getInitials: index_1.getInitials,
-            ref: ref,
-        }, defaultProps && resolveAvatarShorthandPropsCompat(defaultProps), resolveAvatarShorthandPropsCompat(props));
-        var size = state.size, badge = state.badge, label = state.label, icon = state.icon;
-        // If a label was not provided, use the initials and fall back to the icon if initials aren't available
-        if (!label.children) {
-            var initials = state.getInitials(state.name || '', /*isRtl: */ false);
-            if (initials) {
-                label.children = initials;
-            }
-            else {
-                state.showIcon = true;
-                if (!icon.children) {
-                    if (size <= 24) {
-                        icon.children = React.createElement(react_icons_1.Person16Regular, null);
-                    }
-                    else if (size <= 40) {
-                        icon.children = React.createElement(react_icons_1.Person20Regular, null);
-                    }
-                    else if (size <= 48) {
-                        icon.children = React.createElement(react_icons_1.Person24Regular, null);
-                    }
-                    else if (size <= 56) {
-                        icon.children = React.createElement(react_icons_1.Person28Regular, null);
-                    }
-                    else if (size <= 72) {
-                        icon.children = React.createElement(react_icons_1.Person32Regular, null);
-                    }
-                    else {
-                        icon.children = React.createElement(react_icons_1.Person48Regular, null);
-                    }
-                }
-            }
-        }
-        // Provide a default badge size based on the avatar size
-        if (badge && badge.size === undefined) {
-            if (size >= 96) {
-                badge.size = 'larger';
-            }
-            else if (size >= 64) {
-                badge.size = 'large';
-            }
-            else if (size >= 56) {
-                badge.size = 'medium';
-            }
-            else if (size >= 40) {
-                badge.size = 'small';
-            }
-            else if (size >= 28) {
-                badge.size = 'smaller';
-            }
-            else {
-                badge.size = 'smallest';
-            }
-        }
-        if (state.color === 'colorful') {
-            var value = state.idForColor || state.name;
-            if (value) {
-                state.color = avatarColors[getHashCode(value) % avatarColors.length];
-            }
-        }
-        return state;
-    };
-    exports.useAvatar = useAvatar;
-    /**
-     * Avatar treats shorthand for the image and badge props differently. Rather than the string being
-     * the child of those slots, they translate to the image's src and the badge's status prop.
-     */
-    var resolveAvatarShorthandPropsCompat = function (props) {
-        var image = props.image, badge = props.badge;
-        if (typeof image === 'string') {
-            image = { as: 'img', src: image, children: null };
-        }
-        if (typeof badge === 'string') {
-            badge = { as: react_badge_1.PresenceBadge, status: badge };
-        }
-        if (image !== props.image || badge !== props.badge) {
-            props = tslib_1.__assign(tslib_1.__assign({}, props), { image: image, badge: badge });
-        }
-        return react_utilities_1.resolveShorthandProps(props, exports.avatarShorthandPropsCompat);
-    };
-    var 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',
-    ];
-    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

@@ -1 +0,0 @@
-{"version":3,"file":"useAvatar.js","sourceRoot":"../src/","sources":["components/Avatar/useAvatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { getInitials } from '../../utils/index';\nimport {\n  Person16Regular,\n  Person20Regular,\n  Person24Regular,\n  Person28Regular,\n  Person32Regular,\n  Person48Regular,\n} from '@fluentui/react-icons';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { AvatarProps, AvatarState, AvatarNamedColor, AvatarShorthandPropsCompat } from './Avatar.types';\n\n/**\n * Names of the shorthand properties in AvatarProps\n */\nexport const avatarShorthandPropsCompat: AvatarShorthandPropsCompat[] = ['label', 'image', 'badge', 'icon'];\n\nconst mergeProps = makeMergeProps<AvatarState>({ deepMerge: avatarShorthandPropsCompat });\n\nexport const useAvatar = (props: AvatarProps, ref: React.Ref<HTMLElement>, defaultProps?: AvatarProps): AvatarState => {\n  const state = mergeProps(\n    {\n      as: 'span',\n      label: { as: 'span' },\n      icon: { as: 'span' },\n      size: 32,\n      color: 'neutral',\n      activeDisplay: 'ring',\n      getInitials,\n      ref,\n    },\n    defaultProps && resolveAvatarShorthandPropsCompat(defaultProps),\n    resolveAvatarShorthandPropsCompat(props),\n  );\n\n  const { size, badge, label, icon } = state;\n\n  // If a label was not provided, use the initials and fall back to the icon if initials aren't available\n  if (!label.children) {\n    const initials = state.getInitials(state.name || '', /*isRtl: */ false);\n    if (initials) {\n      label.children = initials;\n    } else {\n      state.showIcon = true;\n      if (!icon.children) {\n        if (size <= 24) {\n          icon.children = <Person16Regular />;\n        } else if (size <= 40) {\n          icon.children = <Person20Regular />;\n        } else if (size <= 48) {\n          icon.children = <Person24Regular />;\n        } else if (size <= 56) {\n          icon.children = <Person28Regular />;\n        } else if (size <= 72) {\n          icon.children = <Person32Regular />;\n        } else {\n          icon.children = <Person48Regular />;\n        }\n      }\n    }\n  }\n\n  // Provide a default badge size based on the avatar size\n  if (badge && badge.size === undefined) {\n    if (size >= 96) {\n      badge.size = 'larger';\n    } else if (size >= 64) {\n      badge.size = 'large';\n    } else if (size >= 56) {\n      badge.size = 'medium';\n    } else if (size >= 40) {\n      badge.size = 'small';\n    } else if (size >= 28) {\n      badge.size = 'smaller';\n    } else {\n      badge.size = 'smallest';\n    }\n  }\n\n  if (state.color === 'colorful') {\n    const value = state.idForColor || state.name;\n    if (value) {\n      state.color = avatarColors[getHashCode(value) % avatarColors.length];\n    }\n  }\n\n  return state;\n};\n\n/**\n * Avatar treats shorthand for the image and badge props differently. Rather than the string being\n * the child of those slots, they translate to the image's src and the badge's status prop.\n */\nconst resolveAvatarShorthandPropsCompat = (props: AvatarProps) => {\n  let { image, badge } = props;\n\n  if (typeof image === 'string') {\n    image = { as: 'img', src: image, children: null };\n  }\n\n  if (typeof badge === 'string') {\n    badge = { as: PresenceBadge, status: badge };\n  }\n\n  if (image !== props.image || badge !== props.badge) {\n    props = { ...props, image, badge };\n  }\n\n  return resolveShorthandProps(props, avatarShorthandPropsCompat);\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"]}

package/lib-amd/components/Avatar/useAvatarStyles.d.ts

@@ -1,2 +0,0 @@
-import type { AvatarState } from './Avatar.types';
-export declare const useAvatarStyles: (state: AvatarState) => AvatarState;

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

@@ -1,416 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-make-styles"], function (require, exports, tslib_1, react_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useAvatarStyles = void 0;
-    //
-    // TODO: All animation constants should go to theme or globals?
-    // https://github.com/microsoft/fluentui/issues/16372#issuecomment-778240665
-    var animationDuration = {
-        duration50: '50ms',
-        duration100: '100ms',
-        duration150: '150ms',
-        duration200: '200ms',
-        duration300: '300ms',
-        duration400: '400ms',
-        duration500: '500ms',
-    };
-    var animationTiming = {
-        ultraFast: animationDuration.duration50,
-        faster: animationDuration.duration100,
-        fast: animationDuration.duration150,
-        normal: animationDuration.duration200,
-        slow: animationDuration.duration300,
-        slower: animationDuration.duration400,
-        ultraSlow: animationDuration.duration500,
-    };
-    var animationLines = {
-        decelerateMax: 'cubic-bezier(0.00,0.00,0.00,1.00)',
-        decelerateMid: 'cubic-bezier(0.10,0.90,0.20,1.00)',
-        decelerateMin: 'cubic-bezier(0.33,0.00,0.10,1.00)',
-        accelerateMax: 'cubic-bezier(1.00,0.00,1.00,1.00)',
-        accelerateMid: 'cubic-bezier(0.90,0.10,1.00,0.20)',
-        accelerateMin: 'cubic-bezier(0.80,0.00,0.78,1.00)',
-        maxEasyEase: 'cubic-bezier(0.80,0.00,0.20,1.00)',
-        easyEase: 'cubic-bezier(0.33,0.00,0.67,1.00)',
-        linear: 'linear',
-    };
-    var animations = {
-        fastOutSlowInMax: animationLines.decelerateMax,
-        fastOutSlowInMid: animationLines.decelerateMid,
-        fastOutSlowInMin: animationLines.decelerateMin,
-        slowOutFastInMax: animationLines.accelerateMax,
-        slowOutFastInMid: animationLines.accelerateMid,
-        slowOutFastInMin: animationLines.accelerateMin,
-        fastEase: animationLines.maxEasyEase,
-        normalEase: animationLines.easyEase,
-        nullEasing: animationLines.linear,
-    };
-    var useStyles = react_make_styles_1.makeStyles({
-        root: function (theme) { return ({
-            display: 'inline-block',
-            flexShrink: 0,
-            position: 'relative',
-            verticalAlign: 'middle',
-            borderRadius: theme.global.borderRadius.circular,
-            fontFamily: theme.global.type.fontFamilies.base,
-            fontWeight: theme.global.type.fontWeights.semibold,
-            boxShadow: "0 0 0 " + theme.global.strokeWidth.thin + " " + theme.alias.color.neutral.transparentStroke + " inset",
-        }); },
-        textCaption2: function (theme) { return ({
-            fontSize: theme.global.type.fontSizes.base[100],
-            fontWeight: theme.global.type.fontWeights.regular,
-        }); },
-        textCaption1Strong: function (theme) { return ({ fontSize: theme.global.type.fontSizes.base[200] }); },
-        textBody1Strong: function (theme) { return ({ fontSize: theme.global.type.fontSizes.base[300] }); },
-        textSubtitle2: function (theme) { return ({ fontSize: theme.global.type.fontSizes.base[400] }); },
-        textSubtitle1: function (theme) { return ({ fontSize: theme.global.type.fontSizes.base[500] }); },
-        textTitle: function (theme) { return ({ fontSize: theme.global.type.fontSizes.base[600] }); },
-        squareSmall: function (theme) { return ({ borderRadius: theme.global.borderRadius.small }); },
-        squareMedium: function (theme) { return ({ borderRadius: theme.global.borderRadius.medium }); },
-        squareLarge: function (theme) { return ({ borderRadius: theme.global.borderRadius.large }); },
-        squareXLarge: function (theme) { return ({ borderRadius: theme.global.borderRadius.xLarge }); },
-        activeOrInactive: {
-            transform: 'perspective(1px)',
-            transition: "transform " + animationTiming.ultraSlow + " " + animations.fastEase + ", " +
-                ("opacity " + animationTiming.faster + " " + animations.nullEasing),
-            ':before': {
-                content: '""',
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                borderRadius: 'inherit',
-                transition: "margin " + animationTiming.ultraSlow + " " + animations.fastEase + ", " +
-                    ("opacity " + animationTiming.slower + " " + animations.nullEasing),
-            },
-        },
-        ring: function (theme) { return ({
-            ':before': {
-                borderColor: theme.alias.color.neutral.brandBackgroundStatic,
-                borderStyle: 'solid',
-            },
-        }); },
-        ringThick: function (theme) { return ({
-            ':before': {
-                margin: "calc(-2 * " + theme.global.strokeWidth.thick + ")",
-                borderWidth: theme.global.strokeWidth.thick,
-            },
-        }); },
-        ringThicker: function (theme) { return ({
-            ':before': {
-                margin: "calc(-2 * " + theme.global.strokeWidth.thicker + ")",
-                borderWidth: theme.global.strokeWidth.thicker,
-            },
-        }); },
-        ringThickest: function (theme) { return ({
-            ':before': {
-                margin: "calc(-2 * " + theme.global.strokeWidth.thickest + ")",
-                borderWidth: theme.global.strokeWidth.thickest,
-            },
-        }); },
-        shadow4: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow4 } }); },
-        shadow8: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow8 } }); },
-        shadow16: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow16 } }); },
-        shadow28: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow28 } }); },
-        // TODO: use proper tokens instead of "rgba(0,120,212,0.3)"
-        glow4: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow4 + ", 0 0 4px 2px rgba(0,120,212,0.3)" } }); },
-        glow8: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow8 + ", 0 0 8px 2px rgba(0,120,212,0.3)" } }); },
-        glow16: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow16 + ", 0 0 8px 2px rgba(0,120,212,0.3)" } }); },
-        glow28: function (theme) { return ({ ':before': { boxShadow: theme.alias.shadow.shadow28 + ", 0 0 28px 4px rgba(0,120,212,0.3)" } }); },
-        inactive: {
-            opacity: '0.8',
-            transform: 'scale(0.875)',
-            transition: "transform " + animationTiming.ultraSlow + " " + animations.fastOutSlowInMin + ", " +
-                ("opacity " + animationTiming.faster + " " + animations.nullEasing),
-            ':before': {
-                margin: 0,
-                opacity: 0,
-                transition: "margin " + animationTiming.ultraSlow + " " + animations.fastOutSlowInMin + ", " +
-                    ("opacity " + animationTiming.slower + " " + animations.nullEasing),
-            },
-        },
-        badge: function (theme) { return ({
-            position: 'absolute',
-            bottom: 0,
-            right: 0,
-            boxShadow: "0 0 0 " + theme.global.strokeWidth.thin + " " + theme.alias.color.neutral.neutralBackground1,
-        }); },
-        badgeLarge: function (theme) { return ({
-            boxShadow: "0 0 0 " + theme.global.strokeWidth.thick + " " + theme.alias.color.neutral.neutralBackground1,
-        }); },
-        image: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            borderRadius: 'inherit',
-            objectFit: 'cover',
-            verticalAlign: 'top',
-        },
-        iconLabel: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            lineHeight: 1,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            verticalAlign: 'center',
-            textAlign: 'center',
-            borderRadius: 'inherit',
-        },
-    });
-    var useSizeStyles = react_make_styles_1.makeStyles({
-        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_make_styles_1.makeStyles({
-        neutral: function (theme) { return ({
-            color: theme.alias.color.neutral.neutralForeground3,
-            background: theme.alias.color.neutral.neutralBackground6,
-        }); },
-        brand: function (theme) { return ({
-            color: theme.alias.color.neutral.neutralForegroundInverted,
-            background: theme.alias.color.neutral.brandBackgroundStatic,
-        }); },
-        darkRed: function (theme) { return ({
-            color: theme.alias.color.darkRed.foreground2,
-            background: theme.alias.color.darkRed.background2,
-        }); },
-        cranberry: function (theme) { return ({
-            color: theme.alias.color.cranberry.foreground2,
-            background: theme.alias.color.cranberry.background2,
-        }); },
-        red: function (theme) { return ({
-            color: theme.alias.color.red.foreground2,
-            background: theme.alias.color.red.background2,
-        }); },
-        pumpkin: function (theme) { return ({
-            color: theme.alias.color.pumpkin.foreground2,
-            background: theme.alias.color.pumpkin.background2,
-        }); },
-        peach: function (theme) { return ({
-            color: theme.alias.color.peach.foreground2,
-            background: theme.alias.color.peach.background2,
-        }); },
-        marigold: function (theme) { return ({
-            color: theme.alias.color.marigold.foreground2,
-            background: theme.alias.color.marigold.background2,
-        }); },
-        gold: function (theme) { return ({
-            color: theme.alias.color.gold.foreground2,
-            background: theme.alias.color.gold.background2,
-        }); },
-        brass: function (theme) { return ({
-            color: theme.alias.color.brass.foreground2,
-            background: theme.alias.color.brass.background2,
-        }); },
-        brown: function (theme) { return ({
-            color: theme.alias.color.brown.foreground2,
-            background: theme.alias.color.brown.background2,
-        }); },
-        forest: function (theme) { return ({
-            color: theme.alias.color.forest.foreground2,
-            background: theme.alias.color.forest.background2,
-        }); },
-        seafoam: function (theme) { return ({
-            color: theme.alias.color.seafoam.foreground2,
-            background: theme.alias.color.seafoam.background2,
-        }); },
-        darkGreen: function (theme) { return ({
-            color: theme.alias.color.darkGreen.foreground2,
-            background: theme.alias.color.darkGreen.background2,
-        }); },
-        lightTeal: function (theme) { return ({
-            color: theme.alias.color.lightTeal.foreground2,
-            background: theme.alias.color.lightTeal.background2,
-        }); },
-        teal: function (theme) { return ({
-            color: theme.alias.color.teal.foreground2,
-            background: theme.alias.color.teal.background2,
-        }); },
-        steel: function (theme) { return ({
-            color: theme.alias.color.steel.foreground2,
-            background: theme.alias.color.steel.background2,
-        }); },
-        blue: function (theme) { return ({
-            color: theme.alias.color.blue.foreground2,
-            background: theme.alias.color.blue.background2,
-        }); },
-        royalBlue: function (theme) { return ({
-            color: theme.alias.color.royalBlue.foreground2,
-            background: theme.alias.color.royalBlue.background2,
-        }); },
-        cornflower: function (theme) { return ({
-            color: theme.alias.color.cornflower.foreground2,
-            background: theme.alias.color.cornflower.background2,
-        }); },
-        navy: function (theme) { return ({
-            color: theme.alias.color.navy.foreground2,
-            background: theme.alias.color.navy.background2,
-        }); },
-        lavender: function (theme) { return ({
-            color: theme.alias.color.lavender.foreground2,
-            background: theme.alias.color.lavender.background2,
-        }); },
-        purple: function (theme) { return ({
-            color: theme.alias.color.purple.foreground2,
-            background: theme.alias.color.purple.background2,
-        }); },
-        grape: function (theme) { return ({
-            color: theme.alias.color.grape.foreground2,
-            background: theme.alias.color.grape.background2,
-        }); },
-        lilac: function (theme) { return ({
-            color: theme.alias.color.lilac.foreground2,
-            background: theme.alias.color.lilac.background2,
-        }); },
-        pink: function (theme) { return ({
-            color: theme.alias.color.pink.foreground2,
-            background: theme.alias.color.pink.background2,
-        }); },
-        magenta: function (theme) { return ({
-            color: theme.alias.color.magenta.foreground2,
-            background: theme.alias.color.magenta.background2,
-        }); },
-        plum: function (theme) { return ({
-            color: theme.alias.color.plum.foreground2,
-            background: theme.alias.color.plum.background2,
-        }); },
-        beige: function (theme) { return ({
-            color: theme.alias.color.beige.foreground2,
-            background: theme.alias.color.beige.background2,
-        }); },
-        mink: function (theme) { return ({
-            color: theme.alias.color.mink.foreground2,
-            background: theme.alias.color.mink.background2,
-        }); },
-        platinum: function (theme) { return ({
-            color: theme.alias.color.platinum.foreground2,
-            background: theme.alias.color.platinum.background2,
-        }); },
-        anchor: function (theme) { return ({
-            color: theme.alias.color.anchor.foreground2,
-            background: theme.alias.color.anchor.background2,
-        }); },
-    });
-    var useAvatarStyles = function (state) {
-        var size = state.size, square = state.square, active = state.active, activeDisplay = state.activeDisplay;
-        // 'colorful' should have been replaced with a color name by useAvatar, but if not default to darkRed
-        var color = state.color === 'colorful' ? 'darkRed' : state.color;
-        var styles = useStyles();
-        var sizeStyles = useSizeStyles();
-        var colorStyles = useColorStyles();
-        var rootClasses = [styles.root, sizeStyles[size], colorStyles[color]];
-        if (size <= 24) {
-            rootClasses.push(styles.textCaption2);
-        }
-        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 (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 (activeDisplay.includes('ring')) {
-                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 (activeDisplay.includes('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);
-                }
-            }
-            if (activeDisplay.includes('glow')) {
-                if (size <= 28) {
-                    rootClasses.push(styles.glow4);
-                }
-                else if (size <= 48) {
-                    rootClasses.push(styles.glow8);
-                }
-                else if (size <= 64) {
-                    rootClasses.push(styles.glow16);
-                }
-                else {
-                    rootClasses.push(styles.glow28);
-                }
-            }
-            // Note: The inactive style overrides some of the activeDisplay styles and must be applied after them
-            if (active === 'inactive') {
-                rootClasses.push(styles.inactive);
-            }
-        }
-        state.className = react_make_styles_1.mergeClasses.apply(void 0, tslib_1.__spreadArrays(rootClasses, [state.className]));
-        if (state.badge) {
-            state.badge.className = react_make_styles_1.mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
-        }
-        if (state.image) {
-            state.image.className = react_make_styles_1.mergeClasses(styles.image, state.image.className);
-        }
-        if (state.label) {
-            state.label.className = react_make_styles_1.mergeClasses(styles.iconLabel, state.label.className);
-        }
-        if (state.icon) {
-            state.icon.className = react_make_styles_1.mergeClasses(styles.iconLabel, state.icon.className);
-        }
-        return state;
-    };
-    exports.useAvatarStyles = useAvatarStyles;
-});
-//# sourceMappingURL=useAvatarStyles.js.map