@auth0/quantum-product 1.5.1

package/esm/dropdown-menu/dropdown-menu-list/dropdown-menu-list.js

@@ -0,0 +1,46 @@
+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 { DropdownMenuDivider } from '../dropdown-menu-divider';
+import { DropdownMenuGroup } from '../dropdown-menu-group';
+import { DropdownMenuListItem } from '../dropdown-menu-list-item';
+import { MenuList } from '../../menu';
+import { styled } from '../../styled';
+export var dropdownMenuListComponentName = 'QuantumDropdownMenuList';
+var Root = styled(MenuList, { name: dropdownMenuListComponentName, slot: 'Root' })({});
+export var DropdownMenuList = React.forwardRef(function (props, ref) {
+    var items = props.items, children = props.children, rootProps = __rest(props, ["items", "children"]);
+    var content = items
+        ? items.map(function (_a, index) {
+            var type = _a.type, itemProps = __rest(_a, ["type"]);
+            if (type === 'divider') {
+                return React.createElement(DropdownMenuDivider, { key: index });
+            }
+            if (type === 'group') {
+                return React.createElement(DropdownMenuGroup, __assign({ key: index }, itemProps));
+            }
+            return React.createElement(DropdownMenuListItem, __assign({ key: index }, itemProps));
+        })
+        : children;
+    return (React.createElement(Root, __assign({}, { component: 'div' }, { "aria-orientation": "vertical", disablePadding: true, autoFocus: true, ref: ref }, rootProps), content));
+});

package/esm/dropdown-menu/dropdown-menu-list/index.js

@@ -0,0 +1 @@
+export { DropdownMenuList } from './dropdown-menu-list';

package/esm/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item-classes.js

@@ -0,0 +1,20 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var dropdownMenuListItemComponentName = 'QuantumDropdownMenuListItem';
+export function getDropdownMenuListItemUtilityClass(slot) {
+    return generateUtilityClass(dropdownMenuListItemComponentName, slot);
+}
+export var dropdownMenuListItemClasses = generateUtilityClasses(dropdownMenuListItemComponentName, [
+    'root',
+    'sizeLarge',
+    'detailed',
+    'disabled',
+    'colorDanger',
+    'selected',
+    'content',
+    'title',
+    'description',
+    'icon',
+    'startIcon',
+    'endIcon',
+    'selectedIcon',
+]);

package/esm/dropdown-menu/dropdown-menu-list-item/dropdown-menu-list-item.js

@@ -0,0 +1,173 @@
+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 { useDropdownMenuContext } from '../dropdown-menu-context';
+import { CheckIcon } from '../../icon';
+import { MenuItem } from '../../menu';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { dropdownMenuListItemClasses, dropdownMenuListItemComponentName, getDropdownMenuListItemUtilityClass, } from './dropdown-menu-list-item-classes';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled(MenuItem, { name: dropdownMenuListItemComponentName, slot: 'Root' })(function (_a) {
+    var _b, _c, _d, _e;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: 6, transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
+            duration: theme.transitions.duration.shortest,
+        }), '&:active,&:hover': {
+            color: theme.tokens.color_fg_link_subtle_hover,
+            backgroundColor: theme.tokens.color_bg_interactive_hover,
+            boxShadow: 'none',
+        }, '&:focus:not(:active)': __assign({ backgroundColor: 'transparent' }, theme.mixins.focusRing()), '&.Mui-selected': {
+            color: theme.tokens.color_fg_selected,
+            backgroundColor: 'transparent',
+            '& $startIcon': {
+                color: 'currentColor',
+            },
+            '&:active,&:hover': {
+                backgroundColor: theme.tokens.color_bg_interactive_hover,
+                color: theme.tokens.color_fg_selected,
+                '& $startIcon': {
+                    color: 'currentColor',
+                },
+            },
+            '&.Mui-disabled': {
+                color: theme.tokens.color_fg_disabled,
+                backgroundColor: 'transparent',
+            },
+        }, '&.Mui-disabled': {
+            opacity: 1,
+            color: theme.tokens.color_fg_disabled,
+        } }), (ownerState.size === 'large' && {
+        padding: theme.spacing(0.75, 1.5),
+    })), (ownerState.color === 'danger' && (_b = {
+            color: theme.tokens.color_fg_link_danger
+        },
+        _b["& .".concat(dropdownMenuListItemClasses.startIcon, ", & .").concat(dropdownMenuListItemClasses.endIcon)] = {
+            color: 'currentColor',
+        },
+        _b['&:active,&:hover'] = {
+            color: theme.tokens.color_fg_link_danger_hover,
+            backgroundColor: theme.tokens.color_bg_link_danger_hover,
+        },
+        _b['&:focus:not(:active)'] = __assign({ backgroundColor: 'transparent' }, theme.mixins.focusRing({ color: theme.tokens.color_border_focus_state_danger })),
+        _b['&:$disabled'] = {},
+        _b))), (ownerState.selected && (_c = {},
+        _c["& .".concat(dropdownMenuListItemClasses.selected)] = {},
+        _c))), (ownerState.disabled && (_d = {},
+        _d["& .".concat(dropdownMenuListItemClasses.disabled)] = {},
+        _d))), (_e = {}, _e["& .".concat(dropdownMenuListItemClasses.icon)] = {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: theme.typography.pxToRem(16),
+        '& > svg': {
+            height: '1em',
+            width: '1em',
+        },
+    }, _e)));
+});
+var StartIcon = styled('div', { name: dropdownMenuListItemComponentName, slot: 'StartIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginRight: theme.spacing(1),
+        color: theme.tokens.color_fg_default,
+    });
+});
+var EndIcon = styled('div', { name: dropdownMenuListItemComponentName, slot: 'EndIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+        color: theme.tokens.color_fg_decorative,
+    });
+});
+var Content = styled('div', { name: dropdownMenuListItemComponentName, slot: 'Content' })({
+    flex: 1,
+    overflow: 'hidden',
+});
+var Title = styled('div', { name: dropdownMenuListItemComponentName, slot: 'Title' })(function (_a) {
+    var ownerState = _a.ownerState, theme = _a.theme;
+    return ({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontWeight: ownerState.isDetailed ? theme.typography.fontWeightMedium : undefined,
+    });
+});
+var Description = styled('div', { name: dropdownMenuListItemComponentName, slot: 'Description' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.tokens.color_fg_default,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    });
+});
+var SelectedIcon = styled('div', { name: dropdownMenuListItemComponentName, slot: 'SelectedIcon' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+        color: theme.tokens.color_fg_selected,
+    });
+});
+export var DropdownMenuListItem = React.forwardRef(function (props, ref) {
+    var _a = props.component, component = _a === void 0 ? 'button' : _a, title = props.title, children = props.children, description = props.description, startIcon = props.startIcon, endIcon = props.endIcon, className = props.className, selected = props.selected, color = props.color, disabled = props.disabled, propClasses = props.classes, rootProps = __rest(props, ["component", "title", "children", "description", "startIcon", "endIcon", "className", "selected", "color", "disabled", "classes"]);
+    var classes = useMergedClasses(dropdownMenuListItemClasses, getDropdownMenuListItemUtilityClass, propClasses);
+    var _b = useDropdownMenuContext(), size = _b.size, onSelectItem = _b.onSelectItem;
+    var isDetailed = !!description;
+    var titleContent = title || children;
+    var ComponentProp = component;
+    if (ComponentProp === 'button' && rootProps.href) {
+        ComponentProp = 'a';
+    }
+    var buttonProps = {};
+    if (ComponentProp === 'button') {
+        buttonProps.type = 'button';
+        buttonProps.disabled = disabled;
+    }
+    else {
+        if (ComponentProp !== 'a' || !rootProps.href) {
+            buttonProps.role = 'button';
+        }
+        buttonProps['aria-disabled'] = disabled;
+    }
+    var handleItemClick = function (event) {
+        onSelectItem();
+        if (rootProps.onClick) {
+            rootProps.onClick(event);
+        }
+    };
+    var ownerState = {
+        size: size,
+        isDetailed: isDetailed,
+        selected: selected,
+        color: color,
+        disabled: disabled,
+    };
+    return (React.createElement(Root, __assign({ selected: selected, onClick: handleItemClick, ownerState: ownerState, className: clsx(classes.root, isDetailed && classes.detailed, className), component: ComponentProp, disabled: disabled, ref: ref, title: typeof titleContent === 'string' ? titleContent : undefined }, rootProps, buttonProps),
+        !!startIcon && React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon) }, startIcon),
+        React.createElement(Content, { className: classes.content },
+            React.createElement(Title, { ownerState: { isDetailed: isDetailed }, className: classes.title }, titleContent),
+            !!description && React.createElement(Description, { className: classes.description }, description)),
+        !!endIcon && React.createElement(EndIcon, { className: clsx(classes.icon, classes.endIcon) }, endIcon),
+        !!selected && (React.createElement(SelectedIcon, { className: clsx(classes.icon, classes.selectedIcon) },
+            React.createElement(CheckIcon, null)))));
+});

package/esm/dropdown-menu/dropdown-menu-list-item/index.js

@@ -0,0 +1,2 @@
+export { DropdownMenuListItem } from './dropdown-menu-list-item';
+export { dropdownMenuListItemClasses } from './dropdown-menu-list-item-classes';

package/esm/dropdown-menu/dropdown-menu-search/dropdown-menu-search-classes.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var dropdownMenuSearchComponentName = 'QuantumDropdownMenuSearch';
+export function getDropdownMenuSearchUtilityClass(slot) {
+    return generateUtilityClass(dropdownMenuSearchComponentName, slot);
+}
+export var dropdownMenuSearchClasses = generateUtilityClasses(dropdownMenuSearchComponentName, ['root', 'input']);

package/esm/dropdown-menu/dropdown-menu-search/dropdown-menu-search.js

@@ -0,0 +1,48 @@
+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 { useDropdownMenuContext } from '../dropdown-menu-context';
+import { SearchIcon } from '../../icon';
+import { Input, InputAdornment } from '../../input';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { dropdownMenuSearchClasses, dropdownMenuSearchComponentName, getDropdownMenuSearchUtilityClass, } from './dropdown-menu-search-classes';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled('div', { name: dropdownMenuSearchComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(0, 0, 1),
+    });
+});
+export var DropdownMenuSearch = React.forwardRef(function (props, ref) {
+    var _a = props["aria-label"], ariaLabel = _a === void 0 ? 'Search' : _a, defaultValue = props.defaultValue, inputRef = props.inputRef, onBlur = props.onBlur, onChange = props.onChange, placeholder = props.placeholder, value = props.value, className = props.className, _b = props.InputProps, InputProps = _b === void 0 ? {} : _b, propClasses = props.classes, 
+    // MenuList adds this. We need to remove to avoid focus
+    rootProps = __rest(props, ['aria-label', "defaultValue", "inputRef", "onBlur", "onChange", "placeholder", "value", "className", "InputProps", "classes"]);
+    var classes = useMergedClasses(dropdownMenuSearchClasses, getDropdownMenuSearchUtilityClass, propClasses);
+    var size = useDropdownMenuContext().size;
+    return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), ownerState: { size: size } }, rootProps),
+        React.createElement(Input, __assign({ autoFocus: true, fullWidth: true, size: "small", "aria-label": ariaLabel, className: classes.input, defaultValue: defaultValue, inputRef: inputRef, onBlur: onBlur, onChange: onChange, placeholder: placeholder, value: value, inputProps: {
+                tabIndex: 1,
+            }, startAdornment: React.createElement(InputAdornment, { position: "start" },
+                React.createElement(SearchIcon, { size: "1em" })) }, InputProps))));
+});

package/esm/dropdown-menu/dropdown-menu-search/index.js

@@ -0,0 +1,2 @@
+export { DropdownMenuSearch } from './dropdown-menu-search';
+export { dropdownMenuSearchClasses } from './dropdown-menu-search-classes';

package/esm/dropdown-menu/dropdown-menu-state/dropdown-menu-state.js

@@ -0,0 +1,67 @@
+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 __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 * as React from 'react';
+import { useId } from '../../utils/use-id';
+export var useDropdownMenuState = function (_a) {
+    var propBaseId = _a.baseId;
+    var baseId = useId(propBaseId);
+    var triggerId = "".concat(baseId, "-trigger");
+    var menuId = "".concat(baseId, "-menu");
+    var _b = __read(React.useState(null), 2), anchorEl = _b[0], setAnchorEl = _b[1];
+    var handleTriggerClick = function (event) {
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    var handleMenuClose = function () { return setAnchorEl(null); };
+    var isOpen = !!anchorEl;
+    return {
+        triggerProps: {
+            onClick: handleTriggerClick,
+            id: triggerId,
+            'aria-controls': menuId,
+            'aria-haspopup': 'menu',
+            'aria-expanded': isOpen,
+        },
+        menuProps: {
+            anchorEl: anchorEl,
+            open: isOpen,
+            onClose: handleMenuClose,
+            id: menuId,
+        },
+    };
+};
+export var DropdownMenuStateContext = React.createContext({
+    triggerProps: { onClick: function () { return undefined; } },
+    menuProps: { open: false },
+});
+export var useDropdownMenuStateContext = function () { return React.useContext(DropdownMenuStateContext); };
+export var DropdownMenuStateProvider = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var state = useDropdownMenuState(props);
+    return (React.createElement(DropdownMenuStateContext.Provider, { value: state }, typeof children === 'function' ? children(state) : children));
+};

package/esm/dropdown-menu/dropdown-menu-state/index.js

@@ -0,0 +1 @@
+export { DropdownMenuStateContext, DropdownMenuStateProvider, useDropdownMenuState, useDropdownMenuStateContext, } from './dropdown-menu-state';

package/esm/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,60 @@
+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 { DropdownMenuList } from './dropdown-menu-list';
+import { Popover } from '../popover';
+import { styled } from '../styled';
+import clsx from '../utils/clsx';
+import { DropdownMenuContext } from './dropdown-menu-context';
+import { dropdownMenuClasses, dropdownMenuComponentName, getDropdownMenuUtilityClass, } from './dropdown-menu-classes';
+import { backdropClasses } from '../backdrop';
+import { useMergedClasses } from '../styles/classes';
+var Root = styled(Popover, { name: dropdownMenuComponentName, slot: 'Root' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (_b = {
+            marginTop: theme.spacing(0.5)
+        },
+        _b["& .".concat(dropdownMenuClasses.paper)] = __assign({ 
+            // taken from MUI's menu component
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: 8, border: "1px solid ".concat(theme.tokens.color_border_default), borderColor: theme.tokens.color_border_default, boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.07), 0px 13.7866px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 7.37098px 17.869px rgba(0, 0, 0, 0.0417275), 0px 4.13211px 10.0172px rgba(0, 0, 0, 0.035), 0px 2.19453px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 0.913195px 2.21381px rgba(0, 0, 0, 0.0196802)" }, (ownerState.size === 'large' && {
+            padding: theme.spacing(1.5),
+            minWidth: theme.typography.pxToRem(260),
+        })),
+        _b["& .".concat(backdropClasses.invisible)] = {
+            backgroundColor: 'transparent',
+        },
+        _b);
+});
+export var DropdownMenu = React.forwardRef(function (props, ref) {
+    var _a = props.size, size = _a === void 0 ? 'default' : _a, _b = props.placement, placement = _b === void 0 ? 'right' : _b, onClose = props.onClose, _c = props.closeOnSelect, closeOnSelect = _c === void 0 ? true : _c, items = props.items, maxHeight = props.maxHeight, maxWidth = props.maxWidth, children = props.children, className = props.className, _d = props.PaperProps, PaperProps = _d === void 0 ? {} : _d, propClasses = props.classes, rootProps = __rest(props, ["size", "placement", "onClose", "closeOnSelect", "items", "maxHeight", "maxWidth", "children", "className", "PaperProps", "classes"]);
+    var classes = useMergedClasses(dropdownMenuClasses, getDropdownMenuUtilityClass, propClasses);
+    var handleItemSelect = function () {
+        if (closeOnSelect && onClose) {
+            onClose({}, 'itemSelect');
+        }
+    };
+    return (React.createElement(DropdownMenuContext.Provider, { value: { size: size, onSelectItem: handleItemSelect } },
+        React.createElement(Root, __assign({ className: clsx(classes.root, className), ownerState: { size: size }, ref: ref, transitionDuration: "auto", onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: placement }, transformOrigin: { vertical: 'top', horizontal: placement }, BackdropProps: { invisible: true }, PaperProps: maxHeight || maxWidth
+                ? __assign(__assign({}, PaperProps), { style: { maxHeight: maxHeight, maxWidth: maxWidth }, className: classes.paper }) : __assign(__assign({}, PaperProps), { className: classes.paper }) }, rootProps), items ? React.createElement(DropdownMenuList, { items: items }) : children)));
+});

package/esm/dropdown-menu/index.js

@@ -0,0 +1,10 @@
+export { DropdownMenu } from './dropdown-menu';
+export { DropdownMenuContext, useDropdownMenuContext } from './dropdown-menu-context';
+export { dropdownMenuClasses } from './dropdown-menu-classes';
+export * from './dropdown-menu-divider';
+export * from './dropdown-menu-group';
+export * from './dropdown-menu-item';
+export * from './dropdown-menu-list';
+export * from './dropdown-menu-list-item';
+export * from './dropdown-menu-search';
+export * from './dropdown-menu-state';

package/esm/empty-state/empty-state-action/empty-state-action.js

@@ -0,0 +1,16 @@
+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);
+};
+import * as React from 'react';
+import { Button } from '../../button';
+export var EmptyStateAction = React.forwardRef(function (props, ref) {
+    return React.createElement(Button, __assign({ ref: ref, size: "large", variant: "contained", color: "primary" }, props));
+});

package/esm/empty-state/empty-state-action/index.js

@@ -0,0 +1 @@
+export { EmptyStateAction } from './empty-state-action';

package/esm/empty-state/empty-state-classes.js

@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var emptyStateComponentName = 'QuantumEmptyState';
+export function getEmptyStateUtilityClass(slot) {
+    return generateUtilityClass(emptyStateComponentName, slot);
+}
+export var emptyStateClasses = generateUtilityClasses(emptyStateComponentName, [
+    'root',
+    'card',
+    'pageHeader',
+    'subtitle',
+    'content',
+    'icon',
+    'message',
+    'actions',
+    'link',
+]);

package/esm/empty-state/empty-state.js

@@ -0,0 +1,115 @@
+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 { Card } from '../card';
+import { Link } from '../link';
+import { PageHeader } from '../page';
+import { RowLayout } from '../row-layout';
+import { styled } from '../styled';
+import { Text } from '../text';
+import { emptyStateClasses, emptyStateComponentName, getEmptyStateUtilityClass, } from './empty-state-classes';
+import { useMergedClasses } from '../styles/classes';
+import clsx from '../utils/clsx';
+export var Root = styled(RowLayout, {
+    name: emptyStateComponentName,
+    slot: 'Root',
+})({});
+export var StyledCard = styled(Card, {
+    name: emptyStateComponentName,
+    slot: 'Card',
+})({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+});
+export var Subtitle = styled(Text, {
+    name: emptyStateComponentName,
+    slot: 'Subtitle',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBottom: theme.spacing(1),
+    });
+});
+export var Content = styled(RowLayout, {
+    name: emptyStateComponentName,
+    slot: 'Content',
+})({
+    maxWidth: 500,
+    margin: '0 auto',
+});
+export var Actions = styled('div', {
+    name: emptyStateComponentName,
+    slot: 'Actions',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& > :not(:last-child)': {
+            marginRight: theme.spacing(2),
+        },
+    });
+});
+export var Icon = styled('div', {
+    name: emptyStateComponentName,
+    slot: 'Icon',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBottom: theme.spacing(2),
+        color: theme.tokens.color_fg_brand_primary_subtle,
+        '& > svg': {
+            fontSize: theme.typography.pxToRem(180),
+            height: '1em',
+            width: '1em',
+        },
+    });
+});
+export var Message = styled(Text)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginBottom: theme.spacing(1),
+    });
+});
+export var EmptyState = React.forwardRef(function (props, ref) {
+    var actions = props.actions, breadcrumbs = props.breadcrumbs, children = props.children, className = props.className, icon = props.icon, message = props.message, _a = props.PageHeaderProps, PageHeaderProps = _a === void 0 ? {} : _a, title = props.title, subtitle = props.subtitle, _b = props.messageTypographyProps, messageTypographyProps = _b === void 0 ? {} : _b, _c = props.titleTypographyProps, titleTypographyProps = _c === void 0 ? {} : _c, _d = props.subtitleTypographyProps, subtitleTypographyProps = _d === void 0 ? {} : _d, link = props.link, rootProps = __rest(props, ["actions", "breadcrumbs", "children", "className", "icon", "message", "PageHeaderProps", "title", "subtitle", "messageTypographyProps", "titleTypographyProps", "subtitleTypographyProps", "link"]);
+    var classes = useMergedClasses(emptyStateClasses, getEmptyStateUtilityClass, props.classes);
+    var linkProps = typeof link === 'string'
+        ? {
+            href: link,
+            target: '_blank',
+        }
+        : link;
+    return (React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), gutter: 5 }, rootProps),
+        (!!title || !!PageHeaderProps.title) && (React.createElement(PageHeader, __assign({}, PageHeaderProps, { className: classes.pageHeader, title: title || PageHeaderProps.title, titleTypographyProps: titleTypographyProps, breadcrumbs: breadcrumbs }))),
+        React.createElement(StyledCard, { size: "xlarge", className: classes.card },
+            React.createElement(Icon, { className: classes.icon }, icon),
+            !!subtitle && (React.createElement(Subtitle, __assign({ variant: "h4", className: classes.subtitle }, subtitleTypographyProps), subtitle)),
+            React.createElement(Content, { className: classes.content, gutter: 2 },
+                React.createElement(Message, __assign({ variant: "body2", color: "textSecondary", className: classes.message }, messageTypographyProps), message || children),
+                !!actions && React.createElement(Actions, { className: classes.actions }, actions),
+                !!linkProps && (React.createElement(Link, __assign({ className: classes.link, variant: "inherit" }, linkProps), linkProps.children || 'Learn More'))))));
+});

package/esm/empty-state/index.js

@@ -0,0 +1,3 @@
+export { EmptyState } from './empty-state';
+export { emptyStateClasses } from './empty-state-classes';
+export * from './empty-state-action';

package/esm/expansion-panel/expansion-panel-details.js

@@ -0,0 +1,15 @@
+import AccordionDetails from '@mui/material/AccordionDetails';
+import { styled } from '../styled';
+var expansionPanelDetailsComponentName = 'QuantumExpansionPanelDetails';
+export var ExpansionPanelDetails = styled(AccordionDetails, {
+    name: expansionPanelDetailsComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return {
+        display: 'flex',
+        padding: 0,
+        marginTop: theme.spacing(3),
+        flexDirection: 'column',
+    };
+});

package/esm/expansion-panel/expansion-panel-header.js

@@ -0,0 +1,5 @@
+import { CardHeader } from '../card';
+import { styled } from '../styled';
+export var ExpansionPanelHeader = styled(CardHeader, { name: 'QuantumExpansionPanelHeader' })({
+    margin: 0,
+});