first commit

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { IFacepileProps } from './Facepile.types';
+import type { JSXElement } from '@fluentui/utilities';
+/**
+ * FacePile with no default styles.
+ * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)
+ */
+export declare class FacepileBase extends React.Component<IFacepileProps, {}> {
+    static defaultProps: IFacepileProps;
+    private _ariaDescriptionId;
+    private _classNames;
+    constructor(props: IFacepileProps);
+    render(): JSXElement;
+    protected onRenderAriaDescription(): JSXElement | undefined;
+    private _onRenderVisiblePersonas;
+    private _getPersonaControl;
+    private _getPersonaCoinControl;
+    private _getElementWithOnClickEvent;
+    private _getElementWithoutOnClickEvent;
+    private _getElementProps;
+    private _getOverflowElement;
+    private _getDescriptiveOverflowElement;
+    private _getIconElement;
+    private _getAddNewElement;
+    private _onPersonaClick;
+    private _onPersonaMouseMove;
+    private _onPersonaMouseOut;
+    private _renderInitials;
+    private _renderInitialsNotPictured;
+}

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

@@ -0,0 +1,173 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { buttonProperties, classNamesFunction, getId, getNativeProps, initializeComponentRef } from '../../Utilities';
+import { OverflowButtonType } from './Facepile.types';
+import { FacepileButton } from './FacepileButton';
+import { Icon } from '../../Icon';
+import { Persona } from '../../Persona';
+import { PersonaCoin, PersonaSize, PersonaInitialsColor } from '../../PersonaCoin';
+var getClassNames = classNamesFunction();
+/**
+ * FacePile with no default styles.
+ * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)
+ */
+var FacepileBase = /** @class */ (function (_super) {
+    __extends(FacepileBase, _super);
+    function FacepileBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._classNames = getClassNames(_this.props.styles, {
+            theme: _this.props.theme,
+            className: _this.props.className,
+        });
+        _this._getPersonaControl = function (persona) {
+            var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
+            var personaStyles = {
+                details: {
+                    flex: '1 0 auto',
+                },
+            };
+            return (React.createElement(Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null), { styles: personaStyles })));
+        };
+        _this._getPersonaCoinControl = function (persona) {
+            var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;
+            return (React.createElement(PersonaCoin, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null))));
+        };
+        initializeComponentRef(_this);
+        _this._ariaDescriptionId = getId();
+        return _this;
+    }
+    FacepileBase.prototype.render = function () {
+        var overflowButtonProps = this.props.overflowButtonProps;
+        var _a = this.props, chevronButtonProps = _a.chevronButtonProps, // eslint-disable-line @typescript-eslint/no-deprecated
+        maxDisplayablePersonas = _a.maxDisplayablePersonas, personas = _a.personas, overflowPersonas = _a.overflowPersonas, showAddButton = _a.showAddButton, ariaLabel = _a.ariaLabel, _b = _a.showTooltip, showTooltip = _b === void 0 ? true : _b;
+        var _classNames = this._classNames;
+        // Add a check to make sure maxDisplayalePersonas is defined to cover the edge case of it being 0.
+        var numPersonasToShow = typeof maxDisplayablePersonas === 'number' ? Math.min(personas.length, maxDisplayablePersonas) : personas.length;
+        // Added for deprecating chevronButtonProps.  Can remove after v1.0
+        if (chevronButtonProps && !overflowButtonProps) {
+            overflowButtonProps = chevronButtonProps;
+        }
+        var hasOverflowPersonas = overflowPersonas && overflowPersonas.length > 0;
+        var personasPrimary = hasOverflowPersonas ? personas : personas.slice(0, numPersonasToShow);
+        var personasOverflow = (hasOverflowPersonas ? overflowPersonas : personas.slice(numPersonasToShow)) || [];
+        return (React.createElement("div", { className: _classNames.root },
+            this.onRenderAriaDescription(),
+            React.createElement("div", { className: _classNames.itemContainer },
+                showAddButton ? this._getAddNewElement() : null,
+                React.createElement("ul", { className: _classNames.members, "aria-label": ariaLabel }, this._onRenderVisiblePersonas(personasPrimary, personasOverflow.length === 0 && personas.length === 1, showTooltip)),
+                overflowButtonProps ? this._getOverflowElement(personasOverflow) : null)));
+    };
+    FacepileBase.prototype.onRenderAriaDescription = function () {
+        var ariaDescription = this.props.ariaDescription;
+        var _classNames = this._classNames;
+        // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
+        // otherwise it will be assigned to descriptionSpan.
+        return ariaDescription ? (React.createElement("span", { className: _classNames.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)) : undefined;
+    };
+    FacepileBase.prototype._onRenderVisiblePersonas = function (personas, singlePersona, showTooltip) {
+        var _this = this;
+        var _a = this.props, _b = _a.onRenderPersona, onRenderPersona = _b === void 0 ? this._getPersonaControl : _b, _c = _a.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? this._getPersonaCoinControl : _c, onRenderPersonaWrapper = _a.onRenderPersonaWrapper;
+        return personas.map(function (persona, index) {
+            var personaControl = singlePersona
+                ? onRenderPersona(persona, _this._getPersonaControl)
+                : onRenderPersonaCoin(persona, _this._getPersonaCoinControl);
+            var defaultPersonaRender = persona.onClick
+                ? function () { return _this._getElementWithOnClickEvent(personaControl, persona, showTooltip, index); }
+                : function () { return _this._getElementWithoutOnClickEvent(personaControl, persona, showTooltip, index); };
+            return (React.createElement("li", { key: "".concat(singlePersona ? 'persona' : 'personaCoin', "-").concat(index), className: _this._classNames.member }, onRenderPersonaWrapper ? onRenderPersonaWrapper(persona, defaultPersonaRender) : defaultPersonaRender()));
+        });
+    };
+    FacepileBase.prototype._getElementWithOnClickEvent = function (personaControl, persona, showTooltip, index) {
+        var keytipProps = persona.keytipProps;
+        return (React.createElement(FacepileButton, __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index), { keytipProps: keytipProps, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: this._onPersonaClick.bind(this, persona) }), personaControl));
+    };
+    FacepileBase.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, showTooltip, index) {
+        return (React.createElement("div", __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index)), personaControl));
+    };
+    FacepileBase.prototype._getElementProps = function (persona, showTooltip, index) {
+        var _classNames = this._classNames;
+        return {
+            key: (persona.imageUrl ? 'i' : '') + index,
+            'data-is-focusable': true,
+            className: _classNames.itemButton,
+            title: showTooltip ? persona.personaName : undefined,
+            onMouseMove: this._onPersonaMouseMove.bind(this, persona),
+            onMouseOut: this._onPersonaMouseOut.bind(this, persona),
+        };
+    };
+    FacepileBase.prototype._getOverflowElement = function (personasOverflow) {
+        switch (this.props.overflowButtonType) {
+            case OverflowButtonType.descriptive:
+                return this._getDescriptiveOverflowElement(personasOverflow);
+            case OverflowButtonType.downArrow:
+                return this._getIconElement('ChevronDown');
+            case OverflowButtonType.more:
+                return this._getIconElement('More');
+            default:
+                return null;
+        }
+    };
+    FacepileBase.prototype._getDescriptiveOverflowElement = function (personasOverflow) {
+        var personaSize = this.props.personaSize;
+        if (!personasOverflow || personasOverflow.length < 1) {
+            return null;
+        }
+        var personaNames = personasOverflow.map(function (p) { return p.personaName; }).join(', ');
+        var overflowButtonProps = __assign({ title: personaNames }, this.props.overflowButtonProps);
+        var numPersonasNotPictured = Math.max(personasOverflow.length, 0);
+        var _classNames = this._classNames;
+        return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { ariaDescription: overflowButtonProps.title, className: _classNames.descriptiveOverflowButton }),
+            React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitialsNotPictured(numPersonasNotPictured), initialsColor: PersonaInitialsColor.transparent })));
+    };
+    FacepileBase.prototype._getIconElement = function (icon) {
+        var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;
+        var overflowInitialsIcon = true;
+        var _classNames = this._classNames;
+        return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { className: _classNames.overflowButton }),
+            React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials(icon, overflowInitialsIcon), initialsColor: PersonaInitialsColor.transparent })));
+    };
+    FacepileBase.prototype._getAddNewElement = function () {
+        var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;
+        var _classNames = this._classNames;
+        return (React.createElement(FacepileButton, __assign({}, addButtonProps, { className: _classNames.addButton }),
+            React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials('AddFriend') })));
+    };
+    FacepileBase.prototype._onPersonaClick = function (persona, ev) {
+        persona.onClick(ev, persona);
+        ev.preventDefault();
+        ev.stopPropagation();
+    };
+    FacepileBase.prototype._onPersonaMouseMove = function (persona, ev) {
+        if (persona.onMouseMove) {
+            persona.onMouseMove(ev, persona);
+        }
+    };
+    FacepileBase.prototype._onPersonaMouseOut = function (persona, ev) {
+        if (persona.onMouseOut) {
+            persona.onMouseOut(ev, persona);
+        }
+    };
+    FacepileBase.prototype._renderInitials = function (iconName, overflowButton) {
+        var _classNames = this._classNames;
+        return function () {
+            return React.createElement(Icon, { iconName: iconName, className: overflowButton ? _classNames.overflowInitialsIcon : '' });
+        };
+    };
+    FacepileBase.prototype._renderInitialsNotPictured = function (numPersonasNotPictured) {
+        var _classNames = this._classNames;
+        return function () {
+            return (React.createElement("span", { className: _classNames.overflowInitialsIcon }, numPersonasNotPictured < 100 ? '+' + numPersonasNotPictured : '99+'));
+        };
+    };
+    FacepileBase.defaultProps = {
+        maxDisplayablePersonas: 5,
+        personas: [],
+        overflowPersonas: [],
+        personaSize: PersonaSize.size32,
+    };
+    return FacepileBase;
+}(React.Component));
+export { FacepileBase };
+//# sourceMappingURL=Facepile.base.js.map

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IFacepileProps } from './Facepile.types';
+/**
+ * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.
+ */
+export declare const Facepile: React.FunctionComponent<IFacepileProps>;

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

@@ -0,0 +1,10 @@
+import { styled } from '../../Utilities';
+import { FacepileBase } from './Facepile.base';
+import { styles } from './Facepile.styles';
+/**
+ * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.
+ */
+export var Facepile = styled(FacepileBase, styles, undefined, {
+    scope: 'Facepile',
+});
+//# sourceMappingURL=Facepile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Facepile.js","sourceRoot":"../src/","sources":["components/Facepile/Facepile.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C;;GAEG;AACH,MAAM,CAAC,IAAM,QAAQ,GAA4C,MAAM,CAIrE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE;IACjC,KAAK,EAAE,UAAU;CAClB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { FacepileBase } from './Facepile.base';\nimport { styles } from './Facepile.styles';\nimport type { IFacepileProps, IFacepileStyleProps, IFacepileStyles } from './Facepile.types';\n\n/**\n * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.\n */\nexport const Facepile: React.FunctionComponent<IFacepileProps> = styled<\n  IFacepileProps,\n  IFacepileStyleProps,\n  IFacepileStyles\n>(FacepileBase, styles, undefined, {\n  scope: 'Facepile',\n});\n"]}

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

@@ -0,0 +1,2 @@
+import type { IFacepileStyleProps, IFacepileStyles } from './Facepile.types';
+export declare const styles: (props: IFacepileStyleProps) => IFacepileStyles;

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

@@ -0,0 +1,126 @@
+import { hiddenContentStyle, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling';
+var GlobalClassNames = {
+    root: 'ms-Facepile',
+    addButton: 'ms-Facepile-addButton ms-Facepile-itemButton',
+    descriptiveOverflowButton: 'ms-Facepile-descriptiveOverflowButton ms-Facepile-itemButton',
+    itemButton: 'ms-Facepile-itemButton ms-Facepile-person',
+    itemContainer: 'ms-Facepile-itemContainer',
+    members: 'ms-Facepile-members',
+    member: 'ms-Facepile-member',
+    overflowButton: 'ms-Facepile-overflowButton ms-Facepile-itemButton',
+};
+export var styles = function (props) {
+    var _a;
+    var className = props.className, theme = props.theme, _b = props.spacingAroundItemButton, spacingAroundItemButton = _b === void 0 ? 2 : _b;
+    var palette = theme.palette, fonts = theme.fonts;
+    var classNames = getGlobalClassNames(GlobalClassNames, theme);
+    var ItemButtonStyles = {
+        textAlign: 'center',
+        padding: 0,
+        borderRadius: '50%',
+        verticalAlign: 'top',
+        display: 'inline',
+        backgroundColor: 'transparent',
+        border: 'none',
+        selectors: {
+            '&::-moz-focus-inner': {
+                padding: 0,
+                border: 0,
+            },
+        },
+    };
+    return {
+        root: [
+            classNames.root,
+            theme.fonts.medium,
+            {
+                width: 'auto',
+            },
+            className,
+        ],
+        addButton: [
+            classNames.addButton,
+            getFocusStyle(theme, { inset: -1 }),
+            ItemButtonStyles,
+            {
+                fontSize: fonts.medium.fontSize,
+                color: palette.white,
+                backgroundColor: palette.themePrimary,
+                marginRight: spacingAroundItemButton * 2 + 'px',
+                selectors: {
+                    '&:hover': {
+                        backgroundColor: palette.themeDark,
+                    },
+                    '&:focus': {
+                        backgroundColor: palette.themeDark,
+                    },
+                    '&:active': {
+                        backgroundColor: palette.themeDarker,
+                    },
+                    '&:disabled': {
+                        backgroundColor: palette.neutralTertiaryAlt,
+                    },
+                },
+            },
+        ],
+        descriptiveOverflowButton: [
+            classNames.descriptiveOverflowButton,
+            getFocusStyle(theme, { inset: -1 }),
+            ItemButtonStyles,
+            {
+                fontSize: fonts.small.fontSize,
+                color: palette.neutralSecondary,
+                backgroundColor: palette.neutralLighter,
+                marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
+            },
+        ],
+        itemButton: [classNames.itemButton, ItemButtonStyles],
+        itemContainer: [
+            classNames.itemContainer,
+            {
+                display: 'flex',
+            },
+        ],
+        members: [
+            classNames.members,
+            {
+                display: 'flex',
+                overflow: 'hidden',
+                listStyleType: 'none',
+                padding: 0,
+                margin: "-".concat(spacingAroundItemButton, "px"),
+            },
+        ],
+        member: [
+            classNames.member,
+            {
+                display: 'inline-flex',
+                flex: '0 0 auto',
+                margin: "".concat(spacingAroundItemButton, "px"),
+            },
+        ],
+        overflowButton: [
+            classNames.overflowButton,
+            getFocusStyle(theme, { inset: -1 }),
+            ItemButtonStyles,
+            {
+                fontSize: fonts.medium.fontSize,
+                color: palette.neutralSecondary,
+                backgroundColor: palette.neutralLighter,
+                marginLeft: "".concat(spacingAroundItemButton * 2, "px"),
+            },
+        ],
+        overflowInitialsIcon: [
+            {
+                color: palette.neutralPrimary,
+                selectors: (_a = {},
+                    _a[HighContrastSelector] = {
+                        color: 'WindowText',
+                    },
+                    _a),
+            },
+        ],
+        screenReaderOnly: hiddenContentStyle,
+    };
+};
+//# sourceMappingURL=Facepile.styles.js.map

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

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { FacepileBase } from './Facepile.base';
+import { PersonaInitialsColor, PersonaSize } from '../../Persona';
+import type { IStyle, ITheme } from '../../Styling';
+import type { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '../../Utilities';
+import type { IButtonProps } from '../../Button';
+import type { IPersonaSharedProps } from '../../Persona';
+import type { IKeytipProps } from '../../Keytip';
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepile {
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileProps extends React.ClassAttributes<FacepileBase> {
+    /**
+     * Optional callback to access the IFacepile interface. Use this instead of ref for accessing
+     * the public methods and properties of the component.
+     */
+    componentRef?: IRefObject<IFacepile>;
+    /**
+     * Whether the default tooltip (the persona name) is shown using the `title` prop.
+     * Set this to false if you'd like to display a custom tooltip, for example using a custom renderer and TooltipHost
+     * @defaultvalue true
+     */
+    showTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IFacepileStyleProps, IFacepileStyles>;
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme?: ITheme;
+    /**
+     * Additional css class to apply to the Facepile
+     * @defaultvalue undefined
+     */
+    className?: string;
+    /**
+     * Array of IPersonaProps that define each Persona.
+     */
+    personas: IFacepilePersona[];
+    /**
+     * Personas to place in the overflow
+     */
+    overflowPersonas?: IFacepilePersona[];
+    /** Maximum number of personas to show */
+    maxDisplayablePersonas?: number;
+    /** Size to display the personas */
+    personaSize?: PersonaSize;
+    /** ARIA label for persona list */
+    ariaDescription?: string;
+    /**
+     * Defines the aria label that the screen readers use when focus goes on a list of personas.
+     */
+    ariaLabel?: string;
+    /** Show add person button */
+    showAddButton?: boolean;
+    /** Button properties for the add face button */
+    addButtonProps?: IButtonProps;
+    /**
+     * Deprecated at v0.70, use `overflowButtonProps` instead.
+     * @deprecated Use `overflowButtonProps` instead.
+     */
+    chevronButtonProps?: IButtonProps;
+    /**
+     * Properties for the overflow icon. It is used to provide an event handler for the overflow button.
+     */
+    overflowButtonProps?: IButtonProps;
+    /**
+     * Type of overflow icon to use. If `overflowButtonType` is set to anything other than `none`
+     * then we have to provide `overflowButtonProps` to render the overflow button.
+     */
+    overflowButtonType?: OverflowButtonType;
+    /** Optional custom renderer for the persona, gets called when there is one persona in personas array*/
+    onRenderPersona?: IRenderFunction<IFacepilePersona>;
+    /** Optional custom renderer for the persona coins, gets called when there are multiple persona in personas array*/
+    onRenderPersonaCoin?: IRenderFunction<IFacepilePersona>;
+    /** Optional custom renderer for the FacepileButton that renders each clickable Persona */
+    onRenderPersonaWrapper?: IRenderFunction<IFacepilePersona>;
+    /** Method to access properties on the underlying Persona control */
+    getPersonaProps?: (persona: IFacepilePersona) => IPersonaSharedProps;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepilePersona extends React.ButtonHTMLAttributes<HTMLButtonElement | HTMLDivElement> {
+    /**
+     * Name of the person.
+     */
+    personaName?: string;
+    /**
+     * Url to the image to use, should be a square aspect ratio and big enough to fit in the image area.
+     */
+    imageUrl?: string;
+    /**
+     * The user's initials to display in the image area when there is no image.
+     * @defaultvalue Derived from `personaName`
+     */
+    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;
+    /**
+     * The background color when the user's initials are displayed.
+     * @defaultvalue Derived from `personaName`
+     */
+    initialsColor?: PersonaInitialsColor;
+    /**
+     * If provided, persona will be rendered with cursor:pointer and the handler will be
+     * called on click.
+     */
+    onClick?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * If provided, the handler will be called on mouse move.
+     */
+    onMouseMove?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * If provided, the handler will be called when mouse moves out of the component.
+     */
+    onMouseOut?: (ev?: React.MouseEvent<HTMLElement>, persona?: IFacepilePersona) => void;
+    /**
+     * Extra data - not used directly but can be handy for passing additional data to custom event
+     * handlers.
+     */
+    data?: any;
+    /**
+     * Optional keytip for this button that is only added when 'onClick' is defined for the persona
+     */
+    keytipProps?: IKeytipProps;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export declare enum OverflowButtonType {
+    /** No overflow */
+    none = 0,
+    /** +1 overflow icon */
+    descriptive = 1,
+    /** More overflow icon */
+    more = 2,
+    /** Chevron overflow icon */
+    downArrow = 3
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileStyleProps {
+    /**
+     * Theme provided by High-Order Component.
+     */
+    theme: ITheme;
+    /**
+     * Accept custom classNames
+     */
+    className?: string;
+    /**
+     * Pixel value for spacing around button. Number value set in pixels
+     */
+    spacingAroundItemButton?: number;
+}
+/**
+ * {@docCategory Facepile}
+ */
+export interface IFacepileStyles {
+    /**
+     * Style for the root element.
+     */
+    root: IStyle;
+    addButton: IStyle;
+    descriptiveOverflowButton: IStyle;
+    itemContainer: IStyle;
+    itemButton: IStyle;
+    members: IStyle;
+    member: IStyle;
+    overflowButton: IStyle;
+    overflowInitialsIcon: IStyle;
+    screenReaderOnly: IStyle;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * {@docCategory Facepile}
+ */
+export var OverflowButtonType;
+(function (OverflowButtonType) {
+    /** No overflow */
+    OverflowButtonType[OverflowButtonType["none"] = 0] = "none";
+    /** +1 overflow icon */
+    OverflowButtonType[OverflowButtonType["descriptive"] = 1] = "descriptive";
+    /** More overflow icon */
+    OverflowButtonType[OverflowButtonType["more"] = 2] = "more";
+    /** Chevron overflow icon */
+    OverflowButtonType[OverflowButtonType["downArrow"] = 3] = "downArrow";
+})(OverflowButtonType || (OverflowButtonType = {}));
+//# sourceMappingURL=Facepile.types.js.map

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { IButtonProps } from '../../Button';
+import type { JSXElement } from '@fluentui/utilities';
+export declare class FacepileButton extends React.Component<IButtonProps, {}> {
+    render(): JSXElement;
+}

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.js

@@ -0,0 +1,22 @@
+import { __assign, __decorate, __extends, __rest } from "tslib";
+import * as React from 'react';
+import { BaseButton } from '../../Button';
+import { customizable, nullRender } from '../../Utilities';
+import { getStyles } from './FacepileButton.styles';
+var FacepileButton = /** @class */ (function (_super) {
+    __extends(FacepileButton, _super);
+    function FacepileButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FacepileButton.prototype.render = function () {
+        var _a = this.props, className = _a.className, styles = _a.styles, rest = __rest(_a, ["className", "styles"]);
+        var customStyles = getStyles(this.props.theme, className, styles);
+        return (React.createElement(BaseButton, __assign({}, rest, { variantClassName: "ms-Button--facepile", styles: customStyles, onRenderDescription: nullRender })));
+    };
+    FacepileButton = __decorate([
+        customizable('FacepileButton', ['theme', 'styles'], true)
+    ], FacepileButton);
+    return FacepileButton;
+}(React.Component));
+export { FacepileButton };
+//# sourceMappingURL=FacepileButton.js.map

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacepileButton.js","sourceRoot":"../src/","sources":["components/Facepile/FacepileButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMpD;IAAoC,kCAAiC;IAArE;;IAeA,CAAC;IAdQ,+BAAM,GAAb;QACE,IAAM,KAAiC,IAAI,CAAC,KAAK,EAAzC,SAAS,eAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAA5B,uBAA8B,CAAa,CAAC;QAElD,IAAM,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QAErE,OAAO,CACL,oBAAC,UAAU,eACL,IAAI,IACR,gBAAgB,EAAC,qBAAqB,EACtC,MAAM,EAAE,YAAY,EACpB,mBAAmB,EAAE,UAAU,IAC/B,CACH,CAAC;IACJ,CAAC;IAdU,cAAc;QAD1B,YAAY,CAAC,gBAAgB,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,IAAI,CAAC;OAC7C,cAAc,CAe1B;IAAD,qBAAC;CAAA,AAfD,CAAoC,KAAK,CAAC,SAAS,GAelD;SAfY,cAAc","sourcesContent":["import * as React from 'react';\nimport { BaseButton } from '../../Button';\nimport { customizable, nullRender } from '../../Utilities';\nimport { getStyles } from './FacepileButton.styles';\nimport type { IButtonProps } from '../../Button';\n\nimport type { JSXElement } from '@fluentui/utilities';\n\n@customizable('FacepileButton', ['theme', 'styles'], true)\nexport class FacepileButton extends React.Component<IButtonProps, {}> {\n  public render(): JSXElement {\n    const { className, styles, ...rest } = this.props;\n\n    const customStyles = getStyles(this.props.theme!, className, styles);\n\n    return (\n      <BaseButton\n        {...rest}\n        variantClassName=\"ms-Button--facepile\"\n        styles={customStyles}\n        onRenderDescription={nullRender}\n      />\n    );\n  }\n}\n"]}

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.styles.d.ts

@@ -0,0 +1,3 @@
+import type { ITheme } from '../../Styling';
+import type { IButtonStyles } from '../../Button';
+export declare const getStyles: (theme: ITheme, className?: string, customStyles?: IButtonStyles) => IButtonStyles;

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.styles.js

@@ -0,0 +1,10 @@
+import { __assign } from "tslib";
+import { concatStyleSets } from '../../Styling';
+import { memoizeFunction } from '../../Utilities';
+import { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles';
+export var getStyles = memoizeFunction(function (theme, className, customStyles) {
+    var baseButtonStyles = getBaseButtonStyles(theme);
+    var customButtonStyles = concatStyleSets(baseButtonStyles, customStyles);
+    return __assign(__assign({}, customButtonStyles), { root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root] });
+});
+//# sourceMappingURL=FacepileButton.styles.js.map

node_modules/@fluentui/react/lib/components/Facepile/FacepileButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FacepileButton.styles.js","sourceRoot":"../src/","sources":["components/Facepile/FacepileButton.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,SAAS,IAAI,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAI/E,MAAM,CAAC,IAAM,SAAS,GAAG,eAAe,CACtC,UAAC,KAAa,EAAE,SAAkB,EAAE,YAA4B;IAC9D,IAAM,gBAAgB,GAAkB,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAEnE,IAAM,kBAAkB,GAAG,eAAe,CAAC,gBAAgB,EAAE,YAAY,CAAE,CAAC;IAE5E,OAAO,sBACF,kBAAkB,KACrB,IAAI,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,GAC/E,CAAC;AACrB,CAAC,CACF,CAAC","sourcesContent":["import { concatStyleSets } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles';\nimport type { ITheme } from '../../Styling';\nimport type { IButtonStyles } from '../../Button';\n\nexport const getStyles = memoizeFunction(\n  (theme: ITheme, className?: string, customStyles?: IButtonStyles): IButtonStyles => {\n    const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);\n\n    const customButtonStyles = concatStyleSets(baseButtonStyles, customStyles)!;\n\n    return {\n      ...customButtonStyles,\n      root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root],\n    } as IButtonStyles;\n  },\n);\n"]}

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

@@ -0,0 +1,3 @@
+export * from './Facepile.types';
+export * from './Facepile.base';
+export * from './Facepile';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Facepile/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC","sourcesContent":["export * from './Facepile.types';\nexport * from './Facepile.base';\nexport * from './Facepile';\n"]}