@auth0/quantum-product 1.5.1

package/app-bar/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBar = void 0;
+var app_bar_1 = require("./app-bar");
+Object.defineProperty(exports, "AppBar", { enumerable: true, get: function () { return app_bar_1.AppBar; } });
+__exportStar(require("./app-bar-actions"), exports);
+__exportStar(require("./app-bar-button"), exports);
+__exportStar(require("./app-bar-content"), exports);
+__exportStar(require("./app-bar-divider"), exports);
+__exportStar(require("./app-bar-icon-button"), exports);

package/app-layout/app-layout-classes.d.ts

@@ -0,0 +1,6 @@
+export declare const appLayoutComponentName: "QuantumAppLayout";
+export declare type AppLayoutSlotKey = 'root' | 'main' | 'container' | 'content';
+export declare function getAppLayoutUtilityClass(slot: string): string;
+export declare const appLayoutClasses: Record<"main" | "content" | "root" | "container", string>;
+export declare type AppLayoutClasses = typeof appLayoutClasses;
+export declare type AppLayoutClassKey = keyof AppLayoutClasses;

package/app-layout/app-layout-classes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appLayoutClasses = exports.getAppLayoutUtilityClass = exports.appLayoutComponentName = void 0;
+var classes_1 = require("../styles/classes");
+exports.appLayoutComponentName = 'QuantumAppLayout';
+function getAppLayoutUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.appLayoutComponentName, slot);
+}
+exports.getAppLayoutUtilityClass = getAppLayoutUtilityClass;
+exports.appLayoutClasses = (0, classes_1.generateUtilityClasses)(exports.appLayoutComponentName, [
+    'root',
+    'main',
+    'container',
+    'content',
+]);

package/app-layout/app-layout.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IStyledComponentProps } from '../styled';
+export declare type IAppLayoutProps = IStyledComponentProps<{
+    props: {
+        appBar?: React.ReactNode;
+        sidebar?: React.ReactNode;
+        layout?: 'default' | 'full' | 'fit';
+        /** Main Content */
+        children?: React.ReactNode;
+    };
+    defaultComponent: 'div';
+}>;
+export declare const AppLayout: React.ForwardRefExoticComponent<{
+    appBar?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    layout?: "default" | "fit" | "full" | undefined;
+    /** Main Content */
+    children?: React.ReactNode;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "layout" | "children" | "appBar" | "sidebar"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/app-layout/app-layout.js

@@ -0,0 +1,123 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLayout = void 0;
+var React = __importStar(require("react"));
+var styled_1 = require("../styled");
+var app_layout_classes_1 = require("./app-layout-classes");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var Root = (0, styled_1.styled)('div', { name: app_layout_classes_1.appLayoutComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        maxWidth: '100%',
+        display: 'flex',
+        paddingTop: theme.layout.appBarHeight,
+        alignItems: 'center',
+        flexDirection: 'column',
+    });
+});
+var Container = (0, styled_1.styled)('div', {
+    name: app_layout_classes_1.appLayoutComponentName,
+    slot: 'Container',
+})({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'flex-start',
+});
+var Main = (0, styled_1.styled)('main', {
+    name: app_layout_classes_1.appLayoutComponentName,
+    slot: 'Main',
+})(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign({ width: '100%' }, (ownerState.layout === 'fit'
+        ? {
+            height: "calc(100vh - ".concat(theme.tokens.size_layout_app_bar_height + theme.tokens.size_layout_app_top, "px)"),
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+        }
+        : {})));
+});
+var Content = (0, styled_1.styled)('div', {
+    name: app_layout_classes_1.appLayoutComponentName,
+    slot: 'Content',
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return __assign(__assign((_b = {}, _b[theme.breakpoints.up('lg')] = {
+        minWidth: theme.typography.pxToRem(1048),
+    }, _b.margin = '0 auto', _b), (ownerState.layout === 'default'
+        ? {
+            paddingTop: theme.spacing(5),
+            maxWidth: theme.typography.pxToRem(1048),
+            paddingLeft: theme.spacing(3),
+            paddingRight: theme.spacing(3),
+            paddingBottom: theme.spacing(5),
+        }
+        : {
+            width: '100%',
+        })), (ownerState.layout === 'fit' && {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflowX: 'hidden',
+        overflowY: 'hidden',
+    }));
+});
+exports.AppLayout = React.forwardRef(function (props, ref) {
+    var _a = props.layout, layout = _a === void 0 ? 'default' : _a, appBar = props.appBar, sidebar = props.sidebar, children = props.children, className = props.className, rootProps = __rest(props, ["layout", "appBar", "sidebar", "children", "className"]);
+    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(app_layout_classes_1.appLayoutClasses.root, className) }, rootProps),
+        appBar,
+        React.createElement(Container, { className: app_layout_classes_1.appLayoutClasses.container },
+            sidebar,
+            React.createElement(Main, { ownerState: { layout: layout }, className: app_layout_classes_1.appLayoutClasses.main },
+                React.createElement(Content, { ownerState: { layout: layout }, className: app_layout_classes_1.appLayoutClasses.content }, children)))));
+});

package/app-layout/index.d.ts

@@ -0,0 +1,3 @@
+export { AppLayout } from './app-layout';
+export type { IAppLayoutProps } from './app-layout';
+export { appLayoutClasses } from './app-layout-classes';

package/app-layout/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appLayoutClasses = exports.AppLayout = void 0;
+var app_layout_1 = require("./app-layout");
+Object.defineProperty(exports, "AppLayout", { enumerable: true, get: function () { return app_layout_1.AppLayout; } });
+var app_layout_classes_1 = require("./app-layout-classes");
+Object.defineProperty(exports, "appLayoutClasses", { enumerable: true, get: function () { return app_layout_classes_1.appLayoutClasses; } });

package/autocomplete/autocomplete-overrides.d.ts

@@ -0,0 +1,3 @@
+import { AutocompleteClassKey, AutocompleteProps } from '@mui/material/Autocomplete';
+import type { ComponentOverrideCreator } from '../theme/create-component-overrides';
+export declare const createMuiAutocompleteOverrides: ComponentOverrideCreator<AutocompleteProps<unknown, undefined, undefined, undefined>, AutocompleteClassKey>;

package/autocomplete/autocomplete-overrides.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMuiAutocompleteOverrides = void 0;
+var Autocomplete_1 = require("@mui/material/Autocomplete");
+var OutlinedInput_1 = require("@mui/material/OutlinedInput");
+var createMuiAutocompleteOverrides = function (_a) {
+    var _b, _c;
+    var spacing = _a.spacing, typography = _a.typography;
+    return {
+        styleOverrides: {
+            inputRoot: (_b = {
+                    minHeight: 40
+                },
+                // https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L79
+                _b["&[class*=\"".concat(OutlinedInput_1.outlinedInputClasses.root, "\"]")] = (_c = {
+                        padding: spacing(0.25, 1, 0.25, 0.5)
+                    },
+                    _c["& .".concat(Autocomplete_1.autocompleteClasses.input)] = {
+                        padding: spacing(0.5, 1),
+                        '&:first-child': {
+                            paddingLeft: spacing(1.75),
+                        },
+                    },
+                    _c["& .".concat(Autocomplete_1.autocompleteClasses.endAdornment)] = {
+                        right: spacing(0.75),
+                    },
+                    _c),
+                _b),
+            tag: {
+                margin: 1,
+            },
+            endAdornment: {
+                top: 'unset',
+            },
+            option: {
+                lineHeight: 2,
+                fontSize: typography.pxToRem(14),
+                '&:not(:last-child)': {
+                    borderBottom: 'none',
+                },
+            },
+        },
+    };
+};
+exports.createMuiAutocompleteOverrides = createMuiAutocompleteOverrides;

package/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Autocomplete, createFilterOptions as createAutocompleteFilterOptions, } from '@mui/material/Autocomplete';
+export type { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteClassKey, AutocompleteInputChangeReason, AutocompleteProps as IAutocompleteProps, } from '@mui/material/Autocomplete';

package/autocomplete/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAutocompleteFilterOptions = exports.Autocomplete = void 0;
+var Autocomplete_1 = require("@mui/material/Autocomplete");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return __importDefault(Autocomplete_1).default; } });
+Object.defineProperty(exports, "createAutocompleteFilterOptions", { enumerable: true, get: function () { return Autocomplete_1.createFilterOptions; } });

package/avatar/avatar-classes.d.ts

@@ -0,0 +1,5 @@
+export declare const avatarComponentName: "QuantumAvatar";
+export declare function getAvatarUtilityClass(slot: string): string;
+export declare const avatarClasses: Record<"img" | "root" | "fallbackIcon", string>;
+export declare type AvatarClasses = typeof avatarClasses;
+export declare type AvatarClassKey = keyof AvatarClasses;

package/avatar/avatar-classes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarClasses = exports.getAvatarUtilityClass = exports.avatarComponentName = void 0;
+var classes_1 = require("../styles/classes");
+exports.avatarComponentName = 'QuantumAvatar';
+function getAvatarUtilityClass(slot) {
+    return (0, classes_1.generateUtilityClass)(exports.avatarComponentName, slot);
+}
+exports.getAvatarUtilityClass = getAvatarUtilityClass;
+exports.avatarClasses = (0, classes_1.generateUtilityClasses)(exports.avatarComponentName, ['root', 'img', 'fallbackIcon']);

package/avatar/avatar-context.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare type AvatarSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare type AvatarType = 'user' | 'resource' | 'logo';
+export declare type AvatarVariant = 'circular' | 'rounded' | 'square';
+export interface IAvatarContextValue {
+    /** The size of the avatar */
+    size?: AvatarSize;
+    /** Maps to default props based on type. Use this as a shortcut to set the proper props */
+    type?: AvatarType;
+    /** The shape of the avatar. */
+    variant?: AvatarVariant;
+}
+export declare const AvatarContext: React.Context<IAvatarContextValue>;
+export declare const useAvatarContext: () => IAvatarContextValue;

package/avatar/avatar-context.js

@@ -0,0 +1,32 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAvatarContext = exports.AvatarContext = void 0;
+var React = __importStar(require("react"));
+exports.AvatarContext = React.createContext({
+    size: 'medium',
+});
+var useAvatarContext = function () { return React.useContext(exports.AvatarContext); };
+exports.useAvatarContext = useAvatarContext;

package/avatar/avatar.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { IconType } from '../icon';
+import { IStyledComponentProps } from '../styled';
+import { AvatarSize, AvatarVariant } from './avatar-context';
+import { IAvatarImageProps } from './use-avatar-image';
+import { AvatarClasses } from './avatar-classes';
+import { ColorName } from '../theme/colors';
+export declare type IAvatarProps = IStyledComponentProps<{
+    props: IAvatarImageProps & {
+        color?: 'default' | 'primary' | 'warning' | 'danger' | 'success' | 'info' | ColorName;
+        /** Provides an alt attribute for the rendered `img` element. */
+        alt?: string;
+        /** Used to render icon or text elements inside the Avatar if `src` is not set. */
+        children?: React.ReactNode;
+        /** classes to override styles */
+        classes?: Partial<AvatarClasses>;
+        /** specifies the image object-fit type */
+        imgFit?: 'contain' | 'cover';
+        /** Attributes applied to the `img` element if the component is used to display an image. */
+        imgProps?: IStyledComponentProps<{
+            props: {
+                'data-testid'?: string;
+            };
+            defaultComponent: 'img';
+        }>;
+        /** Adds padding around image. Only works when type === "logo". */
+        includePadding?: boolean;
+        /** displays border around the avatar */
+        showBorder?: boolean;
+        /** The size of the avatar */
+        size?: AvatarSize;
+        /** Fallback icon to display instead of default if set.  */
+        fallbackIconOverride?: IconType;
+        /** The shape of the avatar. */
+        variant?: AvatarVariant;
+        /** initials to be used as a fallback if src fails to load. Only used for user type */
+        initials?: string;
+        /** instructs the avatar where it is being rendered */
+        placement?: 'default' | 'badge';
+    };
+    defaultComponent: 'div';
+}>;
+export interface IAvatarImgOwnerState {
+    imgFit?: IAvatarProps['imgFit'];
+}
+export declare const Avatar: React.ForwardRefExoticComponent<IAvatarImageProps & {
+    color?: ColorName | "primary" | "default" | "warning" | "danger" | "success" | "info" | undefined;
+    /** Provides an alt attribute for the rendered `img` element. */
+    alt?: string | undefined;
+    /** Used to render icon or text elements inside the Avatar if `src` is not set. */
+    children?: React.ReactNode;
+    /** classes to override styles */
+    classes?: Partial<Record<"img" | "root" | "fallbackIcon", string>> | undefined;
+    /** specifies the image object-fit type */
+    imgFit?: "contain" | "cover" | undefined;
+    /** Attributes applied to the `img` element if the component is used to display an image. */
+    imgProps?: IStyledComponentProps<{
+        props: {
+            'data-testid'?: string;
+        };
+        defaultComponent: 'img';
+    }> | undefined;
+    /** Adds padding around image. Only works when type === "logo". */
+    includePadding?: boolean | undefined;
+    /** displays border around the avatar */
+    showBorder?: boolean | undefined;
+    /** The size of the avatar */
+    size?: AvatarSize | undefined;
+    /** Fallback icon to display instead of default if set.  */
+    fallbackIconOverride?: IconType | undefined;
+    /** The shape of the avatar. */
+    variant?: AvatarVariant | undefined;
+    /** initials to be used as a fallback if src fails to load. Only used for user type */
+    initials?: string | undefined;
+    /** instructs the avatar where it is being rendered */
+    placement?: "default" | "badge" | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "color" | "size" | "classes" | "children" | "variant" | "placement" | "alt" | "imgProps" | keyof IAvatarImageProps | "imgFit" | "includePadding" | "showBorder" | "fallbackIconOverride" | "initials"> & import("../styled").IStyledCommonProps & React.RefAttributes<HTMLDivElement>>;

package/avatar/avatar.js

@@ -0,0 +1,211 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var React = __importStar(require("react"));
+var icon_1 = require("../icon");
+var styled_1 = require("../styled");
+var clsx_1 = __importDefault(require("../utils/clsx"));
+var avatar_context_1 = require("./avatar-context");
+var use_avatar_image_1 = require("./use-avatar-image");
+var avatar_classes_1 = require("./avatar-classes");
+var classes_1 = require("../styles/classes");
+var Root = (0, styled_1.styled)('div', { name: avatar_classes_1.avatarComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var fullTokens = theme.tokens;
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden', height: theme.typography.pxToRem(40), width: theme.typography.pxToRem(40), color: theme.tokens.color_fg_on_state_neutral_subtle, backgroundColor: theme.tokens.color_bg_state_neutral_subtle, fontSize: theme.typography.pxToRem(16), fontWeight: theme.typography.fontWeightMedium, textTransform: 'uppercase', '& > svg': {
+            height: theme.typography.pxToRem(24),
+            width: theme.typography.pxToRem(24),
+        } }, (ownerState.type === 'logo' && {
+        backgroundColor: theme.mixins.getColorModeValue({
+            light: 'transparent',
+            dark: theme.tokens.color_bg_state_neutral,
+        }),
+        // adding padding due to the addition of a background for some.
+        padding: theme.palette.mode === 'dark' ? theme.spacing(0.25) : undefined,
+    })), (ownerState.showBorder && {
+        border: "1px solid ".concat(theme.tokens.color_border_bold),
+        '&$logo$hasImg': {
+            backgroundColor: theme.tokens.color_bg_layer,
+        },
+    })), (ownerState.includePadding &&
+        ownerState.type === 'logo' && {
+        padding: ownerState.size === 'small'
+            ? theme.spacing(0.5)
+            : ownerState.size === 'large'
+                ? theme.spacing(1.5)
+                : ownerState.size === 'xlarge'
+                    ? theme.spacing(3)
+                    : theme.spacing(0.75),
+    })), (ownerState.placement === 'badge' && {
+        border: "3px solid ".concat(theme.tokens.color_bg_layer),
+    })), (ownerState.variant === 'rounded' && {
+        borderRadius: 4,
+    })), (ownerState.variant === 'circular' && {
+        minWidth: 'unset',
+        fontSize: theme.typography.button.fontSize,
+        borderRadius: '50%',
+    })), (ownerState.size === 'xsmall' && __assign({ height: theme.typography.pxToRem(24), width: theme.typography.pxToRem(24), fontSize: theme.typography.pxToRem(12), '& > svg': {
+            height: theme.typography.pxToRem(16),
+            width: theme.typography.pxToRem(16),
+        } }, (ownerState.variant === 'rounded' && {
+        borderRadius: 2,
+    })))), (ownerState.size === 'small' && __assign({ height: theme.typography.pxToRem(32), width: theme.typography.pxToRem(32), fontSize: theme.typography.pxToRem(14), '& > svg': {
+            height: theme.typography.pxToRem(16),
+            width: theme.typography.pxToRem(16),
+        } }, (ownerState.variant === 'rounded' && {
+        borderRadius: ownerState.placement === 'badge' ? 8 : 2,
+    })))), (ownerState.size === 'medium' && {
+        fontSize: theme.typography.pxToRem(16),
+    })), (ownerState.size === 'large' && __assign({ height: theme.typography.pxToRem(64), width: theme.typography.pxToRem(64), fontSize: theme.typography.pxToRem(24), '& > svg': {
+            height: theme.typography.pxToRem(40),
+            width: theme.typography.pxToRem(40),
+        } }, (ownerState.variant === 'rounded' && {
+        borderRadius: 6,
+    })))), (ownerState.size === 'xlarge' && __assign({ height: theme.typography.pxToRem(128), width: theme.typography.pxToRem(128), fontSize: theme.typography.pxToRem(48), fontWeight: theme.typography.fontWeightRegular, '& > svg': {
+            height: theme.typography.pxToRem(80),
+            width: theme.typography.pxToRem(80),
+        } }, (ownerState.variant === 'rounded' && {
+        borderRadius: 8,
+    })))), ((ownerState.color === 'primary' || ownerState.color === 'purple') && {
+        backgroundColor: theme.tokens.color_bg_brand_primary_subtle,
+        color: theme.tokens.color_fg_on_brand_primary_subtle,
+    })), ((ownerState.color === 'info' || ownerState.color === 'blue') && {
+        backgroundColor: theme.tokens.color_bg_state_info_subtle,
+        color: theme.tokens.color_fg_on_state_info_subtle,
+    })), ((ownerState.color === 'warning' || ownerState.color === 'yellow') && {
+        backgroundColor: theme.tokens.color_bg_state_caution_subtle,
+        color: theme.tokens.color_fg_on_state_caution_subtle,
+    })), ((ownerState.color === 'danger' || ownerState.color === 'red') && {
+        backgroundColor: theme.tokens.color_bg_state_danger_subtle,
+        color: theme.tokens.color_fg_on_state_danger_subtle,
+    })), ((ownerState.color === 'success' || ownerState.color === 'green') && {
+        backgroundColor: theme.tokens.color_bg_state_success_subtle,
+        color: theme.tokens.color_fg_on_state_success_subtle,
+    })), (ownerState.color === 'magenta' && {
+        backgroundColor: theme.mixins.getColorModeValue({
+            dark: fullTokens.color_global_functional_dark_magenta_200,
+            light: fullTokens.color_global_functional_light_magenta_200,
+        }),
+        color: theme.mixins.getColorModeValue({
+            dark: fullTokens.color_global_functional_dark_magenta_800,
+            light: fullTokens.color_global_functional_light_magenta_800,
+        }),
+    }));
+});
+var Img = (0, styled_1.styled)('img', { name: avatar_classes_1.avatarComponentName, slot: 'Img' })(function (_a) {
+    var ownerState = _a.ownerState;
+    return ({
+        width: '100%',
+        height: '100%',
+        textAlign: 'center',
+        // Handle non-square image. The property isn't supported by IE 11.
+        objectFit: ownerState.imgFit === 'contain' ? 'contain' : 'cover',
+        // Hide alt text.
+        color: 'transparent',
+        // Hide the image broken icon, only works on Chrome.
+        textIndent: 10000,
+    });
+});
+var getDefaultVariantForType = function (type) {
+    switch (type) {
+        case 'logo':
+            return 'square';
+        case 'resource':
+            return 'rounded';
+        case 'user':
+            return 'circular';
+    }
+};
+var fallbackIcon = {
+    resource: icon_1.GridIcon,
+    user: icon_1.UserIcon,
+    logo: icon_1.GridIcon,
+};
+exports.Avatar = React.forwardRef(function (props, ref) {
+    var className = props.className, alt = props.alt, color = props.color, childrenProp = props.children, imgProps = props.imgProps, includePadding = props.includePadding, showBorder = props.showBorder, sizeProp = props.size, _a = props.imgFit, imgFit = _a === void 0 ? 'cover' : _a, srcProp = props.src, fallbackIconOverride = props.fallbackIconOverride, typeProp = props.type, variantProp = props.variant, email = props.email, initials = props.initials, _b = props.placement, placement = _b === void 0 ? 'default' : _b, rootProps = __rest(props, ["className", "alt", "color", "children", "imgProps", "includePadding", "showBorder", "size", "imgFit", "src", "fallbackIconOverride", "type", "variant", "email", "initials", "placement"]);
+    var ctx = (0, avatar_context_1.useAvatarContext)();
+    var classes = (0, classes_1.useMergedClasses)(avatar_classes_1.avatarClasses, avatar_classes_1.getAvatarUtilityClass, props.classes);
+    var size = sizeProp || ctx.size;
+    var type = typeProp || ctx.type || 'resource';
+    var _c = (0, use_avatar_image_1.useAvatarImage)({ src: srcProp, type: type, email: email }), src = _c.src, status = _c.status;
+    var variantValue = variantProp || ctx.variant;
+    var FallbackIcon = fallbackIconOverride || fallbackIcon[type];
+    var variantForType = getDefaultVariantForType(type);
+    var variant = variantValue != null ? variantValue : variantForType;
+    var children = null;
+    var hasImgNotFailing = !!src && status !== 'error';
+    var ownerState = {
+        type: type,
+        showBorder: showBorder,
+        includePadding: includePadding,
+        hasImgNotFailing: hasImgNotFailing,
+        placement: placement,
+        variant: variant,
+        size: size,
+        color: color,
+    };
+    var ownerStateImg = {
+        imgFit: imgFit,
+    };
+    if (hasImgNotFailing) {
+        children = React.createElement(Img, __assign({ alt: alt || '', src: src, ownerState: ownerStateImg, className: classes.img }, imgProps));
+    }
+    else if (childrenProp != null) {
+        children = childrenProp;
+    }
+    else if ((type === 'user' || type === 'logo') && initials) {
+        children = initials.substring(0, 2);
+    }
+    else {
+        children = React.createElement(FallbackIcon, { className: classes.fallbackIcon });
+    }
+    return (React.createElement(Root, __assign({}, { ref: ref }, { ownerState: ownerState, className: (0, clsx_1.default)(classes.root, className) }, rootProps), children));
+});

package/avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './avatar';
+export type { IAvatarProps } from './avatar';
+export { avatarClasses } from './avatar-classes';
+export { useAvatarContext, AvatarContext } from './avatar-context';
+export type { AvatarSize, AvatarType, AvatarVariant } from './avatar-context';

package/avatar/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarContext = exports.useAvatarContext = exports.avatarClasses = exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+var avatar_classes_1 = require("./avatar-classes");
+Object.defineProperty(exports, "avatarClasses", { enumerable: true, get: function () { return avatar_classes_1.avatarClasses; } });
+var avatar_context_1 = require("./avatar-context");
+Object.defineProperty(exports, "useAvatarContext", { enumerable: true, get: function () { return avatar_context_1.useAvatarContext; } });
+Object.defineProperty(exports, "AvatarContext", { enumerable: true, get: function () { return avatar_context_1.AvatarContext; } });