@auth0/quantum-product 1.5.1

package/esm/selectable-card/selectable-card-group/selectable-card-group.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 { FormField } from '../../form';
+import { RadioGroup as RadioGroupBase } from '../../radio';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { getSelectableCardGroupUtilityClass, selectableCardGroupComponentName, selectableCardGroupClasses, } from './selectable-card-group-classes';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled(FormField, { name: selectableCardGroupComponentName, slot: 'Root' })({});
+var RadioGroup = styled(RadioGroupBase, { name: selectableCardGroupComponentName, slot: 'RadioGroup' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        display: 'grid',
+        gridTemplateColumns: ownerState.orientation === 'vertical' ? '1fr' : 'repeat(auto-fit, minmax(175px, 1fr))',
+        gridGap: theme.spacing(1),
+    });
+});
+export var SelectableCardGroup = React.forwardRef(function (props, ref) {
+    var onChange = props.onChange, value = props.value, name = props.name, children = props.children, className = props.className, _a = props.component, component = _a === void 0 ? 'fieldset' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, RadioGroupProps = props.RadioGroupProps, InputLabelProps = props.InputLabelProps, 
+    // remove to prevent passing through to the root
+    propClasses = props.classes, rootProps = __rest(props, ["onChange", "value", "name", "children", "className", "component", "orientation", "RadioGroupProps", "InputLabelProps", "classes"]);
+    var classes = useMergedClasses(selectableCardGroupClasses, getSelectableCardGroupUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ fullWidth: true, className: clsx(classes.root, className), ref: ref, component: component }, rootProps, { InputLabelProps: __assign({ component: 'legend' }, InputLabelProps) }),
+        React.createElement(RadioGroup, __assign({ className: classes.radioGroup, ownerState: { orientation: orientation }, onChange: onChange, value: value, name: name }, RadioGroupProps), children)));
+});

package/esm/selectable-card/selectable-card.js

@@ -0,0 +1,71 @@
+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, CardHeader } from '../card';
+import { Checkbox } from '../checkbox';
+import { Radio, useRadioGroup } from '../radio';
+import { styled } from '../styled';
+import { getSelectableCardUtilityClass, selectableCardComponentName, selectableCardClasses, } from './selectable-card-classes';
+import { useMergedClasses } from '../styles/classes';
+import clsx from '../utils/clsx';
+var Root = styled(Card, { name: selectableCardComponentName, slot: 'Root' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        gap: theme.spacing(2),
+        alignItems: 'flex-start',
+    });
+});
+var createControl = function (ControlComponent, slot) {
+    return styled(ControlComponent, { name: selectableCardComponentName, slot: slot })(function (_a) {
+        var theme = _a.theme, ownerState = _a.ownerState;
+        return (__assign({ marginTop: theme.spacing(0.5), marginLeft: 0, paddingTop: 0, paddingBottom: 0, paddingLeft: 0, alignItems: 'flex-start', marginRight: theme.spacing(0) }, (ownerState.hidden && {
+            opacity: 0,
+            position: 'absolute',
+        })));
+    });
+};
+var ControlRadio = createControl(Radio, 'ControlRadio');
+var ControlCheckbox = createControl(Checkbox, 'ControlCheckbox');
+var Content = styled('div', { name: selectableCardComponentName, slot: 'Content' })({
+    flex: 1,
+});
+export var SelectableCard = React.forwardRef(function (props, ref) {
+    var avatar = props.avatar, label = props.label, propTitle = props.title, propDescription = props.description, helperText = props.helperText, value = props.value, disabled = props.disabled, name = props.name, onChange = props.onChange, checkedProp = props.checked, RadioProps = props.RadioProps, CheckboxProps = props.CheckboxProps, _a = props.controlPlacement, controlPlacement = _a === void 0 ? 'start' : _a, _b = props.size, size = _b === void 0 ? 'medium' : _b, type = props.type, _c = props.hideControl, hideControl = _c === void 0 ? false : _c, children = props.children, className = props.className, propClasses = props.classes, rootProps = __rest(props, ["avatar", "label", "title", "description", "helperText", "value", "disabled", "name", "onChange", "checked", "RadioProps", "CheckboxProps", "controlPlacement", "size", "type", "hideControl", "children", "className", "classes"]);
+    var inputRef = React.createRef();
+    var radioGroup = useRadioGroup();
+    var classes = useMergedClasses(selectableCardClasses, getSelectableCardUtilityClass, propClasses);
+    var title = propTitle || label;
+    var description = propDescription || helperText;
+    var checked = checkedProp;
+    if (radioGroup && checked == null) {
+        checked = radioGroup.value === value;
+    }
+    var content = children || React.createElement(CardHeader, { avatar: avatar, title: title, subheader: description });
+    var Control = type === 'radio' ? ControlRadio : ControlCheckbox;
+    var control = (React.createElement(Control, __assign({ value: value, inputRef: inputRef, onChange: onChange, disabled: disabled, className: type === 'radio' ? classes.controlRadio : classes.controlCheckbox, ownerState: { hidden: hideControl }, checked: checked }, (type === 'radio' ? RadioProps : CheckboxProps))));
+    return (React.createElement(Root, __assign({}, { ref: ref }, { size: size, selected: checked, disabled: disabled, button: true, className: clsx(classes.root, className), component: "label" }, rootProps),
+        controlPlacement === 'start' && control,
+        React.createElement(Content, null, content),
+        controlPlacement === 'end' && control));
+});

package/esm/sidebar/index.js

@@ -0,0 +1,7 @@
+export { Sidebar } from './sidebar';
+export { sidebarClasses } from './sidebar-classes';
+export { useSidebarContext } from './sidebar-context';
+export * from './sidebar-banner';
+export * from './sidebar-items';
+export * from './sidebar-link';
+export * from './sidebar-menu';

package/esm/sidebar/sidebar-banner/index.js

@@ -0,0 +1 @@
+export { SidebarBanner } from './sidebar-banner';

package/esm/sidebar/sidebar-banner/sidebar-banner.js

@@ -0,0 +1,41 @@
+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 { useSidebarContext } from '../sidebar-context';
+import { useTheme } from '../../theme/use-theme';
+import { styled } from '../../styled';
+import { Fade } from '../../transitions';
+export var sidebarBannerComponentName = 'QuantumSidebarBanner';
+var Root = styled('div', { name: sidebarBannerComponentName })(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, theme.typography.caption), { padding: theme.spacing(1.5, 2), margin: theme.spacing(2, 0), borderRadius: 6, backgroundColor: theme.tokens.color_bg_layer_alternate, color: theme.tokens.color_fg_default }));
+});
+export var SidebarBanner = React.forwardRef(function (props, ref) {
+    var children = props.children, _a = props.FadeProps, FadeProps = _a === void 0 ? {} : _a, rootProps = __rest(props, ["children", "FadeProps"]);
+    var theme = useTheme();
+    var sidebarCollapsed = useSidebarContext().collapsed;
+    return (React.createElement(Fade, __assign({ in: !sidebarCollapsed, style: {
+            transitionDelay: !sidebarCollapsed ? "".concat(theme.transitions.duration.enteringScreen * 1.5, "ms") : undefined,
+        }, timeout: { enter: theme.transitions.duration.enteringScreen, exit: 0 }, unmountOnExit: true }, FadeProps),
+        React.createElement(Root, __assign({ ref: ref }, rootProps), children)));
+});

package/esm/sidebar/sidebar-classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from '../styles/classes';
+export var sidebarComponentName = 'QuantumSidebar';
+export function getSidebarUtilityClass(slot) {
+    return generateUtilityClass(sidebarComponentName, slot);
+}
+export var sidebarClasses = generateUtilityClasses(sidebarComponentName, [
+    'root',
+    'paper',
+    'paperHovered',
+    'paperCollapsed',
+]);

package/esm/sidebar/sidebar-context.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export var SidebarContext = React.createContext({
+    expanded: true,
+    onCollapseChange: function () { return void 0; },
+    collapsed: false,
+});
+export var useSidebarContext = function () { return React.useContext(SidebarContext); };

package/esm/sidebar/sidebar-items/index.js

@@ -0,0 +1 @@
+export { SidebarItems } from './sidebar-items';

package/esm/sidebar/sidebar-items/sidebar-items.js

@@ -0,0 +1,34 @@
+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';
+export var sidebarItemsComponentName = 'QuantumSidebarItems';
+var Root = styled('ul', { name: sidebarItemsComponentName })({
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+});
+export var SidebarItems = React.forwardRef(function (props, ref) {
+    var children = props.children, rootProps = __rest(props, ["children"]);
+    return (React.createElement(Root, __assign({ ref: ref }, rootProps), children));
+});

package/esm/sidebar/sidebar-link/index.js

@@ -0,0 +1,2 @@
+export { SidebarLink } from './sidebar-link';
+export { sidebarLinkClasses } from './sidebar-link-classes';

package/esm/sidebar/sidebar-link/sidebar-link-classes.js

@@ -0,0 +1,15 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var sidebarLinkComponentName = 'QuantumSidebarLink';
+export function getSidebarLinkUtilityClass(slot) {
+    return generateUtilityClass(sidebarLinkComponentName, slot);
+}
+export var sidebarLinkClasses = generateUtilityClasses(sidebarLinkComponentName, [
+    'root',
+    'icon',
+    'startIcon',
+    'endIcon',
+    'link',
+    'title',
+    'availabilityLabel',
+    'decoration',
+]);

package/esm/sidebar/sidebar-link/sidebar-link.js

@@ -0,0 +1,148 @@
+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 { getIdenticonsVariableOverrides } from '../../identicons';
+import { Label } from '../../label';
+import { useSidebarContext } from '../sidebar-context';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { getSidebarLinkUtilityClass, sidebarLinkComponentName, sidebarLinkClasses, } from './sidebar-link-classes';
+import { useMergedClasses } from '../../styles/classes';
+import { useMediaQuery } from '../../use-media-query';
+import { useTheme } from '../../theme/use-theme';
+var Root = styled('li', { name: sidebarLinkComponentName })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (_b = {},
+        _b["& .".concat(sidebarLinkClasses.title, ",& .").concat(sidebarLinkClasses.availabilityLabel, ",& .").concat(sidebarLinkClasses.decoration, ",& .").concat(sidebarLinkClasses.endIcon)] = __assign({}, (ownerState.collapsed
+            ? {
+                opacity: 0,
+                transition: theme.transitions.create('opacity', {
+                    easing: theme.transitions.easing.easeIn,
+                    duration: theme.transitions.duration.leavingScreen,
+                    delay: 0,
+                }),
+            }
+            : {
+                opacity: 1,
+                willChange: 'opacity',
+                transition: theme.transitions.create('opacity', {
+                    easing: theme.transitions.easing.easeIn,
+                    duration: theme.transitions.duration.enteringScreen,
+                    delay: theme.transitions.duration.enteringScreen / 2,
+                }),
+            })),
+        _b);
+});
+var getIconStyles = function (theme) { return ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    '& > svg': {
+        width: '1em',
+        height: '1em',
+        transition: theme.transitions.create(['fill', 'transform'], { duration: theme.transitions.duration.short }),
+    },
+}); };
+var StartIcon = styled('span', { name: sidebarLinkComponentName, slot: 'StartIcon' })(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, getIconStyles(theme)), { width: theme.typography.pxToRem(20), fontSize: theme.typography.pxToRem(20) }));
+});
+var EndIcon = styled('span', { name: sidebarLinkComponentName, slot: 'EndIcon' })(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({}, getIconStyles(theme)), { marginLeft: 'auto', color: theme.tokens.color_fg_decorative }));
+});
+var Link = styled('a', { name: sidebarLinkComponentName, slot: 'Link' })(function (_a) {
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign(__assign(__assign(__assign(__assign(__assign({ fontWeight: theme.typography.fontWeightMedium, padding: theme.spacing(1) }, (ownerState.variant === 'primary' && __assign(__assign({}, theme.typography.body2), { fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.pxToRem(20), color: theme.tokens.color_fg_link }))), (ownerState.variant === 'secondary' && __assign(__assign({}, theme.typography.caption), (_b = { lineHeight: theme.typography.pxToRem(22.4), color: theme.tokens.color_fg_link_subtle, paddingTop: theme.spacing(0.5), paddingBottom: theme.spacing(0.5) }, _b["& .".concat(sidebarLinkClasses.startIcon)] = {
+        fontSize: theme.typography.pxToRem(16),
+    }, _b)))), { borderRadius: theme.shape.borderRadius, textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center', cursor: 'pointer', background: 'transparent', border: 'none', transition: theme.transitions.create(['color'], { duration: theme.transitions.duration.shortest }) }), getIdenticonsVariableOverrides('default', theme)), (ownerState.isActive && __assign({ color: theme.tokens.color_fg_selected }, getIdenticonsVariableOverrides('primary', theme)))), { '&:hover': __assign({ color: theme.tokens.color_fg_selected, textDecoration: 'none' }, getIdenticonsVariableOverrides('primary', theme)), '&:focus-visible': __assign({ outline: 'none' }, theme.mixins.focusRing()) }));
+});
+var Title = styled('span', { name: sidebarLinkComponentName, slot: 'Title' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        marginLeft: theme.spacing(1.25),
+        minWidth: theme.typography.pxToRem(32),
+    });
+});
+var AvailabilityLabel = styled(Label, { name: sidebarLinkComponentName, slot: 'AvailabilityLabel' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
+var Decoration = styled('span', { name: sidebarLinkComponentName, slot: 'Decoration' })(function (_a) {
+    var theme = _a.theme;
+    return ({
+        marginLeft: theme.spacing(1),
+    });
+});
+var getFeatureAvailabilityLabelProps = function (featureAvailability) {
+    var labelProps = {
+        color: 'primary',
+        variant: 'default',
+    };
+    switch (featureAvailability) {
+        case 'beta':
+            labelProps.children = 'Beta';
+            break;
+        // First Availability has been replaced by Early Access
+        case 'first':
+        case 'early':
+            labelProps.children = 'Early';
+            break;
+        case 'new':
+            labelProps.variant = 'filled';
+            labelProps.children = 'New';
+            break;
+    }
+    return labelProps;
+};
+export var SidebarLink = React.forwardRef(function (props, ref) {
+    var title = props.title, startIcon = props.startIcon, endIcon = props.endIcon, featureAvailability = props.featureAvailability, className = props.className, decoration = props.decoration, titleId = props.titleId, _a = props.isActive, isActive = _a === void 0 ? false : _a, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.component, LinkComponent = _c === void 0 ? 'a' : _c, propClasses = props.classes, children = props.children, sx = props.sx, propOnClick = props.onClick, _d = props.shouldCollapseSidebarOnClick, shouldCollapseSidebarOnClick = _d === void 0 ? true : _d, linkProps = __rest(props, ["title", "startIcon", "endIcon", "featureAvailability", "className", "decoration", "titleId", "isActive", "variant", "component", "classes", "children", "sx", "onClick", "shouldCollapseSidebarOnClick"]);
+    var theme = useTheme();
+    var isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+    var sidebarCtx = useSidebarContext();
+    var classes = useMergedClasses(sidebarLinkClasses, getSidebarLinkUtilityClass, propClasses);
+    var handleClick = function (event) {
+        if (propOnClick) {
+            propOnClick(event);
+        }
+        if (!isLargeScreen && !sidebarCtx.collapsed && shouldCollapseSidebarOnClick) {
+            sidebarCtx.onCollapseChange();
+        }
+    };
+    return (React.createElement(Root, { ownerState: { collapsed: sidebarCtx.collapsed }, className: clsx(classes.root, className), sx: sx },
+        React.createElement(Link, __assign({ ref: ref, as: LinkComponent, title: typeof title === 'string' ? title : undefined, ownerState: { isActive: isActive, variant: variant }, className: classes.link, "aria-current": isActive ? 'page' : undefined, onClick: handleClick }, linkProps),
+            React.createElement(StartIcon, { className: clsx(classes.icon, classes.startIcon) }, startIcon),
+            React.createElement(Title, { id: titleId, className: sidebarLinkClasses.title }, title),
+            !!featureAvailability && (React.createElement(AvailabilityLabel, __assign({ className: classes.availabilityLabel }, getFeatureAvailabilityLabelProps(featureAvailability)))),
+            !!decoration && React.createElement(Decoration, { className: classes.decoration }, decoration),
+            !!endIcon && React.createElement(EndIcon, { className: clsx(classes.icon, classes.endIcon) }, endIcon)),
+        children));
+});

package/esm/sidebar/sidebar-menu/index.js

@@ -0,0 +1,2 @@
+export { SidebarMenu } from './sidebar-menu';
+export { sidebarMenuClasses } from './sidebar-menu-classes';

package/esm/sidebar/sidebar-menu/sidebar-menu-classes.js

@@ -0,0 +1,12 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var sidebarMenuComponentName = 'QuantumSidebarMenu';
+export function getSidebarMenuUtilityClass(slot) {
+    return generateUtilityClass(sidebarMenuComponentName, slot);
+}
+export var sidebarMenuClasses = generateUtilityClasses(sidebarMenuComponentName, [
+    'root',
+    'icon',
+    'iconExpanded',
+    'region',
+    'items',
+]);

package/esm/sidebar/sidebar-menu/sidebar-menu.js

@@ -0,0 +1,106 @@
+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;
+};
+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 { Collapse } from '../../collapse';
+import { ChevronRightIcon } from '../../icon';
+import { useSidebarContext } from '../sidebar-context';
+import { SidebarLink } from '../sidebar-link';
+import { styled } from '../../styled';
+import clsx from '../../utils/clsx';
+import { useControlled } from '../../utils/use-controlled';
+import { useId } from '../../utils/use-id';
+import { getSidebarMenuUtilityClass, sidebarMenuComponentName, sidebarMenuClasses, } from './sidebar-menu-classes';
+import { useMergedClasses } from '../../styles/classes';
+var Root = styled(SidebarLink, { name: sidebarMenuComponentName, slot: 'Root' })({});
+var Items = styled('ul', { name: sidebarMenuComponentName, slot: 'Items' })({
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+});
+var Icon = styled(ChevronRightIcon, { name: sidebarMenuComponentName, slot: 'Icon' })(function (_a) {
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return ({
+        marginLeft: theme.spacing(1),
+        transition: theme.transitions.create(['transform'], { duration: theme.transitions.duration.shortest }),
+        transform: ownerState.expanded ? 'rotate(90deg)' : undefined,
+    });
+});
+// const useUtilityClasses = ({ classes, expanded }: ISidebarMenuProps<any> & { expanded?: boolean }) => {
+//   const slots = {
+//     root: ["root"],
+//     icon: ["icon", expanded && "iconExpanded"],
+//     region: ["region"],
+//     items: ["items"],
+//   };
+//   return composeClasses(slots, getSidebarMenuUtilityClass, classes as SidebarMenuClasses);
+// };
+export function SidebarMenuImpl(props, ref) {
+    var sidebarCollapsed = useSidebarContext().collapsed;
+    var className = props.className, propId = props.id, propClasses = props.classes, propIsExpanded = props.isExpanded, onExpandChange = props.onExpandChange, items = props.items, children = props.children, _a = props.defaultIsExpanded, defaultIsExpanded = _a === void 0 ? false : _a, rootProps = __rest(props, ["className", "id", "classes", "isExpanded", "onExpandChange", "items", "children", "defaultIsExpanded"]);
+    var sidebarCtx = useSidebarContext();
+    var id = useId(propId);
+    var classes = useMergedClasses(sidebarMenuClasses, getSidebarMenuUtilityClass, propClasses);
+    var titleId = "".concat(id, "-title");
+    var accordionId = "".concat(id, "-accordion");
+    var _b = __read(useControlled({
+        controlled: propIsExpanded,
+        default: defaultIsExpanded,
+        name: 'SidebarMenuExpanded',
+    }), 2), isExpanded = _b[0], setIsExpanded = _b[1];
+    var isExpandedFinal = !sidebarCollapsed && isExpanded;
+    var handleExpandChange = function () {
+        var newValue = !isExpanded;
+        setIsExpanded(newValue);
+        if (onExpandChange) {
+            onExpandChange(newValue);
+        }
+        // open sidebar if we need to expand and sidebar is collapsed.
+        if (newValue && sidebarCtx.collapsed) {
+            sidebarCtx.onCollapseChange();
+        }
+    };
+    return (React.createElement(Root, __assign({}, rootProps, { id: id, ref: ref }, { component: 'button' }, { className: clsx(classes.root, className), "aria-current": undefined, onClick: handleExpandChange, titleId: titleId, endIcon: React.createElement(Icon, { ownerState: { expanded: isExpandedFinal }, className: clsx(classes.icon, isExpandedFinal && classes.iconExpanded) }), shouldCollapseSidebarOnClick: false, "aria-expanded": isExpandedFinal, "aria-controls": accordionId }),
+        React.createElement(Collapse, { in: isExpandedFinal },
+            React.createElement("div", { className: classes.region, role: "region", id: accordionId, "aria-labelledby": titleId },
+                React.createElement(Items, { className: classes.items }, items
+                    ? items.map(function (itemProps, i) { return React.createElement(SidebarLink, __assign({ key: i }, itemProps, { variant: "secondary", startIcon: null })); })
+                    : children))),
+        !!items && children));
+}
+export var SidebarMenu = React.forwardRef(SidebarMenuImpl);