@auth0/quantum-product 1.5.1

package/esm/app-bar/app-bar-actions/app-bar-actions.js

@@ -0,0 +1,16 @@
+import { styled, rootShouldForwardProp } from '../../styled';
+export var AppBarActionsComponentName = 'QuantumAppBarActions';
+export var AppBarActions = styled('div', {
+    name: AppBarActionsComponentName,
+    slot: 'Root',
+    shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'disableSpacing'; },
+})(function (_a) {
+    var theme = _a.theme, disableSpacing = _a.disableSpacing;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        '& > :not(:last-child)': {
+            marginRight: !disableSpacing ? theme.spacing(2) : 'inherit',
+        },
+    });
+});

package/esm/app-bar/app-bar-actions/index.js

@@ -0,0 +1 @@
+export { AppBarActions } from './app-bar-actions';

package/esm/app-bar/app-bar-button/app-bar-button.js

@@ -0,0 +1,44 @@
+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 __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;
+};
+import * as React from 'react';
+import { Button } from '../../button';
+import { styled } from '../../styled';
+var appBarButtonName = 'QuantumAppBarButton';
+export var Root = styled(Button, { name: appBarButtonName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme, variant = _a.variant, ownerState = _a.ownerState;
+    var _b = theme.mixins.appBarAction(), focus = _b.focus, hover = _b.hover, activeStyle = _b.active, root = _b.root;
+    return __assign(__assign(__assign(__assign(__assign({}, root), { whiteSpace: 'nowrap', textTransform: 'initial', minHeight: theme.typography.pxToRem(36), paddingTop: 0, paddingBottom: 0, fontWeight: theme.typography.fontWeightRegular, boxSizing: 'border-box', '&:focus,&.Mui-focus': focus, '&:hover,&.Mui-hover': hover, '&:active,&.Mui-active': activeStyle, color: 'inherit' }), (variant === 'outlined' && __assign(__assign({ borderColor: theme.tokens.color_border_inverse_static }, (ownerState.active && {
+        borderColor: theme.tokens.color_border_state_neutral,
+    })), { '&:hover,&.Mui-hover': {
+            borderColor: theme.tokens.color_border_state_neutral,
+        } }))), (variant === 'link' && {
+        padding: theme.spacing(0, 1, 0, 1.5),
+        border: '2px solid transparent',
+    })), (ownerState.active && __assign({}, activeStyle)));
+});
+export var AppBarButton = React.forwardRef(function (props, ref) {
+    var color = props.color, className = props.className, active = props.active, _a = props.variant, variant = _a === void 0 ? 'link' : _a, _b = props.ButtonProps, ButtonProps = _b === void 0 ? {} : _b, children = props.children, 
+    // remove to avoid sending to IconButton
+    propClasses = props.classes, rootProps = __rest(props, ["color", "className", "active", "variant", "ButtonProps", "children", "classes"]);
+    return (React.createElement(Root, __assign({ ref: ref, ownerState: { active: active }, variant: variant }, rootProps, { color: "inherit" }, ButtonProps), children));
+});

package/esm/app-bar/app-bar-button/index.js

@@ -0,0 +1 @@
+export { AppBarButton } from './app-bar-button';

package/esm/app-bar/app-bar-content/app-bar-content.js

@@ -0,0 +1,15 @@
+import { styled } from '../../styled';
+export var AppBarContentComponentName = 'QuantumAppBarContent';
+export var AppBarContent = styled('div', {
+    name: AppBarContentComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        maxWidth: '100%',
+        padding: theme.spacing(0, 2),
+    });
+});

package/esm/app-bar/app-bar-content/index.js

@@ -0,0 +1 @@
+export { AppBarContent } from './app-bar-content';

package/esm/app-bar/app-bar-divider/app-bar-divider.js

@@ -0,0 +1,12 @@
+import { Divider } from '../../divider';
+import { styled } from '../../styled';
+export var AppBarDivider = styled(Divider, { name: 'QuantumAppBarDivider' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        height: theme.typography.pxToRem(24),
+        borderColor: theme.tokens.color_border_inverse_static,
+    });
+});
+AppBarDivider.defaultProps = {
+    orientation: 'vertical',
+};

package/esm/app-bar/app-bar-divider/index.js

@@ -0,0 +1 @@
+export { AppBarDivider } from './app-bar-divider';

package/esm/app-bar/app-bar-icon-button/app-bar-icon-button.js

@@ -0,0 +1,39 @@
+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 __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;
+};
+import * as React from 'react';
+import { IconButton } from '../../icon-button';
+import { styled } from '../../styled';
+var appBarIconButtonName = 'QuantumAppBarIconButton';
+export var Root = styled(IconButton, { name: appBarIconButtonName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    var _b = theme.mixins.appBarAction(), focus = _b.focus, hover = _b.hover, activeStyle = _b.active, root = _b.root;
+    return __assign(__assign(__assign(__assign({}, root), { height: theme.typography.pxToRem(36), width: theme.typography.pxToRem(36), paddingTop: 0, paddingBottom: 0, '&:focus,&.Mui-focus': focus, '&:hover,&.Mui-hover': hover, '&:active,&.Mui-active': activeStyle, '& > svg:first-child': {
+            flexShrink: 0,
+            width: 'auto',
+            height: 'auto',
+        } }), (ownerState.active && activeStyle)), (ownerState.circular && { borderRadius: '50%' }));
+});
+export var AppBarIconButton = React.forwardRef(function (props, ref) {
+    var color = props.color, className = props.className, active = props.active, _a = props.variant, variant = _a === void 0 ? 'link' : _a, circular = props.circular, _b = props.IconButtonProps, IconButtonProps = _b === void 0 ? {} : _b, children = props.children, rootProps = __rest(props, ["color", "className", "active", "variant", "circular", "IconButtonProps", "children"]);
+    return (React.createElement(Root, __assign({}, { ref: ref }, { className: className, ownerState: { active: active, circular: circular } }, rootProps, { variant: variant, color: "inherit" }, IconButtonProps), children));
+});

package/esm/app-bar/app-bar-icon-button/index.js

@@ -0,0 +1 @@
+export { AppBarIconButton } from './app-bar-icon-button';

package/esm/app-bar/app-bar-overrides.js

@@ -0,0 +1,32 @@
+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);
+};
+export var createMuiAppBarOverrides = function (_a) {
+    var palette = _a.palette, tokens = _a.tokens;
+    return {
+        defaultProps: {
+            position: 'fixed',
+            color: 'default',
+        },
+        styleOverrides: {
+            root: __assign({ boxShadow: 'none', height: tokens.size_layout_app_bar_height, zIndex: 20, backgroundImage: 'none' }, (palette.mode === 'dark' && {
+                borderBottom: "1px solid ".concat(tokens.color_border_default),
+            })),
+            positionFixed: {
+                top: tokens.size_layout_app_top,
+            },
+            colorDefault: {
+                backgroundColor: tokens.color_bg_app_bar,
+                color: tokens.color_fg_inverse_static,
+            },
+        },
+    };
+};

package/esm/app-bar/app-bar.js

@@ -0,0 +1 @@
+export { default as AppBar } from '@mui/material/AppBar';

package/esm/app-bar/index.js

@@ -0,0 +1,6 @@
+export { AppBar } from './app-bar';
+export * from './app-bar-actions';
+export * from './app-bar-button';
+export * from './app-bar-content';
+export * from './app-bar-divider';
+export * from './app-bar-icon-button';

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

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var appLayoutComponentName = 'QuantumAppLayout';
+export function getAppLayoutUtilityClass(slot) {
+    return generateUtilityClass(appLayoutComponentName, slot);
+}
+export var appLayoutClasses = generateUtilityClasses(appLayoutComponentName, [
+    'root',
+    'main',
+    'container',
+    'content',
+]);

package/esm/app-layout/app-layout.js

@@ -0,0 +1,94 @@
+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 __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;
+};
+import * as React from 'react';
+import { styled } from '../styled';
+import { appLayoutClasses, appLayoutComponentName } from './app-layout-classes';
+import clsx from '../utils/clsx';
+var Root = styled('div', { name: appLayoutComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        maxWidth: '100%',
+        display: 'flex',
+        paddingTop: theme.layout.appBarHeight,
+        alignItems: 'center',
+        flexDirection: 'column',
+    });
+});
+var Container = styled('div', {
+    name: appLayoutComponentName,
+    slot: 'Container',
+})({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'flex-start',
+});
+var Main = styled('main', {
+    name: 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 = styled('div', {
+    name: 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',
+    }));
+});
+export var 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: clsx(appLayoutClasses.root, className) }, rootProps),
+        appBar,
+        React.createElement(Container, { className: appLayoutClasses.container },
+            sidebar,
+            React.createElement(Main, { ownerState: { layout: layout }, className: appLayoutClasses.main },
+                React.createElement(Content, { ownerState: { layout: layout }, className: appLayoutClasses.content }, children)))));
+});

package/esm/app-layout/index.js

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

package/esm/autocomplete/autocomplete-overrides.js

@@ -0,0 +1,41 @@
+import { autocompleteClasses } from '@mui/material/Autocomplete';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+export 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(outlinedInputClasses.root, "\"]")] = (_c = {
+                        padding: spacing(0.25, 1, 0.25, 0.5)
+                    },
+                    _c["& .".concat(autocompleteClasses.input)] = {
+                        padding: spacing(0.5, 1),
+                        '&:first-child': {
+                            paddingLeft: spacing(1.75),
+                        },
+                    },
+                    _c["& .".concat(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',
+                },
+            },
+        },
+    };
+};

package/esm/autocomplete/index.js

@@ -0,0 +1 @@
+export { default as Autocomplete, createFilterOptions as createAutocompleteFilterOptions, } from '@mui/material/Autocomplete';

package/esm/avatar/avatar-classes.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var avatarComponentName = 'QuantumAvatar';
+export function getAvatarUtilityClass(slot) {
+    return generateUtilityClass(avatarComponentName, slot);
+}
+export var avatarClasses = generateUtilityClasses(avatarComponentName, ['root', 'img', 'fallbackIcon']);

package/esm/avatar/avatar-context.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export var AvatarContext = React.createContext({
+    size: 'medium',
+});
+export var useAvatarContext = function () { return React.useContext(AvatarContext); };

package/esm/avatar/avatar.js

@@ -0,0 +1,182 @@
+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 __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;
+};
+import * as React from 'react';
+import { GridIcon, UserIcon } from '../icon';
+import { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { useAvatarContext } from './avatar-context';
+import { useAvatarImage } from './use-avatar-image';
+import { avatarComponentName, avatarClasses, getAvatarUtilityClass } from './avatar-classes';
+import { useMergedClasses } from '../styles/classes';
+var Root = styled('div', { name: 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 = styled('img', { name: 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: GridIcon,
+    user: UserIcon,
+    logo: GridIcon,
+};
+export var 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 = useAvatarContext();
+    var classes = useMergedClasses(avatarClasses, getAvatarUtilityClass, props.classes);
+    var size = sizeProp || ctx.size;
+    var type = typeProp || ctx.type || 'resource';
+    var _c = 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: clsx(classes.root, className) }, rootProps), children));
+});

package/esm/avatar/index.js

@@ -0,0 +1,3 @@
+export { Avatar } from './avatar';
+export { avatarClasses } from './avatar-classes';
+export { useAvatarContext, AvatarContext } from './avatar-context';

package/esm/avatar/use-avatar-image.js

@@ -0,0 +1,74 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import md5 from '../utils/md5';
+import * as React from 'react';
+var getGravatarUrl = function (email) {
+    var hash = md5(email.toLowerCase());
+    return "https://s.gravatar.com/avatar/".concat(hash, "?s=128&r=pg&d=404");
+};
+var getImageSources = function (_a) {
+    var src = _a.src, type = _a.type, email = _a.email;
+    var sources = {
+        primary: src || null,
+        fallback: null,
+    };
+    if (type === 'user' && !!email) {
+        sources[sources.primary ? 'fallback' : 'primary'] = getGravatarUrl(email);
+    }
+    return sources;
+};
+export var useAvatarImage = function (_a) {
+    var src = _a.src, type = _a.type, email = _a.email;
+    var _b = __read(React.useState(getImageSources({ src: src, type: type, email: email })), 2), imageSources = _b[0], setImageSources = _b[1];
+    var _c = __read(React.useState('primary'), 2), imageToLoad = _c[0], setImageToLoad = _c[1];
+    var _d = __read(React.useState('loading'), 2), imageState = _d[0], setImageState = _d[1];
+    React.useEffect(function () {
+        setImageSources(getImageSources({ src: src, type: type, email: email }));
+        setImageToLoad('primary');
+        setImageState('loading');
+    }, [src, type, email]);
+    React.useEffect(function () {
+        var imageSrc = imageSources[imageToLoad];
+        if (!imageSrc) {
+            // set loaded with no image
+            setImageState('loaded');
+            return undefined;
+        }
+        setImageState('loading');
+        var image = new Image();
+        var onLoad = function () { return setImageState('loaded'); };
+        var onError = function () {
+            if (imageToLoad === 'primary' && !!imageSources.fallback) {
+                setImageToLoad('fallback');
+            }
+            else {
+                setImageState('error');
+            }
+        };
+        image.addEventListener('load', onLoad);
+        image.addEventListener('error', onError);
+        image.src = imageSrc;
+        return function () {
+            image.removeEventListener('load', onLoad);
+            image.removeEventListener('error', onError);
+        };
+    }, [imageToLoad, imageSources]);
+    return {
+        src: imageSources[imageToLoad],
+        status: imageState,
+    };
+};

package/esm/avatar-block/avatar-block-classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var avatarBlockComponentName = 'QuantumAvatarBlock';
+export function getAvatarBlockUtilityClass(slot) {
+    return generateUtilityClass(avatarBlockComponentName, slot);
+}
+export var avatarBlockClasses = generateUtilityClasses(avatarBlockComponentName, [
+    'root',
+    'avatar',
+    'titleBlock',
+    'endAdornment',
+]);