first commit

node_modules/@fluentui/react/lib/components/Persona/Persona.base.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPersonaProps } from './Persona.types';
+/**
+ * Persona with no default styles.
+ * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export declare const PersonaBase: React.FunctionComponent<IPersonaProps>;

node_modules/@fluentui/react/lib/components/Persona/Persona.base.js

@@ -0,0 +1,113 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, divProperties, getNativeProps, getPropsWithDefaults } from '../../Utilities';
+import { TooltipHost, TooltipOverflowMode } from '../../Tooltip';
+import { PersonaCoin } from './PersonaCoin/PersonaCoin';
+import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';
+import { useWarnings, useMergedRefs } from '@fluentui/react-hooks';
+import { DirectionalHint } from '../../common/DirectionalHint';
+var getClassNames = classNamesFunction();
+var DEFAULT_PROPS = {
+    size: PersonaSize.size48,
+    presence: PersonaPresenceEnum.none,
+    imageAlt: '',
+    showOverflowTooltip: true,
+};
+function useDebugWarnings(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
+        useWarnings({
+            name: 'Persona',
+            props: props,
+            deprecations: { primaryText: 'text' },
+        });
+    }
+}
+/**
+ * Persona with no default styles.
+ * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export var PersonaBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {
+    var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
+    useDebugWarnings(props);
+    var rootRef = React.useRef(null);
+    var mergedRootRef = useMergedRefs(forwardedRef, rootRef);
+    /**
+     * Deprecation helper for getting text.
+     */
+    var getText = function () {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        return props.text || props.primaryText || '';
+    };
+    /**
+     * Renders various types of Text (primaryText, secondaryText, etc)
+     * based on the classNames passed
+     * @param elementClassNames - element className
+     * @param renderFunction - render function
+     * @param defaultRenderFunction - default render function
+     */
+    var renderElement = function (elementClassNames, renderFunction, defaultRenderFunction) {
+        var content = renderFunction && renderFunction(props, defaultRenderFunction);
+        return content ? (React.createElement("div", { dir: "auto", className: elementClassNames }, content)) : undefined;
+    };
+    /**
+     * using closure to wrap the default render behavior
+     * to make it independent of the type of text passed
+     * @param text - text to render
+     */
+    var onRenderText = function (text, tooltip) {
+        if (tooltip === void 0) { tooltip = true; }
+        // return default render behavior for valid text or undefined
+        return text
+            ? tooltip
+                ? function () {
+                    // default onRender behavior
+                    return (React.createElement(TooltipHost, { content: text, overflowMode: TooltipOverflowMode.Parent, directionalHint: DirectionalHint.topLeftEdge }, text));
+                }
+                : function () { return React.createElement(React.Fragment, null, text); }
+            : undefined;
+    };
+    var onInternalRenderPersonaCoin = function (providedCoinProps) {
+        return React.createElement(PersonaCoin, __assign({}, providedCoinProps));
+    };
+    // wrapping default render behavior based on various props properties
+    var onInternalRenderPrimaryText = onRenderText(getText(), props.showOverflowTooltip);
+    var onInternalRenderSecondaryText = onRenderText(props.secondaryText, props.showOverflowTooltip);
+    var onInternalRenderTertiaryText = onRenderText(props.tertiaryText, props.showOverflowTooltip);
+    var onInternalRenderOptionalText = onRenderText(props.optionalText, props.showOverflowTooltip);
+    var hidePersonaDetails = props.hidePersonaDetails, _a = props.onRenderOptionalText, onRenderOptionalText = _a === void 0 ? onInternalRenderOptionalText : _a, _b = props.onRenderPrimaryText, onRenderPrimaryText = _b === void 0 ? onInternalRenderPrimaryText : _b, _c = props.onRenderSecondaryText, onRenderSecondaryText = _c === void 0 ? onInternalRenderSecondaryText : _c, _d = props.onRenderTertiaryText, onRenderTertiaryText = _d === void 0 ? onInternalRenderTertiaryText : _d, _e = props.onRenderPersonaCoin, onRenderPersonaCoin = _e === void 0 ? onInternalRenderPersonaCoin : _e;
+    var size = props.size;
+    // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
+    var allowPhoneInitials = props.allowPhoneInitials, className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageAlt = props.imageAlt, imageInitials = props.imageInitials, imageShouldFadeIn = props.imageShouldFadeIn, imageShouldStartVisible = props.imageShouldStartVisible, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, onPhotoLoadingStateChange = props.onPhotoLoadingStateChange, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    onRenderCoin = props.onRenderCoin, onRenderInitials = props.onRenderInitials, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, showSecondaryText = props.showSecondaryText, theme = props.theme;
+    var personaCoinProps = __assign({ allowPhoneInitials: allowPhoneInitials, showUnknownPersonaCoin: showUnknownPersonaCoin, coinSize: coinSize, imageAlt: imageAlt, imageInitials: imageInitials, imageShouldFadeIn: imageShouldFadeIn, imageShouldStartVisible: imageShouldStartVisible, imageUrl: imageUrl, initialsColor: initialsColor, initialsTextColor: initialsTextColor, onPhotoLoadingStateChange: onPhotoLoadingStateChange, 
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        onRenderCoin: onRenderCoin, onRenderInitials: onRenderInitials, presence: presence, presenceTitle: presenceTitle, showInitialsUntilImageLoads: showInitialsUntilImageLoads, size: size, text: getText(), isOutOfOffice: isOutOfOffice, presenceColors: presenceColors }, coinProps);
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        className: className,
+        showSecondaryText: showSecondaryText,
+        presence: presence,
+        size: size,
+    });
+    var divProps = getNativeProps(props, divProperties);
+    var personaDetails = (React.createElement("div", { className: classNames.details },
+        renderElement(classNames.primaryText, onRenderPrimaryText, onInternalRenderPrimaryText),
+        renderElement(classNames.secondaryText, onRenderSecondaryText, onInternalRenderSecondaryText),
+        renderElement(classNames.tertiaryText, onRenderTertiaryText, onInternalRenderTertiaryText),
+        renderElement(classNames.optionalText, onRenderOptionalText, onInternalRenderOptionalText),
+        props.children));
+    return (React.createElement("div", __assign({}, divProps, { ref: mergedRootRef, className: classNames.root, style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),
+        onRenderPersonaCoin(personaCoinProps, onRenderPersonaCoin),
+        /* eslint-disable @typescript-eslint/no-deprecated */
+        (!hidePersonaDetails ||
+            size === PersonaSize.size8 ||
+            size === PersonaSize.size10 ||
+            size === PersonaSize.tiny) &&
+            personaDetails
+    /* eslint-enable @typescript-eslint/no-deprecated */
+    ));
+});
+PersonaBase.displayName = 'PersonaBase';
+//# sourceMappingURL=Persona.base.js.map

node_modules/@fluentui/react/lib/components/Persona/Persona.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPersonaProps } from './Persona.types';
+/**
+ * Personas are used for rendering an individual's avatar, presence and details.
+ * They are used within the PeoplePicker components.
+ */
+export declare const Persona: React.FunctionComponent<IPersonaProps>;

node_modules/@fluentui/react/lib/components/Persona/Persona.js

@@ -0,0 +1,11 @@
+import { styled } from '../../Utilities';
+import { PersonaBase } from './Persona.base';
+import { getStyles } from './Persona.styles';
+/**
+ * Personas are used for rendering an individual's avatar, presence and details.
+ * They are used within the PeoplePicker components.
+ */
+export var Persona = styled(PersonaBase, getStyles, undefined, {
+    scope: 'Persona',
+});
+//# sourceMappingURL=Persona.js.map

node_modules/@fluentui/react/lib/components/Persona/Persona.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Persona.js","sourceRoot":"../src/","sources":["components/Persona/Persona.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C;;;GAGG;AACH,MAAM,CAAC,IAAM,OAAO,GAA2C,MAAM,CAInE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE;IACnC,KAAK,EAAE,SAAS;CACjB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { PersonaBase } from './Persona.base';\nimport { getStyles } from './Persona.styles';\nimport type { IPersonaProps, IPersonaStyleProps, IPersonaStyles } from './Persona.types';\n\n/**\n * Personas are used for rendering an individual's avatar, presence and details.\n * They are used within the PeoplePicker components.\n */\nexport const Persona: React.FunctionComponent<IPersonaProps> = styled<\n  IPersonaProps,\n  IPersonaStyleProps,\n  IPersonaStyles\n>(PersonaBase, getStyles, undefined, {\n  scope: 'Persona',\n});\n"]}

node_modules/@fluentui/react/lib/components/Persona/Persona.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPersonaStyleProps, IPersonaStyles } from './Persona.types';
+export declare const getStyles: (props: IPersonaStyleProps) => IPersonaStyles;

node_modules/@fluentui/react/lib/components/Persona/Persona.styles.js

@@ -0,0 +1,270 @@
+import { FontWeights, normalize, noWrap, getGlobalClassNames } from '../../Styling';
+import { personaSize, presenceBoolean, sizeBoolean } from './PersonaConsts';
+var GlobalClassNames = {
+    root: 'ms-Persona',
+    size8: 'ms-Persona--size8',
+    size10: 'ms-Persona--size10',
+    size16: 'ms-Persona--size16',
+    size24: 'ms-Persona--size24',
+    size28: 'ms-Persona--size28',
+    size32: 'ms-Persona--size32',
+    size40: 'ms-Persona--size40',
+    size48: 'ms-Persona--size48',
+    size56: 'ms-Persona--size56',
+    size72: 'ms-Persona--size72',
+    size100: 'ms-Persona--size100',
+    size120: 'ms-Persona--size120',
+    available: 'ms-Persona--online',
+    away: 'ms-Persona--away',
+    blocked: 'ms-Persona--blocked',
+    busy: 'ms-Persona--busy',
+    doNotDisturb: 'ms-Persona--donotdisturb',
+    offline: 'ms-Persona--offline',
+    details: 'ms-Persona-details',
+    primaryText: 'ms-Persona-primaryText',
+    secondaryText: 'ms-Persona-secondaryText',
+    tertiaryText: 'ms-Persona-tertiaryText',
+    optionalText: 'ms-Persona-optionalText',
+    textContent: 'ms-Persona-textContent',
+};
+export var getStyles = function (props) {
+    var className = props.className, showSecondaryText = props.showSecondaryText, theme = props.theme;
+    var semanticColors = theme.semanticColors, fonts = theme.fonts;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    var size = sizeBoolean(props.size);
+    var presence = presenceBoolean(props.presence);
+    var showSecondaryTextDefaultHeight = '16px';
+    var sharedTextStyles = {
+        color: semanticColors.bodySubtext,
+        fontWeight: FontWeights.regular,
+        fontSize: fonts.small.fontSize,
+    };
+    return {
+        root: [
+            classNames.root,
+            theme.fonts.medium,
+            normalize,
+            {
+                color: semanticColors.bodyText,
+                position: 'relative',
+                height: personaSize.size48,
+                minWidth: personaSize.size48,
+                display: 'flex',
+                alignItems: 'center',
+                selectors: {
+                    '.contextualHost': {
+                        display: 'none',
+                    },
+                },
+            },
+            size.isSize8 && [
+                classNames.size8,
+                {
+                    height: personaSize.size8,
+                    minWidth: personaSize.size8,
+                },
+            ],
+            // TODO: Deprecated size and needs to be removed in a future major release.
+            size.isSize10 && [
+                classNames.size10,
+                {
+                    height: personaSize.size10,
+                    minWidth: personaSize.size10,
+                },
+            ],
+            // TODO: Deprecated size and needs to be removed in a future major release.
+            size.isSize16 && [
+                classNames.size16,
+                {
+                    height: personaSize.size16,
+                    minWidth: personaSize.size16,
+                },
+            ],
+            size.isSize24 && [
+                classNames.size24,
+                {
+                    height: personaSize.size24,
+                    minWidth: personaSize.size24,
+                },
+            ],
+            size.isSize24 &&
+                showSecondaryText && {
+                height: '36px',
+            },
+            // TODO: Deprecated size and needs to be removed in a future major release.
+            size.isSize28 && [
+                classNames.size28,
+                {
+                    height: personaSize.size28,
+                    minWidth: personaSize.size28,
+                },
+            ],
+            size.isSize28 &&
+                showSecondaryText && {
+                height: '32px',
+            },
+            size.isSize32 && [
+                classNames.size32,
+                {
+                    height: personaSize.size32,
+                    minWidth: personaSize.size32,
+                },
+            ],
+            size.isSize40 && [
+                classNames.size40,
+                {
+                    height: personaSize.size40,
+                    minWidth: personaSize.size40,
+                },
+            ],
+            size.isSize48 && classNames.size48,
+            size.isSize56 && [
+                classNames.size56,
+                {
+                    height: personaSize.size56,
+                    minWidth: personaSize.size56,
+                },
+            ],
+            size.isSize72 && [
+                classNames.size72,
+                {
+                    height: personaSize.size72,
+                    minWidth: personaSize.size72,
+                },
+            ],
+            size.isSize100 && [
+                classNames.size100,
+                {
+                    height: personaSize.size100,
+                    minWidth: personaSize.size100,
+                },
+            ],
+            size.isSize120 && [
+                classNames.size120,
+                {
+                    height: personaSize.size120,
+                    minWidth: personaSize.size120,
+                },
+            ],
+            /**
+             * Modifiers: presence
+             */
+            presence.isAvailable && classNames.available,
+            presence.isAway && classNames.away,
+            presence.isBlocked && classNames.blocked,
+            presence.isBusy && classNames.busy,
+            presence.isDoNotDisturb && classNames.doNotDisturb,
+            presence.isOffline && classNames.offline,
+            className,
+        ],
+        details: [
+            classNames.details,
+            {
+                padding: '0 24px 0 16px',
+                minWidth: 0,
+                width: '100%',
+                textAlign: 'left',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-around',
+            },
+            (size.isSize8 || size.isSize10) && {
+                paddingLeft: 17, // increased padding because we don't render a coin at this size
+            },
+            (size.isSize24 || size.isSize28 || size.isSize32) && {
+                padding: '0 8px',
+            },
+            (size.isSize40 || size.isSize48) && {
+                padding: '0 12px',
+            },
+        ],
+        primaryText: [
+            classNames.primaryText,
+            noWrap,
+            {
+                color: semanticColors.bodyText,
+                fontWeight: FontWeights.regular,
+                fontSize: fonts.medium.fontSize,
+                selectors: {
+                    ':hover': {
+                        color: semanticColors.inputTextHovered,
+                    },
+                },
+            },
+            showSecondaryText && {
+                height: showSecondaryTextDefaultHeight,
+                lineHeight: showSecondaryTextDefaultHeight,
+                overflowX: 'hidden',
+            },
+            (size.isSize8 || size.isSize10) && {
+                fontSize: fonts.small.fontSize,
+                lineHeight: personaSize.size8,
+            },
+            size.isSize16 && {
+                lineHeight: personaSize.size28,
+            },
+            (size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40 || size.isSize48) &&
+                showSecondaryText && {
+                height: 18,
+            },
+            (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {
+                fontSize: fonts.xLarge.fontSize,
+            },
+            (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&
+                showSecondaryText && {
+                height: 22,
+            },
+        ],
+        secondaryText: [
+            classNames.secondaryText,
+            noWrap,
+            sharedTextStyles,
+            (size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && {
+                display: 'none',
+            },
+            showSecondaryText && {
+                display: 'block',
+                height: showSecondaryTextDefaultHeight,
+                lineHeight: showSecondaryTextDefaultHeight,
+                overflowX: 'hidden',
+            },
+            size.isSize24 &&
+                showSecondaryText && {
+                height: 18,
+            },
+            (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {
+                fontSize: fonts.medium.fontSize,
+            },
+            (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&
+                showSecondaryText && {
+                height: 18,
+            },
+        ],
+        tertiaryText: [
+            classNames.tertiaryText,
+            noWrap,
+            sharedTextStyles,
+            {
+                display: 'none',
+                fontSize: fonts.medium.fontSize,
+            },
+            (size.isSize72 || size.isSize100 || size.isSize120) && {
+                display: 'block',
+            },
+        ],
+        optionalText: [
+            classNames.optionalText,
+            noWrap,
+            sharedTextStyles,
+            {
+                display: 'none',
+                fontSize: fonts.medium.fontSize,
+            },
+            (size.isSize100 || size.isSize120) && {
+                display: 'block',
+            },
+        ],
+        textContent: [classNames.textContent, noWrap],
+    };
+};
+//# sourceMappingURL=Persona.styles.js.map

node_modules/@fluentui/react/lib/components/Persona/Persona.types.d.ts

@@ -0,0 +1,455 @@
+import * as React from 'react';
+import { ImageLoadState } from '../../Image';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IStyle, ITheme } from '../../Styling';
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersona {
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaSharedProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
+    /**
+     * Primary text to display, usually the name of the person.
+     */
+    text?: string;
+    /**
+     * Decides the size of the control.
+     * @defaultvalue PersonaSize.size48
+     */
+    size?: PersonaSize;
+    /**
+     * Optional custom renderer for the coin
+     * @deprecated Use `onRenderPersonaCoin` for custom rendering instead
+     */
+    onRenderCoin?: IRenderFunction<IPersonaSharedProps>;
+    /**
+     * Optional custom renderer for the coin
+     */
+    onRenderPersonaCoin?: IRenderFunction<IPersonaSharedProps>;
+    /**
+     * If true, adds the css class 'is-fadeIn' to the image.
+     */
+    imageShouldFadeIn?: boolean;
+    /**
+     * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
+     * it is successfully loaded. This disables imageShouldFadeIn.
+     * @defaultvalue false
+     */
+    imageShouldStartVisible?: boolean;
+    /**
+     * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.
+     */
+    imageUrl?: string;
+    /**
+     * Alt text for the image to use.
+     * @default `''` (empty string)
+     */
+    imageAlt?: string;
+    /**
+     * The user's initials to display in the image area when there is no image.
+     * @defaultvalue Derived from `text`
+     */
+    imageInitials?: string;
+    /**
+     * Whether initials are calculated for phone numbers and number sequences.
+     * Example: Set property to true to get initials for project names consisting of numbers only.
+     * @defaultvalue false
+     */
+    allowPhoneInitials?: boolean;
+    /**
+     * Optional custom renderer for the initials
+     */
+    onRenderInitials?: IRenderFunction<IPersonaSharedProps>;
+    /**
+     * Optional callback for when loading state of the photo changes
+     */
+    onPhotoLoadingStateChange?: (newImageLoadState: ImageLoadState) => void;
+    /**
+     * The background color when the user's initials are displayed.
+     * @defaultvalue Derived from `text`
+     */
+    initialsColor?: PersonaInitialsColor | string;
+    /**
+     * The text color when the user's initials are displayed
+     */
+    initialsTextColor?: string;
+    /** The colors to be used for the presence-icon and it's background */
+    presenceColors?: {
+        available: string;
+        away: string;
+        busy: string;
+        dnd: string;
+        offline: string;
+        oof: string;
+        background: string;
+    };
+    /**
+     * Presence of the person to display - will not display presence if undefined.
+     * @defaultvalue PersonaPresence.none
+     */
+    presence?: PersonaPresence;
+    /**
+     * Presence title to be shown as a tooltip on hover over the presence icon.
+     */
+    presenceTitle?: string;
+    /**
+     * This flag can be used to signal the persona is out of office.
+     * This will change the way the presence icon looks for statuses that support dual-presence.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Secondary text to display, usually the role of the user.
+     */
+    secondaryText?: string;
+    /**
+     * Controls whether clipped overflow text should render in a tooltip
+     * @defaultvalue true
+     */
+    showOverflowTooltip?: boolean;
+    /**
+     * Tertiary text to display, usually the status of the user.
+     * The tertiary text will only be shown when using size72 or size100.
+     */
+    tertiaryText?: string;
+    /**
+     * Optional text to display, usually a custom message set. The optional text will only be shown when using size100.
+     */
+    optionalText?: string;
+    /**
+     * Whether to not render persona details, and just render the persona image/initials.
+     */
+    hidePersonaDetails?: boolean;
+    showSecondaryText?: boolean;
+    /**
+     * If true, show the special coin for unknown persona.
+     * It has '?' in place of initials, with static font and background colors
+     */
+    showUnknownPersonaCoin?: boolean;
+    /**
+     * If true renders the initials while the image is loading.
+     * This only applies when an imageUrl is provided.
+     * @defaultvalue false
+     */
+    showInitialsUntilImageLoads?: boolean;
+    /**
+     * Optional custom persona coin size in pixel.
+     */
+    coinSize?: number;
+    /**
+     * Optional HTML element props for Persona coin.
+     */
+    coinProps?: IPersonaCoinProps;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Primary text to display, usually the name of the person.
+     * @deprecated Use `text` instead.
+     */
+    primaryText?: string;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaProps extends IPersonaSharedProps {
+    /**
+     * Optional callback to access the IPersona interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IPersona>;
+    /**
+     * Additional CSS class(es) to apply to the Persona
+     */
+    className?: string;
+    /**
+     * Call to provide customized styling that will layer on top of variant rules
+     */
+    styles?: IStyleFunctionOrObject<IPersonaStyleProps, IPersonaStyles>;
+    /**
+     * Optional custom renderer for the primary text.
+     */
+    onRenderPrimaryText?: IRenderFunction<IPersonaProps>;
+    /**
+     * Optional custom renderer for the secondary text.
+     */
+    onRenderSecondaryText?: IRenderFunction<IPersonaProps>;
+    /**
+     * Optional custom renderer for the tertiary text.
+     */
+    onRenderTertiaryText?: IRenderFunction<IPersonaProps>;
+    /**
+     * Optional custom renderer for the optional text.
+     */
+    onRenderOptionalText?: IRenderFunction<IPersonaProps>;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Custom class name.
+     */
+    className?: string;
+    /**
+     * Optional custom persona coin size in pixel.
+     */
+    coinSize?: number;
+    /**
+     * Decides the size of the control.
+     * @defaultvalue PersonaSize.size48
+     */
+    size?: PersonaSize;
+    /**
+     * Presence of the person to display - will not display presence if undefined.
+     * @defaultvalue PersonaPresence.none
+     */
+    presence?: PersonaPresence;
+    showSecondaryText?: boolean;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaStyles {
+    root: IStyle;
+    details: IStyle;
+    primaryText: IStyle;
+    secondaryText: IStyle;
+    tertiaryText: IStyle;
+    optionalText: IStyle;
+    textContent: IStyle;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaCoinProps extends IPersonaSharedProps {
+    /**
+     * Gets the component ref.
+     */
+    componentRef?: IRefObject<{}>;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: IStyleFunctionOrObject<IPersonaCoinStyleProps, IPersonaCoinStyles>;
+    /**
+     * Additional css class to apply to the PersonaCoin
+     * @defaultvalue undefined
+     */
+    className?: string;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaCoinStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Custom class name.
+     */
+    className?: string;
+    /**
+     * Decides the size of the control.
+     * @defaultvalue PersonaSize.size48
+     */
+    size?: PersonaSize;
+    /**
+     * Optional custom persona coin size in pixel.
+     */
+    coinSize?: number;
+    /**
+     * Decides whether to display coin for unknown persona
+     */
+    showUnknownPersonaCoin?: boolean;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaCoinStyles {
+    coin: IStyle;
+    imageArea: IStyle;
+    image: IStyle;
+    initials: IStyle;
+    size10WithoutPresenceIcon: IStyle;
+}
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaPresenceProps extends IPersonaSharedProps {
+    /**
+     * Gets the component ref.
+     */
+    componentRef?: IRefObject<{}>;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules
+     */
+    styles?: IStyleFunctionOrObject<IPersonaPresenceStyleProps, IPersonaPresenceStyles>;
+}
+/**
+ * {@docCategory Persona}
+ */
+export type IPersonaPresenceStyleProps = Required<Pick<IPersonaSharedProps, 'theme'>> & Pick<IPersonaSharedProps, 'presence' | 'isOutOfOffice' | 'size' | 'presenceColors'> & Pick<IPersonaProps, 'className'>;
+/**
+ * {@docCategory Persona}
+ */
+export interface IPersonaPresenceStyles {
+    presence: IStyle;
+    presenceIcon: IStyle;
+}
+/**
+ * {@docCategory Persona}
+ */
+export declare enum PersonaSize {
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size8` instead.
+     */
+    tiny = 0,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size24` instead.
+     */
+    extraExtraSmall = 1,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size32` instead.
+     */
+    extraSmall = 2,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size40` instead.
+     */
+    small = 3,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size48` instead.
+     */
+    regular = 4,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size72` instead.
+     */
+    large = 5,
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size100` instead.
+     */
+    extraLarge = 6,
+    /**
+     * No `PersonaCoin` is rendered.
+     */
+    size8 = 17,
+    /**
+     * No `PersonaCoin` is rendered. Deprecated to align with design specifications.
+     * @deprecated Use `size8` instead.
+     */
+    size10 = 9,
+    /**
+     * Renders a 16px `PersonaCoin`.
+     * @deprecated Deprecated due to not being in the design specification.
+     */
+    size16 = 8,
+    /**
+     * Renders a 24px `PersonaCoin`.
+     */
+    size24 = 10,
+    /**
+     * Renders a 28px `PersonaCoin`.
+     * @deprecated Deprecated due to not being in the design specification.
+     */
+    size28 = 7,
+    /**
+     * Renders a 32px `PersonaCoin`.
+     */
+    size32 = 11,
+    /**
+     * Renders a 40px `PersonaCoin`.
+     */
+    size40 = 12,
+    /**
+     * Renders a 48px `PersonaCoin`.
+     */
+    size48 = 13,
+    /**
+     * Renders a 56px `PersonaCoin`.
+     */
+    size56 = 16,
+    /**
+     * Renders a 72px `PersonaCoin`.
+     */
+    size72 = 14,
+    /**
+     * Renders a 100px `PersonaCoin`.
+     */
+    size100 = 15,
+    /**
+     * Renders a 120px `PersonaCoin`.
+     */
+    size120 = 18
+}
+/**
+ * {@docCategory Persona}
+ */
+export declare enum PersonaPresence {
+    none = 0,
+    offline = 1,
+    online = 2,
+    away = 3,
+    dnd = 4,
+    blocked = 5,
+    busy = 6
+}
+/**
+ * {@docCategory Persona}
+ */
+export declare enum PersonaInitialsColor {
+    lightBlue = 0,
+    blue = 1,
+    darkBlue = 2,
+    teal = 3,
+    lightGreen = 4,
+    green = 5,
+    darkGreen = 6,
+    lightPink = 7,
+    pink = 8,
+    magenta = 9,
+    purple = 10,
+    /**
+     * @deprecated `black` is a color that can result in offensive persona coins with some initials combinations,
+     * so it can only be set with overrides. Will be removed in a future major release.
+     */
+    black = 11,
+    orange = 12,
+    /**
+     * @deprecated `red` is a color that often has a special meaning, so it is considered a reserved color and
+     * can only be set with overrides. Will be removed in a future major release.
+     */
+    red = 13,
+    darkRed = 14,
+    /**
+     * Transparent is not intended to be used with typical initials due to accessibility issues.
+     * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.
+     */
+    transparent = 15,
+    violet = 16,
+    lightRed = 17,
+    gold = 18,
+    burgundy = 19,
+    warmGray = 20,
+    coolGray = 21,
+    /**
+     * `gray` is a color that can result in offensive persona coins with some initials combinations,
+     * so it can only be set with overrides.
+     */
+    gray = 22,
+    cyan = 23,
+    rust = 24
+}

node_modules/@fluentui/react/lib/components/Persona/Persona.types.js

@@ -0,0 +1,153 @@
+/**
+ * {@docCategory Persona}
+ */
+export var PersonaSize;
+(function (PersonaSize) {
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size8` instead.
+     */
+    PersonaSize[PersonaSize["tiny"] = 0] = "tiny";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size24` instead.
+     */
+    PersonaSize[PersonaSize["extraExtraSmall"] = 1] = "extraExtraSmall";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size32` instead.
+     */
+    PersonaSize[PersonaSize["extraSmall"] = 2] = "extraSmall";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size40` instead.
+     */
+    PersonaSize[PersonaSize["small"] = 3] = "small";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size48` instead.
+     */
+    PersonaSize[PersonaSize["regular"] = 4] = "regular";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size72` instead.
+     */
+    PersonaSize[PersonaSize["large"] = 5] = "large";
+    /**
+     * Deprecated in favor of standardized numeric sizing.
+     * @deprecated Use `size100` instead.
+     */
+    PersonaSize[PersonaSize["extraLarge"] = 6] = "extraLarge";
+    /**
+     * No `PersonaCoin` is rendered.
+     */
+    PersonaSize[PersonaSize["size8"] = 17] = "size8";
+    /**
+     * No `PersonaCoin` is rendered. Deprecated to align with design specifications.
+     * @deprecated Use `size8` instead.
+     */
+    PersonaSize[PersonaSize["size10"] = 9] = "size10";
+    /**
+     * Renders a 16px `PersonaCoin`.
+     * @deprecated Deprecated due to not being in the design specification.
+     */
+    PersonaSize[PersonaSize["size16"] = 8] = "size16";
+    /**
+     * Renders a 24px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size24"] = 10] = "size24";
+    /**
+     * Renders a 28px `PersonaCoin`.
+     * @deprecated Deprecated due to not being in the design specification.
+     */
+    PersonaSize[PersonaSize["size28"] = 7] = "size28";
+    /**
+     * Renders a 32px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size32"] = 11] = "size32";
+    /**
+     * Renders a 40px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size40"] = 12] = "size40";
+    /**
+     * Renders a 48px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size48"] = 13] = "size48";
+    /**
+     * Renders a 56px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size56"] = 16] = "size56";
+    /**
+     * Renders a 72px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size72"] = 14] = "size72";
+    /**
+     * Renders a 100px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size100"] = 15] = "size100";
+    /**
+     * Renders a 120px `PersonaCoin`.
+     */
+    PersonaSize[PersonaSize["size120"] = 18] = "size120";
+})(PersonaSize || (PersonaSize = {}));
+/**
+ * {@docCategory Persona}
+ */
+export var PersonaPresence;
+(function (PersonaPresence) {
+    PersonaPresence[PersonaPresence["none"] = 0] = "none";
+    PersonaPresence[PersonaPresence["offline"] = 1] = "offline";
+    PersonaPresence[PersonaPresence["online"] = 2] = "online";
+    PersonaPresence[PersonaPresence["away"] = 3] = "away";
+    PersonaPresence[PersonaPresence["dnd"] = 4] = "dnd";
+    PersonaPresence[PersonaPresence["blocked"] = 5] = "blocked";
+    PersonaPresence[PersonaPresence["busy"] = 6] = "busy";
+})(PersonaPresence || (PersonaPresence = {}));
+/**
+ * {@docCategory Persona}
+ */
+export var PersonaInitialsColor;
+(function (PersonaInitialsColor) {
+    PersonaInitialsColor[PersonaInitialsColor["lightBlue"] = 0] = "lightBlue";
+    PersonaInitialsColor[PersonaInitialsColor["blue"] = 1] = "blue";
+    PersonaInitialsColor[PersonaInitialsColor["darkBlue"] = 2] = "darkBlue";
+    PersonaInitialsColor[PersonaInitialsColor["teal"] = 3] = "teal";
+    PersonaInitialsColor[PersonaInitialsColor["lightGreen"] = 4] = "lightGreen";
+    PersonaInitialsColor[PersonaInitialsColor["green"] = 5] = "green";
+    PersonaInitialsColor[PersonaInitialsColor["darkGreen"] = 6] = "darkGreen";
+    PersonaInitialsColor[PersonaInitialsColor["lightPink"] = 7] = "lightPink";
+    PersonaInitialsColor[PersonaInitialsColor["pink"] = 8] = "pink";
+    PersonaInitialsColor[PersonaInitialsColor["magenta"] = 9] = "magenta";
+    PersonaInitialsColor[PersonaInitialsColor["purple"] = 10] = "purple";
+    /**
+     * @deprecated `black` is a color that can result in offensive persona coins with some initials combinations,
+     * so it can only be set with overrides. Will be removed in a future major release.
+     */
+    PersonaInitialsColor[PersonaInitialsColor["black"] = 11] = "black";
+    PersonaInitialsColor[PersonaInitialsColor["orange"] = 12] = "orange";
+    /**
+     * @deprecated `red` is a color that often has a special meaning, so it is considered a reserved color and
+     * can only be set with overrides. Will be removed in a future major release.
+     */
+    PersonaInitialsColor[PersonaInitialsColor["red"] = 13] = "red";
+    PersonaInitialsColor[PersonaInitialsColor["darkRed"] = 14] = "darkRed";
+    /**
+     * Transparent is not intended to be used with typical initials due to accessibility issues.
+     * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.
+     */
+    PersonaInitialsColor[PersonaInitialsColor["transparent"] = 15] = "transparent";
+    PersonaInitialsColor[PersonaInitialsColor["violet"] = 16] = "violet";
+    PersonaInitialsColor[PersonaInitialsColor["lightRed"] = 17] = "lightRed";
+    PersonaInitialsColor[PersonaInitialsColor["gold"] = 18] = "gold";
+    PersonaInitialsColor[PersonaInitialsColor["burgundy"] = 19] = "burgundy";
+    PersonaInitialsColor[PersonaInitialsColor["warmGray"] = 20] = "warmGray";
+    PersonaInitialsColor[PersonaInitialsColor["coolGray"] = 21] = "coolGray";
+    /**
+     * `gray` is a color that can result in offensive persona coins with some initials combinations,
+     * so it can only be set with overrides.
+     */
+    PersonaInitialsColor[PersonaInitialsColor["gray"] = 22] = "gray";
+    PersonaInitialsColor[PersonaInitialsColor["cyan"] = 23] = "cyan";
+    PersonaInitialsColor[PersonaInitialsColor["rust"] = 24] = "rust";
+})(PersonaInitialsColor || (PersonaInitialsColor = {}));
+//# sourceMappingURL=Persona.types.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.base.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPersonaCoinProps } from '../Persona.types';
+/**
+ * PersonaCoin with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export declare const PersonaCoinBase: React.FunctionComponent<IPersonaCoinProps>;

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.base.js

@@ -0,0 +1,129 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, divProperties, memoizeFunction, getInitials, getNativeProps, getRTL, getPropsWithDefaults, } from '../../../Utilities';
+import { mergeStyles } from '../../../Styling';
+import { PersonaPresence } from '../PersonaPresence/index';
+import { Icon } from '../../../Icon';
+import { Image, ImageFit, ImageLoadState } from '../../../Image';
+import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types';
+import { getPersonaInitialsColor } from '../PersonaInitialsColor';
+import { sizeToPixels } from '../PersonaConsts';
+import { useWarnings } from '@fluentui/react-hooks';
+var getClassNames = classNamesFunction({
+    // There can be many PersonaCoin rendered with different sizes.
+    // Therefore setting a larger cache size.
+    cacheSize: 100,
+});
+var getInitialsStyles = memoizeFunction(function (className, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin) {
+    return mergeStyles(className, !showUnknownPersonaCoin && {
+        backgroundColor: getPersonaInitialsColor({ text: text, initialsColor: initialsColor, primaryText: primaryText }),
+        color: initialsTextColor,
+    });
+});
+var DEFAULT_PROPS = {
+    size: PersonaSize.size48,
+    presence: PersonaPresenceEnum.none,
+    imageAlt: '',
+};
+function useDebugWarnings(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
+        useWarnings({
+            name: 'PersonaCoin',
+            props: props,
+            deprecations: { primaryText: 'text' },
+        });
+    }
+}
+function useImageLoadState(_a) {
+    var onPhotoLoadingStateChange = _a.onPhotoLoadingStateChange, imageUrl = _a.imageUrl;
+    var _b = React.useState(ImageLoadState.notLoaded), imageLoadState = _b[0], setImageLoadstate = _b[1];
+    React.useEffect(function () {
+        setImageLoadstate(ImageLoadState.notLoaded);
+    }, [imageUrl]);
+    var onLoadingStateChange = function (loadState) {
+        setImageLoadstate(loadState);
+        onPhotoLoadingStateChange === null || onPhotoLoadingStateChange === void 0 ? void 0 : onPhotoLoadingStateChange(loadState);
+    };
+    return [imageLoadState, onLoadingStateChange];
+}
+/**
+ * PersonaCoin with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export var PersonaCoinBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {
+    var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
+    useDebugWarnings(props);
+    var _a = useImageLoadState(props), imageLoadState = _a[0], onLoadingStateChange = _a[1];
+    var renderCoin = getCoinRenderer(onLoadingStateChange);
+    var className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    _b = props.onRenderCoin, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    onRenderCoin = _b === void 0 ? renderCoin : _b, _c = props.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? onRenderCoin : _c, _d = props.onRenderInitials, onRenderInitials = _d === void 0 ? renderPersonaCoinInitials : _d, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    primaryText = props.primaryText, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, text = props.text, theme = props.theme, size = props.size;
+    var divProps = getNativeProps(props, divProperties);
+    var divCoinProps = getNativeProps(coinProps || {}, divProperties);
+    var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
+    var hideImage = showUnknownPersonaCoin;
+    var personaPresenceProps = {
+        coinSize: coinSize,
+        isOutOfOffice: isOutOfOffice,
+        presence: presence,
+        presenceTitle: presenceTitle,
+        presenceColors: presenceColors,
+        size: size,
+        theme: theme,
+    };
+    // Use getStyles from props, or fall back to getStyles from styles file.
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        className: coinProps && coinProps.className ? coinProps.className : className,
+        size: size,
+        coinSize: coinSize,
+        showUnknownPersonaCoin: showUnknownPersonaCoin,
+    });
+    var shouldRenderInitials = Boolean(imageLoadState !== ImageLoadState.loaded &&
+        ((showInitialsUntilImageLoads && imageUrl) || !imageUrl || imageLoadState === ImageLoadState.error || hideImage));
+    return (React.createElement("div", __assign({ role: "presentation" }, divProps, { className: classNames.coin, ref: forwardedRef }),
+        // Render PersonaCoin if size is not size8. size10 and tiny need to removed after a deprecation cleanup.
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        size !== PersonaSize.size8 && size !== PersonaSize.size10 && size !== PersonaSize.tiny ? (React.createElement("div", __assign({ role: "presentation" }, divCoinProps, { className: classNames.imageArea, style: coinSizeStyle }),
+            shouldRenderInitials && (React.createElement("div", { className: getInitialsStyles(classNames.initials, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin), style: coinSizeStyle, "aria-hidden": "true" }, onRenderInitials(props, renderPersonaCoinInitials))),
+            !hideImage && onRenderPersonaCoin(props, renderCoin),
+            React.createElement(PersonaPresence, __assign({}, personaPresenceProps)))) : // Otherwise, render just PersonaPresence.
+            props.presence ? (React.createElement(PersonaPresence, __assign({}, personaPresenceProps))) : (
+            // Just render Contact Icon if there isn't a Presence prop.
+            React.createElement(Icon, { iconName: "Contact", className: classNames.size10WithoutPresenceIcon })),
+        props.children));
+});
+PersonaCoinBase.displayName = 'PersonaCoinBase';
+var getCoinRenderer = function (onLoadingStateChange) {
+    return function (_a) {
+        var coinSize = _a.coinSize, styles = _a.styles, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible, theme = _a.theme, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, _b = _a.size, size = _b === void 0 ? DEFAULT_PROPS.size : _b;
+        // Render the Image component only if an image URL is provided
+        if (!imageUrl) {
+            return null;
+        }
+        var classNames = getClassNames(styles, {
+            theme: theme,
+            size: size,
+            showUnknownPersonaCoin: showUnknownPersonaCoin,
+        });
+        var dimension = coinSize || sizeToPixels[size];
+        return (React.createElement(Image, { className: classNames.image, imageFit: ImageFit.cover, src: imageUrl, width: dimension, height: dimension, alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: onLoadingStateChange }));
+    };
+};
+var renderPersonaCoinInitials = function (_a) {
+    var imageInitials = _a.imageInitials, allowPhoneInitials = _a.allowPhoneInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, text = _a.text, 
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    primaryText = _a.primaryText, theme = _a.theme;
+    if (showUnknownPersonaCoin) {
+        return React.createElement(Icon, { iconName: "Help" });
+    }
+    var isRTL = getRTL(theme);
+    imageInitials = imageInitials || getInitials(text || primaryText || '', isRTL, allowPhoneInitials);
+    return imageInitials !== '' ? React.createElement("span", null, imageInitials) : React.createElement(Icon, { iconName: "Contact" });
+};
+//# sourceMappingURL=PersonaCoin.base.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IPersonaCoinProps } from '../Persona.types';
+/**
+ * PersonaCoin is used to render an individual's avatar and presence.
+ */
+export declare const PersonaCoin: React.FunctionComponent<IPersonaCoinProps>;

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.js

@@ -0,0 +1,10 @@
+import { styled } from '../../../Utilities';
+import { PersonaCoinBase } from './PersonaCoin.base';
+import { getStyles } from './PersonaCoin.styles';
+/**
+ * PersonaCoin is used to render an individual's avatar and presence.
+ */
+export var PersonaCoin = styled(PersonaCoinBase, getStyles, undefined, {
+    scope: 'PersonaCoin',
+});
+//# sourceMappingURL=PersonaCoin.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaCoin.js","sourceRoot":"../src/","sources":["components/Persona/PersonaCoin/PersonaCoin.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAA+C,MAAM,CAI3E,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE;IACvC,KAAK,EAAE,aAAa;CACrB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin.base';\nimport { getStyles } from './PersonaCoin.styles';\nimport type { IPersonaCoinProps, IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';\n\n/**\n * PersonaCoin is used to render an individual's avatar and presence.\n */\nexport const PersonaCoin: React.FunctionComponent<IPersonaCoinProps> = styled<\n  IPersonaCoinProps,\n  IPersonaCoinStyleProps,\n  IPersonaCoinStyles\n>(PersonaCoinBase, getStyles, undefined, {\n  scope: 'PersonaCoin',\n});\n"]}

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPersonaCoinStyleProps, IPersonaCoinStyles } from '../Persona.types';
+export declare const getStyles: (props: IPersonaCoinStyleProps) => IPersonaCoinStyles;

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/PersonaCoin.styles.js

@@ -0,0 +1,142 @@
+import { __assign } from "tslib";
+import { HighContrastSelector, FontWeights, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';
+import { sizeBoolean, sizeToPixels } from '../PersonaConsts';
+var GlobalClassNames = {
+    coin: 'ms-Persona-coin',
+    imageArea: 'ms-Persona-imageArea',
+    image: 'ms-Persona-image',
+    initials: 'ms-Persona-initials',
+    size8: 'ms-Persona--size8',
+    size10: 'ms-Persona--size10',
+    size16: 'ms-Persona--size16',
+    size24: 'ms-Persona--size24',
+    size28: 'ms-Persona--size28',
+    size32: 'ms-Persona--size32',
+    size40: 'ms-Persona--size40',
+    size48: 'ms-Persona--size48',
+    size56: 'ms-Persona--size56',
+    size72: 'ms-Persona--size72',
+    size100: 'ms-Persona--size100',
+    size120: 'ms-Persona--size120',
+};
+export var getStyles = function (props) {
+    var _a;
+    var className = props.className, theme = props.theme, coinSize = props.coinSize;
+    var palette = theme.palette, fonts = theme.fonts;
+    var size = sizeBoolean(props.size);
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    // Static colors used when displaying 'unknown persona' coin
+    var unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';
+    var unknownPersonaFontColor = 'rgb(168, 0, 0)';
+    var dimension = coinSize || (props.size && sizeToPixels[props.size]) || 48;
+    return {
+        coin: [
+            classNames.coin,
+            fonts.medium,
+            size.isSize8 && classNames.size8,
+            size.isSize10 && classNames.size10,
+            size.isSize16 && classNames.size16,
+            size.isSize24 && classNames.size24,
+            size.isSize28 && classNames.size28,
+            size.isSize32 && classNames.size32,
+            size.isSize40 && classNames.size40,
+            size.isSize48 && classNames.size48,
+            size.isSize56 && classNames.size56,
+            size.isSize72 && classNames.size72,
+            size.isSize100 && classNames.size100,
+            size.isSize120 && classNames.size120,
+            className,
+        ],
+        size10WithoutPresenceIcon: {
+            fontSize: fonts.xSmall.fontSize,
+            position: 'absolute',
+            top: '5px',
+            right: 'auto',
+            left: 0,
+        },
+        imageArea: [
+            classNames.imageArea,
+            {
+                position: 'relative',
+                textAlign: 'center',
+                flex: '0 0 auto',
+                height: dimension,
+                width: dimension,
+            },
+            dimension <= 10 && {
+                overflow: 'visible',
+                background: 'transparent',
+                height: 0,
+                width: 0,
+            },
+        ],
+        image: [
+            classNames.image,
+            {
+                marginRight: '10px',
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 0,
+                borderRadius: '50%',
+                perspective: '1px',
+            },
+            dimension <= 10 && {
+                overflow: 'visible',
+                background: 'transparent',
+                height: 0,
+                width: 0,
+            },
+            dimension > 10 && {
+                height: dimension,
+                width: dimension,
+            },
+        ],
+        initials: [
+            classNames.initials,
+            {
+                borderRadius: '50%',
+                color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,
+                fontSize: fonts.large.fontSize,
+                fontWeight: FontWeights.semibold,
+                // copying the logic for the dimensions; defaulted to 46 for size48
+                lineHeight: dimension === 48 ? 46 : dimension,
+                height: dimension,
+                selectors: (_a = {},
+                    _a[HighContrastSelector] = __assign(__assign({ border: '1px solid WindowText' }, getHighContrastNoAdjustStyle()), { color: 'WindowText', boxSizing: 'border-box', backgroundColor: 'Window !important' }),
+                    _a.i = {
+                        fontWeight: FontWeights.semibold,
+                    },
+                    _a),
+            },
+            props.showUnknownPersonaCoin && {
+                backgroundColor: unknownPersonaBackgroundColor,
+            },
+            dimension < 32 && {
+                fontSize: fonts.xSmall.fontSize,
+            },
+            dimension >= 32 &&
+                dimension < 40 && {
+                fontSize: fonts.medium.fontSize,
+            },
+            dimension >= 40 &&
+                dimension < 56 && {
+                fontSize: fonts.mediumPlus.fontSize,
+            },
+            dimension >= 56 &&
+                dimension < 72 && {
+                fontSize: fonts.xLarge.fontSize,
+            },
+            dimension >= 72 &&
+                dimension < 100 && {
+                fontSize: fonts.xxLarge.fontSize,
+            },
+            dimension >= 100 && {
+                fontSize: fonts.superLarge.fontSize,
+            },
+        ],
+    };
+};
+//# sourceMappingURL=PersonaCoin.styles.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PersonaCoin';
+export * from './PersonaCoin.base';

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/index.js

@@ -0,0 +1,3 @@
+export * from './PersonaCoin';
+export * from './PersonaCoin.base';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaCoin/index.js.map

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

node_modules/@fluentui/react/lib/components/Persona/PersonaConsts.d.ts

@@ -0,0 +1,53 @@
+import { PersonaPresence, PersonaSize } from './Persona.types';
+export declare namespace personaSize {
+    const size8 = "20px";
+    const size10 = "20px";
+    const size16 = "16px";
+    const size24 = "24px";
+    const size28 = "28px";
+    const size32 = "32px";
+    const size40 = "40px";
+    const size48 = "48px";
+    const size56 = "56px";
+    const size72 = "72px";
+    const size100 = "100px";
+    const size120 = "120px";
+}
+export declare namespace personaPresenceSize {
+    const size6 = "6px";
+    const size8 = "8px";
+    const size12 = "12px";
+    const size16 = "16px";
+    const size20 = "20px";
+    const size28 = "28px";
+    const size32 = "32px";
+    /**
+     * @deprecated This is now unused
+     */
+    const border = "2px";
+}
+export declare const sizeBoolean: (size: PersonaSize) => {
+    isSize8: boolean;
+    isSize10: boolean;
+    isSize16: boolean;
+    isSize24: boolean;
+    isSize28: boolean;
+    isSize32: boolean;
+    isSize40: boolean;
+    isSize48: boolean;
+    isSize56: boolean;
+    isSize72: boolean;
+    isSize100: boolean;
+    isSize120: boolean;
+};
+export declare const sizeToPixels: {
+    [key: number]: number;
+};
+export declare const presenceBoolean: (presence: PersonaPresence) => {
+    isAvailable: boolean;
+    isAway: boolean;
+    isBlocked: boolean;
+    isBusy: boolean;
+    isDoNotDisturb: boolean;
+    isOffline: boolean;
+};

node_modules/@fluentui/react/lib/components/Persona/PersonaConsts.js

@@ -0,0 +1,85 @@
+var _a;
+import { PersonaPresence, PersonaSize } from './Persona.types';
+// Persona Sizes
+export var personaSize;
+(function (personaSize) {
+    personaSize.size8 = '20px';
+    // TODO: remove in a future major release as it's deprecated.
+    personaSize.size10 = '20px';
+    // TODO: remove in a future major release as it's deprecated.
+    personaSize.size16 = '16px';
+    personaSize.size24 = '24px';
+    // TODO: remove in a future major release as it's deprecated.
+    personaSize.size28 = '28px';
+    personaSize.size32 = '32px';
+    personaSize.size40 = '40px';
+    personaSize.size48 = '48px';
+    personaSize.size56 = '56px';
+    personaSize.size72 = '72px';
+    personaSize.size100 = '100px';
+    personaSize.size120 = '120px';
+})(personaSize || (personaSize = {}));
+// Persona Presence Sizes
+export var personaPresenceSize;
+(function (personaPresenceSize) {
+    personaPresenceSize.size6 = '6px';
+    personaPresenceSize.size8 = '8px';
+    personaPresenceSize.size12 = '12px';
+    personaPresenceSize.size16 = '16px';
+    personaPresenceSize.size20 = '20px';
+    personaPresenceSize.size28 = '28px';
+    personaPresenceSize.size32 = '32px';
+    /**
+     * @deprecated This is now unused
+     */
+    personaPresenceSize.border = '2px';
+})(personaPresenceSize || (personaPresenceSize = {}));
+// TODO: remove the deprecated parts in a future major release.
+export var sizeBoolean = function (size) { return ({
+    isSize8: size === PersonaSize.size8,
+    /* eslint-disable @typescript-eslint/no-deprecated */
+    isSize10: size === PersonaSize.size10 || size === PersonaSize.tiny,
+    isSize16: size === PersonaSize.size16,
+    isSize24: size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall,
+    isSize28: size === PersonaSize.size28 || size === PersonaSize.extraSmall,
+    isSize32: size === PersonaSize.size32,
+    isSize40: size === PersonaSize.size40 || size === PersonaSize.small,
+    isSize48: size === PersonaSize.size48 || size === PersonaSize.regular,
+    isSize56: size === PersonaSize.size56,
+    isSize72: size === PersonaSize.size72 || size === PersonaSize.large,
+    isSize100: size === PersonaSize.size100 || size === PersonaSize.extraLarge,
+    isSize120: size === PersonaSize.size120,
+}); };
+export var sizeToPixels = (_a = {},
+    // Old deprecated sizes
+    _a[PersonaSize.tiny] = 10,
+    _a[PersonaSize.extraExtraSmall] = 24,
+    _a[PersonaSize.extraSmall] = 28,
+    _a[PersonaSize.small] = 40,
+    _a[PersonaSize.regular] = 48,
+    _a[PersonaSize.large] = 72,
+    _a[PersonaSize.extraLarge] = 100,
+    // New sizes
+    _a[PersonaSize.size8] = 8,
+    _a[PersonaSize.size10] = 10, // TODO: deprecated (not in the design specs)
+    _a[PersonaSize.size16] = 16, // TODO: deprecated (not in the design specs)
+    _a[PersonaSize.size24] = 24,
+    _a[PersonaSize.size28] = 28, // TODO: deprecated (not in the design specs)
+    /* eslint-enable @typescript-eslint/no-deprecated */
+    _a[PersonaSize.size32] = 32,
+    _a[PersonaSize.size40] = 40,
+    _a[PersonaSize.size48] = 48,
+    _a[PersonaSize.size56] = 56,
+    _a[PersonaSize.size72] = 72,
+    _a[PersonaSize.size100] = 100,
+    _a[PersonaSize.size120] = 120,
+    _a);
+export var presenceBoolean = function (presence) { return ({
+    isAvailable: presence === PersonaPresence.online,
+    isAway: presence === PersonaPresence.away,
+    isBlocked: presence === PersonaPresence.blocked,
+    isBusy: presence === PersonaPresence.busy,
+    isDoNotDisturb: presence === PersonaPresence.dnd,
+    isOffline: presence === PersonaPresence.offline,
+}); };
+//# sourceMappingURL=PersonaConsts.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaInitialsColor.d.ts

@@ -0,0 +1,10 @@
+import type { IPersonaProps } from './Persona.types';
+/** @deprecated Use `getPersonaInitialsColor` */
+export declare function initialsColorPropToColorCode(props: IPersonaProps): string;
+/**
+ * Gets the hex color string (prefixed with #) for the given persona props.
+ * This is the logic used internally by the Persona control.
+ * @param props - Current persona props
+ * @returns Hex color string prefixed with #
+ */
+export declare function getPersonaInitialsColor(props: Pick<IPersonaProps, 'primaryText' | 'text' | 'initialsColor'>): string;

node_modules/@fluentui/react/lib/components/Persona/PersonaInitialsColor.js

@@ -0,0 +1,126 @@
+import { PersonaInitialsColor } from './Persona.types';
+/**
+ * Following colors are considered reserved and can only be set with overrides, so they are excluded from this set:
+ * - `gray` and `black` can result in offensive persona coins with some initials combinations
+ * - `red` often has a special meaning
+ * - `transparent` is not intended to be used with typical initials due to accessibility issues;
+ *   its primary use is for Facepile overflow buttons.
+ */
+var COLOR_SWATCHES_LOOKUP = [
+    PersonaInitialsColor.lightBlue,
+    PersonaInitialsColor.blue,
+    PersonaInitialsColor.darkBlue,
+    PersonaInitialsColor.teal,
+    PersonaInitialsColor.green,
+    PersonaInitialsColor.darkGreen,
+    PersonaInitialsColor.lightPink,
+    PersonaInitialsColor.pink,
+    PersonaInitialsColor.magenta,
+    PersonaInitialsColor.purple,
+    PersonaInitialsColor.orange,
+    PersonaInitialsColor.lightRed,
+    PersonaInitialsColor.darkRed,
+    PersonaInitialsColor.violet,
+    PersonaInitialsColor.gold,
+    PersonaInitialsColor.burgundy,
+    PersonaInitialsColor.warmGray,
+    PersonaInitialsColor.cyan,
+    PersonaInitialsColor.rust,
+    PersonaInitialsColor.coolGray,
+];
+var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
+function getInitialsColorFromName(displayName) {
+    var color = PersonaInitialsColor.blue;
+    if (!displayName) {
+        return color;
+    }
+    var hashCode = 0;
+    for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
+        var ch = displayName.charCodeAt(iLen);
+        var shift = iLen % 8;
+        // eslint-disable-next-line no-bitwise
+        hashCode ^= (ch << shift) + (ch >> (8 - shift));
+    }
+    color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
+    return color;
+}
+function personaInitialsColorToHexCode(personaInitialsColor) {
+    switch (personaInitialsColor) {
+        case PersonaInitialsColor.lightBlue:
+            return '#4F6BED';
+        case PersonaInitialsColor.blue:
+            return '#0078D4';
+        case PersonaInitialsColor.darkBlue:
+            return '#004E8C';
+        case PersonaInitialsColor.teal:
+            return '#038387';
+        case PersonaInitialsColor.lightGreen:
+        case PersonaInitialsColor.green:
+            return '#498205';
+        case PersonaInitialsColor.darkGreen:
+            return '#0B6A0B';
+        case PersonaInitialsColor.lightPink:
+            return '#C239B3';
+        case PersonaInitialsColor.pink:
+            return '#E3008C';
+        case PersonaInitialsColor.magenta:
+            return '#881798';
+        case PersonaInitialsColor.purple:
+            return '#5C2E91';
+        case PersonaInitialsColor.orange:
+            return '#CA5010';
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        case PersonaInitialsColor.red:
+            return '#EE1111';
+        case PersonaInitialsColor.lightRed:
+            return '#D13438';
+        case PersonaInitialsColor.darkRed:
+            return '#A4262C';
+        case PersonaInitialsColor.transparent:
+            return 'transparent';
+        case PersonaInitialsColor.violet:
+            return '#8764B8';
+        case PersonaInitialsColor.gold:
+            return '#986F0B';
+        case PersonaInitialsColor.burgundy:
+            return '#750B1C';
+        case PersonaInitialsColor.warmGray:
+            return '#7A7574';
+        case PersonaInitialsColor.cyan:
+            return '#005B70';
+        case PersonaInitialsColor.rust:
+            return '#8E562E';
+        case PersonaInitialsColor.coolGray:
+            return '#69797E';
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        case PersonaInitialsColor.black:
+            return '#1D1D1D';
+        case PersonaInitialsColor.gray:
+            return '#393939';
+    }
+}
+/** @deprecated Use `getPersonaInitialsColor` */
+export function initialsColorPropToColorCode(props) {
+    return getPersonaInitialsColor(props);
+}
+/**
+ * Gets the hex color string (prefixed with #) for the given persona props.
+ * This is the logic used internally by the Persona control.
+ * @param props - Current persona props
+ * @returns Hex color string prefixed with #
+ */
+export function getPersonaInitialsColor(props) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    var primaryText = props.primaryText, text = props.text;
+    var initialsColor = props.initialsColor;
+    var initialsColorCode;
+    if (typeof initialsColor === 'string') {
+        initialsColorCode = initialsColor;
+    }
+    else {
+        initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(text || primaryText);
+        initialsColorCode = personaInitialsColorToHexCode(initialsColor);
+    }
+    return initialsColorCode;
+}
+//# sourceMappingURL=PersonaInitialsColor.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.base.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IPersonaPresenceProps } from '../Persona.types';
+/**
+ * PersonaPresence with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export declare const PersonaPresenceBase: React.FunctionComponent<IPersonaPresenceProps>;

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.base.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { classNamesFunction } from '../../../Utilities';
+import { Icon } from '../../../Icon';
+import { PersonaPresence as PersonaPresenceEnum } from '../Persona.types';
+import { sizeBoolean } from '../PersonaConsts';
+import { useMergedRefs } from '@fluentui/react-hooks';
+var coinSizeFontScaleFactor = 6;
+var coinSizePresenceScaleFactor = 3;
+var presenceMaxSize = 40;
+var presenceFontMaxSize = 20;
+var getClassNames = classNamesFunction({
+    // There can be many PersonaPresence rendered with different sizes.
+    // Therefore setting a larger cache size.
+    cacheSize: 100,
+});
+/**
+ * PersonaPresence with no default styles.
+ * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
+ */
+export var PersonaPresenceBase = React.forwardRef(function (props, forwardedRef) {
+    var coinSize = props.coinSize, isOutOfOffice = props.isOutOfOffice, styles = props.styles, // Use getStyles from props.
+    presence = props.presence, theme = props.theme, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors;
+    var rootRef = React.useRef(null);
+    var mergedRootRef = useMergedRefs(forwardedRef, rootRef);
+    var size = sizeBoolean(props.size);
+    // Render Presence Icon if Persona is above size 32.
+    var renderIcon = !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&
+        (coinSize ? coinSize > 32 : true);
+    var presenceHeightWidth = coinSize
+        ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize
+            ? coinSize / coinSizePresenceScaleFactor + 'px'
+            : presenceMaxSize + 'px'
+        : '';
+    var presenceFontSize = coinSize
+        ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize
+            ? coinSize / coinSizeFontScaleFactor + 'px'
+            : presenceFontMaxSize + 'px'
+        : '';
+    var coinSizeWithPresenceIconStyle = coinSize
+        ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth }
+        : undefined;
+    var coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;
+    // Use getStyles from props, or fall back to getStyles from styles file.
+    var classNames = getClassNames(styles, {
+        theme: theme,
+        presence: presence,
+        size: props.size,
+        isOutOfOffice: isOutOfOffice,
+        presenceColors: presenceColors,
+    });
+    if (presence === PersonaPresenceEnum.none) {
+        return null;
+    }
+    return (React.createElement("div", { role: "presentation", className: classNames.presence, style: coinSizeWithPresenceStyle, title: presenceTitle, ref: mergedRootRef }, renderIcon && (React.createElement(Icon, { className: classNames.presenceIcon, iconName: determineIcon(props.presence, props.isOutOfOffice), style: coinSizeWithPresenceIconStyle }))));
+});
+PersonaPresenceBase.displayName = 'PersonaPresenceBase';
+function determineIcon(presence, isOutOfOffice) {
+    if (!presence) {
+        return undefined;
+    }
+    var oofIcon = 'SkypeArrow';
+    switch (PersonaPresenceEnum[presence]) {
+        case 'online':
+            return 'SkypeCheck';
+        case 'away':
+            return isOutOfOffice ? oofIcon : 'SkypeClock';
+        case 'dnd':
+            return 'SkypeMinus';
+        case 'offline':
+            return isOutOfOffice ? oofIcon : '';
+    }
+    return '';
+}
+//# sourceMappingURL=PersonaPresence.base.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IPersonaPresenceProps } from '../Persona.types';
+/**
+ * PersonaPresence is used to render an individual's presence.
+ */
+export declare const PersonaPresence: React.FunctionComponent<IPersonaPresenceProps>;

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.js

@@ -0,0 +1,8 @@
+import { styled } from '../../../Utilities';
+import { PersonaPresenceBase } from './PersonaPresence.base';
+import { getStyles } from './PersonaPresence.styles';
+/**
+ * PersonaPresence is used to render an individual's presence.
+ */
+export var PersonaPresence = styled(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });
+//# sourceMappingURL=PersonaPresence.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaPresence.js","sourceRoot":"../src/","sources":["components/Persona/PersonaPresence/PersonaPresence.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;GAEG;AACH,MAAM,CAAC,IAAM,eAAe,GAAmD,MAAM,CAInF,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../../Utilities';\nimport { PersonaPresenceBase } from './PersonaPresence.base';\nimport { getStyles } from './PersonaPresence.styles';\nimport type { IPersonaPresenceProps, IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';\n\n/**\n * PersonaPresence is used to render an individual's presence.\n */\nexport const PersonaPresence: React.FunctionComponent<IPersonaPresenceProps> = styled<\n  IPersonaPresenceProps,\n  IPersonaPresenceStyleProps,\n  IPersonaPresenceStyles\n>(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });\n"]}

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.styles.d.ts

@@ -0,0 +1,2 @@
+import type { IPersonaPresenceStyleProps, IPersonaPresenceStyles } from '../Persona.types';
+export declare const getStyles: (props: IPersonaPresenceStyleProps) => IPersonaPresenceStyles;

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/PersonaPresence.styles.js

@@ -0,0 +1,207 @@
+import { __assign } from "tslib";
+import { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';
+import { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';
+var GlobalClassNames = {
+    presence: 'ms-Persona-presence',
+    presenceIcon: 'ms-Persona-presenceIcon',
+};
+export var getStyles = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var theme = props.theme, presenceColors = props.presenceColors;
+    var semanticColors = theme.semanticColors, fonts = theme.fonts;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    var size = sizeBoolean(props.size);
+    var presence = presenceBoolean(props.presence);
+    // Presence colors
+    var presenceColorAvailable = (presenceColors && presenceColors.available) || '#6BB700';
+    var presenceColorAway = (presenceColors && presenceColors.away) || '#FFAA44';
+    var presenceColorBusy = (presenceColors && presenceColors.busy) || '#C43148';
+    var presenceColorDnd = (presenceColors && presenceColors.dnd) || '#C50F1F';
+    var presenceColorOffline = (presenceColors && presenceColors.offline) || '#8A8886';
+    var presenceColorOof = (presenceColors && presenceColors.oof) || '#B4009E';
+    var presenceColorBackground = (presenceColors && presenceColors.background) || semanticColors.bodyBackground;
+    var isOpenCirclePresence = presence.isOffline ||
+        (props.isOutOfOffice && (presence.isAvailable || presence.isBusy || presence.isAway || presence.isDoNotDisturb));
+    var borderSizeForSmallPersonas = '1px';
+    var borderSizeForLargePersonas = '2px';
+    var borderSize = size.isSize72 || size.isSize100 ? borderSizeForLargePersonas : borderSizeForSmallPersonas;
+    return {
+        presence: [
+            classNames.presence,
+            __assign(__assign({ position: 'absolute', height: personaPresenceSize.size12, width: personaPresenceSize.size12, borderRadius: '50%', top: 'auto', right: '-2px', bottom: '-2px', border: "2px solid ".concat(presenceColorBackground), textAlign: 'center', boxSizing: 'content-box', backgroundClip: 'border-box' }, getHighContrastNoAdjustStyle()), { selectors: (_a = {},
+                    _a[HighContrastSelector] = {
+                        borderColor: 'Window',
+                        backgroundColor: 'WindowText',
+                    },
+                    _a) }),
+            (size.isSize8 || size.isSize10) && {
+                right: 'auto',
+                top: '7px',
+                left: 0,
+                border: 0,
+                selectors: (_b = {},
+                    _b[HighContrastSelector] = {
+                        top: '9px',
+                        border: '1px solid WindowText',
+                    },
+                    _b),
+            },
+            (size.isSize8 || size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) &&
+                makeSizeStyle(personaPresenceSize.size8),
+            (size.isSize40 || size.isSize48) && makeSizeStyle(personaPresenceSize.size12),
+            size.isSize16 && {
+                height: personaPresenceSize.size6,
+                width: personaPresenceSize.size6,
+                borderWidth: '1.5px',
+            },
+            size.isSize56 && makeSizeStyle(personaPresenceSize.size16),
+            size.isSize72 && makeSizeStyle(personaPresenceSize.size20),
+            size.isSize100 && makeSizeStyle(personaPresenceSize.size28),
+            size.isSize120 && makeSizeStyle(personaPresenceSize.size32),
+            presence.isAvailable && {
+                backgroundColor: presenceColorAvailable,
+                selectors: (_c = {},
+                    _c[HighContrastSelector] = backgroundColor('Highlight'),
+                    _c),
+            },
+            presence.isAway && backgroundColor(presenceColorAway),
+            presence.isBlocked && [
+                {
+                    selectors: (_d = {
+                            // Only show :after at larger sizes
+                            ':after': size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100
+                                ? {
+                                    content: '""',
+                                    width: '100%',
+                                    height: borderSize,
+                                    backgroundColor: presenceColorBusy,
+                                    transform: 'translateY(-50%) rotate(-45deg)',
+                                    position: 'absolute',
+                                    top: '50%',
+                                    left: 0,
+                                }
+                                : undefined
+                        },
+                        _d[HighContrastSelector] = {
+                            selectors: {
+                                ':after': {
+                                    width: "calc(100% - 4px)",
+                                    left: '2px',
+                                    backgroundColor: 'Window',
+                                },
+                            },
+                        },
+                        _d),
+                },
+            ],
+            presence.isBusy && backgroundColor(presenceColorBusy),
+            presence.isDoNotDisturb && backgroundColor(presenceColorDnd),
+            presence.isOffline && backgroundColor(presenceColorOffline),
+            (isOpenCirclePresence || presence.isBlocked) && [
+                {
+                    backgroundColor: presenceColorBackground,
+                    selectors: (_e = {
+                            ':before': {
+                                content: '""',
+                                width: '100%',
+                                height: '100%',
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                border: "".concat(borderSize, " solid ").concat(presenceColorBusy),
+                                borderRadius: '50%',
+                                boxSizing: 'border-box',
+                            }
+                        },
+                        _e[HighContrastSelector] = {
+                            backgroundColor: 'WindowText',
+                            selectors: {
+                                ':before': {
+                                    width: "calc(100% - 2px)",
+                                    height: "calc(100% - 2px)",
+                                    top: '1px',
+                                    left: '1px',
+                                    borderColor: 'Window',
+                                },
+                            },
+                        },
+                        _e),
+                },
+            ],
+            isOpenCirclePresence && presence.isAvailable && makeBeforeBorderStyle(borderSize, presenceColorAvailable),
+            isOpenCirclePresence && presence.isBusy && makeBeforeBorderStyle(borderSize, presenceColorBusy),
+            isOpenCirclePresence && presence.isAway && makeBeforeBorderStyle(borderSize, presenceColorOof),
+            isOpenCirclePresence && presence.isDoNotDisturb && makeBeforeBorderStyle(borderSize, presenceColorDnd),
+            isOpenCirclePresence && presence.isOffline && makeBeforeBorderStyle(borderSize, presenceColorOffline),
+            isOpenCirclePresence &&
+                presence.isOffline &&
+                props.isOutOfOffice &&
+                makeBeforeBorderStyle(borderSize, presenceColorOof),
+        ],
+        presenceIcon: [
+            classNames.presenceIcon,
+            {
+                color: presenceColorBackground,
+                fontSize: '6px', // exception case where we don't have an available theme.fonts variable to match it.
+                lineHeight: personaPresenceSize.size12,
+                verticalAlign: 'top',
+                selectors: (_f = {},
+                    _f[HighContrastSelector] = {
+                        color: 'Window',
+                    },
+                    _f),
+            },
+            size.isSize56 && {
+                fontSize: '8px', // exception case where we don't have an available theme.fonts variable to match it.
+                lineHeight: personaPresenceSize.size16,
+            },
+            size.isSize72 && {
+                fontSize: fonts.small.fontSize,
+                lineHeight: personaPresenceSize.size20,
+            },
+            size.isSize100 && {
+                fontSize: fonts.medium.fontSize,
+                lineHeight: personaPresenceSize.size28,
+            },
+            size.isSize120 && {
+                fontSize: fonts.medium.fontSize,
+                lineHeight: personaPresenceSize.size32,
+            },
+            presence.isAway && {
+                position: 'relative',
+                left: isOpenCirclePresence ? undefined : '1px',
+            },
+            isOpenCirclePresence && presence.isAvailable && makeOpenCircleIconStyle(presenceColorAvailable),
+            isOpenCirclePresence && presence.isBusy && makeOpenCircleIconStyle(presenceColorBusy),
+            isOpenCirclePresence && presence.isAway && makeOpenCircleIconStyle(presenceColorOof),
+            isOpenCirclePresence && presence.isDoNotDisturb && makeOpenCircleIconStyle(presenceColorDnd),
+            isOpenCirclePresence && presence.isOffline && makeOpenCircleIconStyle(presenceColorOffline),
+            isOpenCirclePresence && presence.isOffline && props.isOutOfOffice && makeOpenCircleIconStyle(presenceColorOof),
+        ],
+    };
+};
+function makeOpenCircleIconStyle(color) {
+    return {
+        color: color,
+        borderColor: color,
+    };
+}
+function makeBeforeBorderStyle(borderSize, color) {
+    return {
+        selectors: {
+            ':before': {
+                border: "".concat(borderSize, " solid ").concat(color),
+            },
+        },
+    };
+}
+function makeSizeStyle(size) {
+    return {
+        height: size,
+        width: size,
+    };
+}
+function backgroundColor(color) {
+    return { backgroundColor: color };
+}
+//# sourceMappingURL=PersonaPresence.styles.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PersonaPresence';
+export * from './PersonaPresence.base';

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.js

@@ -0,0 +1,3 @@
+export * from './PersonaPresence';
+export * from './PersonaPresence.base';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Persona/PersonaPresence/index.js.map

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

node_modules/@fluentui/react/lib/components/Persona/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Persona';
+export * from './Persona.base';
+export * from './Persona.types';
+export * from './PersonaCoin/index';
+export * from './PersonaConsts';
+export { getPersonaInitialsColor } from './PersonaInitialsColor';

node_modules/@fluentui/react/lib/components/Persona/index.js

@@ -0,0 +1,8 @@
+export * from './Persona';
+export * from './Persona.base';
+export * from './Persona.types';
+export * from './PersonaCoin/index';
+export * from './PersonaConsts';
+// Exporting in case someone would like to track the current color of a persona
+export { getPersonaInitialsColor } from './PersonaInitialsColor';
+//# sourceMappingURL=index.js.map

node_modules/@fluentui/react/lib/components/Persona/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,+EAA+E;AAC/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export * from './Persona';\nexport * from './Persona.base';\nexport * from './Persona.types';\nexport * from './PersonaCoin/index';\nexport * from './PersonaConsts';\n// Exporting in case someone would like to track the current color of a persona\nexport { getPersonaInitialsColor } from './PersonaInitialsColor';\n"]}

node_modules/@fluentui/react/lib/components/Persona/test-utils.d.ts

@@ -0,0 +1,7 @@
+import type { IRenderFunction } from '../../Utilities';
+import type { IPersonaProps, IPersonaSharedProps } from './index';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * function to override the default onRender callbacks
+ */
+export declare const wrapPersona: (example: IPersonaSharedProps, shouldWrapPersonaCoin?: boolean) => ((coinProps: IPersonaProps, defaultRenderer: IRenderFunction<IPersonaProps>) => JSXElement | null);

node_modules/@fluentui/react/lib/components/Persona/test-utils.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * function to override the default onRender callbacks
+ */
+export var wrapPersona = function (example, shouldWrapPersonaCoin) {
+    if (shouldWrapPersonaCoin === void 0) { shouldWrapPersonaCoin = false; }
+    return function (coinProps, defaultCoinRenderer) {
+        return shouldWrapPersonaCoin ? (React.createElement("span", { id: "persona-coin-container" }, defaultCoinRenderer(coinProps))) : (defaultCoinRenderer(coinProps));
+    };
+};
+//# sourceMappingURL=test-utils.js.map

node_modules/@fluentui/react/lib/components/Persona/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-utils.js","sourceRoot":"../src/","sources":["components/Persona/test-utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UACzB,OAA4B,EAC5B,qBAAsC;IAAtC,sCAAA,EAAA,6BAAsC;IAEtC,OAAO,UAAC,SAAS,EAAE,mBAAmB;QACpC,OAAO,qBAAqB,CAAC,CAAC,CAAC,CAC7B,8BAAM,EAAE,EAAC,wBAAwB,IAAE,mBAAmB,CAAC,SAAS,CAAC,CAAQ,CAC1E,CAAC,CAAC,CAAC,CACF,mBAAmB,CAAC,SAAS,CAAC,CAC/B,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport type { IRenderFunction } from '../../Utilities';\nimport type { IPersonaProps, IPersonaSharedProps } from './index';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\n/**\n * function to override the default onRender callbacks\n */\nexport const wrapPersona = (\n  example: IPersonaSharedProps,\n  shouldWrapPersonaCoin: boolean = false,\n): ((coinProps: IPersonaProps, defaultRenderer: IRenderFunction<IPersonaProps>) => JSXElement | null) => {\n  return (coinProps, defaultCoinRenderer): JSXElement | null => {\n    return shouldWrapPersonaCoin ? (\n      <span id=\"persona-coin-container\">{defaultCoinRenderer(coinProps)}</span>\n    ) : (\n      defaultCoinRenderer(coinProps)\n    );\n  };\n};\n"]}