@auth0/quantum-product 2.10.8 → 2.12.0

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

@@ -70,7 +70,7 @@ var classes_1 = require("../../styles/classes");
 var Root = (0, styled_1.styled)(menu_1.MenuItem, { name: dropdown_menu_list_item_classes_1.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'], {
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(4), height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(0.5), transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
             duration: theme.transitions.duration.shortest,
         }), '&:active,&:hover': {
             color: theme.tokens.color_fg_link_subtle_hover,
@@ -97,6 +97,7 @@ var Root = (0, styled_1.styled)(menu_1.MenuItem, { name: dropdown_menu_list_item
             opacity: 1,
             color: theme.tokens.color_fg_disabled,
         } }), (ownerState.size === 'large' && {
+        minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(5),
         padding: theme.spacing(0.75, 1.5),
     })), (ownerState.color === 'danger' && (_b = {
             color: theme.tokens.color_fg_link_danger

package/dropdown-menu/dropdown-menu.js

@@ -76,7 +76,7 @@ var Root = (0, styled_1.styled)(popover_1.Popover, { name: dropdown_menu_classes
         },
         _b["& .".concat(dropdown_menu_classes_1.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' && {
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: theme.spacing(1.25), 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),
         })),

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

@@ -31,7 +31,7 @@ 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'], {
+    return (__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, theme.typography.caption), { fontWeight: theme.typography.fontWeightRegular, color: theme.tokens.color_fg_link_subtle, minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(4), height: 'auto', display: 'flex', alignItems: 'center', width: '100%', padding: theme.spacing(0.5, 1), borderRadius: theme.spacing(0.5), transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
             duration: theme.transitions.duration.shortest,
         }), '&:active,&:hover': {
             color: theme.tokens.color_fg_link_subtle_hover,
@@ -58,6 +58,7 @@ var Root = styled(MenuItem, { name: dropdownMenuListItemComponentName, slot: 'Ro
             opacity: 1,
             color: theme.tokens.color_fg_disabled,
         } }), (ownerState.size === 'large' && {
+        minHeight: ownerState.isDetailed ? 'auto' : theme.spacing(5),
         padding: theme.spacing(0.75, 1.5),
     })), (ownerState.color === 'danger' && (_b = {
             color: theme.tokens.color_fg_link_danger

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

@@ -37,7 +37,7 @@ var Root = styled(Popover, { name: dropdownMenuComponentName, slot: 'Root' })(fu
         },
         _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' && {
+            maxHeight: 'calc(100% - 96px)', minWidth: theme.typography.pxToRem(180), WebkitOverflowScrolling: 'touch', padding: theme.spacing(1), borderRadius: theme.spacing(1.25), 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),
         })),

package/esm/label/label.js

@@ -35,6 +35,12 @@ var getReleaseStageLabelProps = function (productReleaseStage, productReleaseSta
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'New';
             labelProps.color = 'primary';
             break;
+        case 'developerPreview':
+            labelProps.color = 'primary';
+            productReleaseStageAbbr
+                ? (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Preview')
+                : (labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Developer Preview');
+            break;
         case 'beta':
             labelProps.children = productReleaseStageLabel !== null && productReleaseStageLabel !== void 0 ? productReleaseStageLabel : 'Beta';
             labelProps.color = 'primary';

package/esm/switch/switch-classes.js

@@ -3,4 +3,4 @@ export var switchComponentName = 'QuantumSwitch';
 export function getSwitchUtilityClass(slot) {
     return generateUtilityClass(switchComponentName, slot);
 }
-export var switchClasses = generateUtilityClasses(switchComponentName, ['switch', 'formControlLabel']);
+export var switchClasses = generateUtilityClasses(switchComponentName, ['switch', 'formControlLabel', 'pressing']);

package/esm/switch/switch-overrides.js

@@ -10,82 +10,160 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { switchClasses } from '@mui/material/Switch';
-var SWITCH_DIMENSIONS = {
-    heightPx: 24,
-    widthPx: 44,
-    thumbSizePx: 16,
+import { switchClasses as quantumSwitchClasses } from './switch-classes';
+var SWITCH_DIMENSIONS_BY_SIZE = {
+    medium: {
+        heightPx: 24,
+        widthPx: 40,
+        thumbSizePx: 22,
+        thumbActiveWidthPx: 28,
+        thumbEndPositionPx: 16,
+    },
+    small: {
+        heightPx: 20,
+        widthPx: 32,
+        thumbSizePx: 18,
+        thumbActiveWidthPx: 26,
+        thumbEndPositionPx: 12,
+    },
+};
+var getSwitchSizeStyles = function (size, pxToRem) {
+    var _a, _b, _c;
+    var dimensions = SWITCH_DIMENSIONS_BY_SIZE[size];
+    var thumbActiveExtensionPx = dimensions.thumbActiveWidthPx - dimensions.thumbSizePx;
+    return _a = {
+            width: pxToRem(dimensions.widthPx),
+            height: pxToRem(dimensions.heightPx),
+            '&:active': (_b = {},
+                _b["& .".concat(switchClasses.switchBase, ":not(.").concat(switchClasses.checked, "):not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
+                    insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
+                },
+                _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked, ":not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
+                    insetInlineStart: pxToRem(-thumbActiveExtensionPx),
+                },
+                _b)
+        },
+        _a["&.".concat(quantumSwitchClasses.pressing)] = (_c = {},
+            _c["& .".concat(switchClasses.switchBase, ":not(.").concat(switchClasses.checked, "):not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
+                insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
+            },
+            _c["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked, ":not(.").concat(switchClasses.disabled, ") .").concat(switchClasses.thumb, "::before")] = {
+                insetInlineStart: pxToRem(-thumbActiveExtensionPx),
+            },
+            _c),
+        _a["& .".concat(switchClasses.track)] = {
+            borderRadius: pxToRem(dimensions.heightPx * 2),
+        },
+        _a["& .".concat(switchClasses.switchBase)] = {
+            padding: pxToRem((dimensions.heightPx - dimensions.thumbSizePx) / 2),
+        },
+        _a["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.checked)] = {
+            transform: "translateX(".concat(pxToRem(dimensions.thumbEndPositionPx), ")"),
+        },
+        _a["& .".concat(switchClasses.thumb)] = {
+            height: pxToRem(dimensions.thumbSizePx),
+            width: pxToRem(dimensions.thumbSizePx),
+            borderRadius: pxToRem(dimensions.thumbSizePx),
+        },
+        _a["& .".concat(switchClasses.thumb, "::before")] = {
+            borderRadius: pxToRem(dimensions.thumbSizePx),
+        },
+        _a;
 };
 export var createMuiSwitchOverrides = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var typography = _a.typography, tokens = _a.tokens, mixins = _a.mixins;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var typography = _a.typography, tokens = _a.tokens, transitions = _a.transitions, mixins = _a.mixins;
     return {
         defaultProps: {
             color: 'primary',
             size: 'medium',
         },
         styleOverrides: {
-            root: {
-                width: typography.pxToRem(SWITCH_DIMENSIONS.widthPx),
-                height: typography.pxToRem(SWITCH_DIMENSIONS.heightPx),
-                padding: 0,
-                overflow: 'visible',
-                '&:focus-within,&.Mui-focused': (_b = {},
-                    _b["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
-                    _b),
-            },
-            colorPrimary: (_c = {
+            root: __assign(__assign({ padding: 0, overflow: 'visible' }, getSwitchSizeStyles('medium', typography.pxToRem)), (_b = {}, _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.disabled)] = {
+                cursor: 'not-allowed',
+            }, _b["& .".concat(switchClasses.switchBase, ".").concat(switchClasses.disabled, " + .").concat(switchClasses.track)] = {
+                cursor: 'not-allowed',
+            }, _b['&:focus-within,&.Mui-focused'] = (_c = {},
+                _c["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
+                _c), _b)),
+            colorPrimary: (_d = {
                     color: tokens.color_bg_layer
                 },
-                _c["&.".concat(switchClasses.checked)] = (_d = {
+                _d["&.".concat(switchClasses.checked)] = (_e = {
                         color: tokens.color_bg_layer
                     },
-                    _d["& + .".concat(switchClasses.track)] = {
+                    _e["& + .".concat(switchClasses.track)] = {
                         backgroundColor: tokens.color_bg_switch_on,
                     },
-                    _d["&.".concat(switchClasses.disabled)] = (_e = {
+                    _e["&.".concat(switchClasses.disabled)] = (_f = {
                             color: tokens.color_bg_layer
                         },
-                        _e["& + .".concat(switchClasses.track)] = {
+                        _f["& + .".concat(switchClasses.track)] = {
                             backgroundColor: tokens.color_bg_switch_on_disabled,
                         },
-                        _e),
-                    _d),
-                _c["&.".concat(switchClasses.disabled)] = (_f = {
+                        _f),
+                    _e),
+                _d["&.".concat(switchClasses.disabled)] = (_g = {
                         color: tokens.color_bg_layer
                     },
-                    _f["& + .".concat(switchClasses.track)] = {
+                    _g["& + .".concat(switchClasses.track)] = {
                         opacity: 1,
                         backgroundColor: tokens.color_bg_disabled,
                     },
-                    _f),
-                _c),
+                    _g),
+                _d),
             track: {
                 opacity: 1,
-                backgroundColor: tokens.color_bg_layer_bold,
-                borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.heightPx * 2),
+                backgroundColor: tokens.color_bg_layer_alternate_bold,
+                boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_border_default), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
+                transition: transitions.create(['background-color', 'box-shadow'], {
+                    duration: transitions.duration.shorter,
+                    easing: transitions.easing.easeOut,
+                }),
             },
-            switchBase: (_g = {
+            switchBase: (_h = {
                     borderRadius: '50%',
-                    padding: typography.pxToRem((SWITCH_DIMENSIONS.heightPx - SWITCH_DIMENSIONS.thumbSizePx) / 2),
                     height: 'unset',
-                    width: 'unset'
+                    width: 'unset',
+                    transition: transitions.create(['transform'], {
+                        duration: transitions.duration.shorter,
+                        easing: 'cubic-bezier(0, 0, 0.2, 1)',
+                    })
                 },
-                _g["&.".concat(switchClasses.checked)] = (_h = {
-                        transform: "translateX(".concat(typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx + 4), ")")
-                    },
-                    _h["& + .".concat(switchClasses.track)] = {
+                _h["&.".concat(switchClasses.checked)] = (_j = {},
+                    _j["& + .".concat(switchClasses.track)] = {
                         opacity: 1,
+                        boxShadow: "".concat(mixins.borderAsBoxShadow(tokens.color_fg_state_success), ", 0 1px 2px rgba(0, 0, 0, 0.08) inset"),
                     },
-                    _h),
-                _g["&.".concat(switchClasses.disabled, ",&:hover,&:active")] = {
+                    _j),
+                _h["&.".concat(switchClasses.disabled, ",&:hover,&:active")] = {
                     backgroundColor: 'transparent',
                 },
-                _g),
+                _h),
             thumb: {
-                height: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
-                width: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
-                borderRadius: typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx),
+                position: 'relative',
+                display: 'block',
+                overflow: 'visible',
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundColor: 'currentColor',
+                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04), 0 3px 6px -3px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.04)',
+                    transition: transitions.create(['inset-inline-start', 'inset-inline-end'], {
+                        duration: transitions.duration.shorter,
+                        easing: 'cubic-bezier(0, 0, 0.2, 1)',
+                    }),
+                },
             },
         },
+        variants: [
+            {
+                props: { size: 'small' },
+                style: getSwitchSizeStyles('small', typography.pxToRem),
+            },
+        ],
     };
 };

package/esm/switch/switch.js

@@ -20,25 +20,68 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 { formControlLabelClasses, FormControlLabel as BaseFormControlLabel, } from '../form';
 import MuiSwitch from '@mui/material/Switch';
-import { styled } from '../styled';
+import { rootShouldForwardProp, styled } from '../styled';
 import clsx from '../utils/clsx';
 import { switchComponentName, switchClasses, getSwitchUtilityClass } from './switch-classes';
 import { useMergedClasses } from '../styles/classes';
-var SwitchHeight = 24;
+var SWITCH_HEIGHT_BY_SIZE = {
+    medium: 24,
+    small: 20,
+};
 var SwitchLineHeight = 18;
+var StatusLabel = styled('span', {
+    name: switchComponentName,
+    slot: 'StatusLabel',
+})(function () { return ({
+    display: 'inline-block',
+    '@keyframes fadeInFromLeft': {
+        '0%': {
+            opacity: 0,
+            filter: 'blur(4px)',
+            transform: 'translateX(-12px)',
+        },
+        '100%': {
+            opacity: 1,
+            filter: 'blur(0)',
+            transform: 'translateX(0)',
+        },
+    },
+    animation: "fadeInFromLeft 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
+    '@media (prefers-reduced-motion: reduce)': {
+        animation: 'none',
+    },
+}); });
 var StyledFormControlLabel = styled(BaseFormControlLabel, {
     name: switchComponentName,
     slot: 'FormControlLabel',
+    shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'switchSize' && prop !== 'switchDisabled'; },
 })(function (_a) {
     var _b, _c;
-    var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement;
-    return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0 }, _b["& .".concat(formControlLabelClasses.container)] = {
-        lineHeight: theme.typography.pxToRem(SwitchHeight),
+    var theme = _a.theme, noWrap = _a.noWrap, labelPlacement = _a.labelPlacement, switchSize = _a.switchSize, switchDisabled = _a.switchDisabled;
+    return __assign((_b = { paddingLeft: 0, paddingTop: 0, paddingBottom: 0, marginLeft: 0, cursor: switchDisabled ? 'not-allowed' : undefined }, _b["& .".concat(formControlLabelClasses.container)] = {
+        lineHeight: theme.typography.pxToRem(SWITCH_HEIGHT_BY_SIZE[switchSize]),
         minWidth: noWrap ? 0 : undefined, // prevents overflow of parent flex container
         marginLeft: theme.spacing(2),
+        cursor: switchDisabled ? 'not-allowed' : undefined,
         '& > *:first-of-type': {
             marginLeft: 0,
         },
@@ -50,12 +93,63 @@ var StyledFormControlLabel = styled(BaseFormControlLabel, {
         _c)));
 });
 export var Switch = React.forwardRef(function (props, ref) {
-    var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, defaultChecked = props.defaultChecked, className = props.className, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _a = props.HelperTextProps, HelperTextProps = _a === void 0 ? {} : _a, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "defaultChecked", "className", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
+    var _a;
+    var children = props.children, noWrap = props.noWrap, labelPlacement = props.labelPlacement, labels = props.labels, checked = props.checked, disabled = props.disabled, readOnly = props.readOnly, _b = props.size, size = _b === void 0 ? 'medium' : _b, defaultChecked = props.defaultChecked, className = props.className, onMouseDown = props.onMouseDown, onMouseUp = props.onMouseUp, onKeyDown = props.onKeyDown, onKeyUp = props.onKeyUp, onValueChange = props.onValueChange, onChange = props.onChange, helperText = props.helperText, _c = props.HelperTextProps, HelperTextProps = _c === void 0 ? {} : _c, decoration = props.decoration, propClasses = props.classes, switchProps = __rest(props, ["children", "noWrap", "labelPlacement", "labels", "checked", "disabled", "readOnly", "size", "defaultChecked", "className", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "onValueChange", "onChange", "helperText", "HelperTextProps", "decoration", "classes"]);
     var classes = useMergedClasses(switchClasses, getSwitchUtilityClass, propClasses);
-    var valueLabel = labels && labels.length === 2 ? labels[checked || defaultChecked ? 0 : 1] : '';
-    var label = children || valueLabel;
+    var isDisabled = readOnly || disabled;
+    var _d = __read(React.useState(false), 2), isPressing = _d[0], setIsPressing = _d[1];
+    var handleMouseDown = React.useCallback(function () {
+        if (!isDisabled) {
+            setIsPressing(true);
+        }
+    }, [isDisabled]);
+    var handleMouseUp = React.useCallback(function () { return setIsPressing(false); }, []);
+    var handleSwitchMouseDown = React.useCallback(function (event) {
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+        if (!isDisabled) {
+            handleMouseDown();
+        }
+    }, [handleMouseDown, isDisabled, onMouseDown]);
+    var handleSwitchMouseUp = React.useCallback(function (event) {
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(event);
+        handleMouseUp();
+    }, [handleMouseUp, onMouseUp]);
+    var handleSwitchKeyDown = React.useCallback(function (event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.key === ' ' && !isDisabled) {
+            setIsPressing(true);
+        }
+    }, [isDisabled, onKeyDown]);
+    var handleSwitchKeyUp = React.useCallback(function (event) {
+        onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event);
+        if (event.key === ' ') {
+            setIsPressing(false);
+        }
+    }, [onKeyUp]);
+    React.useEffect(function () {
+        if (isPressing) {
+            var release_1 = function () { return setIsPressing(false); };
+            window.addEventListener('mouseup', release_1);
+            return function () { return window.removeEventListener('mouseup', release_1); };
+        }
+        return undefined;
+    }, [isPressing]);
+    React.useEffect(function () {
+        if (isDisabled && isPressing) {
+            setIsPressing(false);
+        }
+    }, [isDisabled, isPressing]);
+    var _e = __read(React.useState((_a = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _a !== void 0 ? _a : false), 2), uncontrolledChecked = _e[0], setUncontrolledChecked = _e[1];
+    var isChecked = checked !== null && checked !== void 0 ? checked : uncontrolledChecked;
+    var hasStatusLabels = labels && labels.length === 2;
+    var valueLabel = hasStatusLabels ? labels[isChecked ? 0 : 1] : '';
+    var animatedValueLabel = hasStatusLabels ? React.createElement(StatusLabel, { key: valueLabel }, valueLabel) : '';
+    var label = children || animatedValueLabel;
     var hasLabelOrHelperText = !!helperText || !!label;
     var handleChange = function (event) {
+        if (checked === undefined) {
+            setUncontrolledChecked(event.target.checked);
+        }
         if (onChange) {
             onChange(event, event.target.checked);
         }
@@ -63,9 +157,9 @@ export var Switch = React.forwardRef(function (props, ref) {
             onValueChange(event.target.checked);
         }
     };
-    var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: readOnly || disabled, defaultChecked: defaultChecked, className: !hasLabelOrHelperText ? className : classes.switch, onChange: onChange || onValueChange ? handleChange : undefined }, switchProps, { ref: ref })));
+    var switchButton = (React.createElement(MuiSwitch, __assign({ checked: checked, disabled: isDisabled, defaultChecked: defaultChecked, size: size, className: clsx(!hasLabelOrHelperText ? className : classes.switch, isPressing && classes.pressing), onMouseDown: handleSwitchMouseDown, onMouseUp: handleSwitchMouseUp, onKeyDown: handleSwitchKeyDown, onKeyUp: handleSwitchKeyUp, onChange: onChange || onValueChange || hasStatusLabels ? handleChange : undefined }, switchProps, { ref: ref })));
     if (hasLabelOrHelperText) {
-        return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className), height: SwitchLineHeight, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: readOnly || disabled, control: switchButton, ref: ref }));
+        return (React.createElement(StyledFormControlLabel, { className: clsx(classes.formControlLabel, className, isPressing && classes.pressing), height: SwitchLineHeight, switchSize: size, switchDisabled: isDisabled, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, label: label, labelPlacement: labelPlacement, helperText: helperText, HelperTextProps: HelperTextProps, decoration: decoration, noWrap: noWrap, disabled: isDisabled, control: switchButton, ref: ref }));
     }
     return switchButton;
 });

package/esm/tabs/tab/tab-override.js

@@ -15,10 +15,18 @@ export var createMuiTabOverrides = function (_a) {
         ],
         styleOverrides: {
             root: (_b = {
-                    paddingLeft: spacing(0.5),
-                    paddingRight: spacing(0.5),
-                    margin: spacing(0, 1.5),
-                    minWidth: 'unset'
+                    position: 'relative',
+                    zIndex: 1,
+                    padding: spacing(0.75),
+                    marginRight: 0,
+                    height: spacing(4),
+                    minHeight: spacing(4),
+                    minWidth: 'unset',
+                    transition: 'background-color 0.25s cubic-bezier(0, 0, 0.2, 1)',
+                    '@media (prefers-reduced-motion: reduce)': {
+                        transition: 'none',
+                    },
+                    borderRadius: spacing(0.5)
                 },
                 _b[breakpoints.up('sm')] = {
                     minWidth: 'unset',
@@ -28,17 +36,20 @@ export var createMuiTabOverrides = function (_a) {
                 },
                 _b),
             textColorPrimary: (_c = {},
+                _c["&.".concat(tabClasses.disabled)] = {
+                    color: tokens.color_fg_disabled,
+                },
                 _c["&.".concat(tabClasses.selected)] = {
-                    color: tokens.color_fg_selected,
+                    color: tokens.color_fg_bold,
                 },
                 _c['&:hover'] = {
-                    color: tokens.color_fg_selected,
+                    color: tokens.color_fg_bold,
                 },
                 _c['&:focus-visible'] = {
                     boxShadow: "0 0 0 2px ".concat(tokens.color_border_focus, " inset"),
                 },
                 _c.color = tokens.color_fg_link_subtle,
-                _c.fontWeight = typography.fontWeightRegular,
+                _c.fontWeight = typography.fontWeightSemibold,
                 _c),
         },
     };

package/esm/tabs/tab-list/tab-list-overrides.js

@@ -0,0 +1,94 @@
+import { styled } from '../../styled';
+export var tabListComponentName = 'QuantumTabList';
+export var TabListContainer = styled('div', {
+    name: tabListComponentName,
+    slot: 'Root',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        isolation: 'isolate',
+        borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
+        overflow: 'hidden',
+    });
+});
+export var OverflowButtonWrapper = styled('div', {
+    name: tabListComponentName,
+    slot: 'OverflowButtonWrapper',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: theme.spacing(0.5),
+        flexShrink: 0,
+        height: theme.spacing(3.5),
+        marginBottom: theme.spacing(1),
+    });
+});
+export var OverflowLabelContainer = styled('span', {
+    name: tabListComponentName,
+    slot: 'OverflowLabelContainer',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    });
+});
+export var OverflowLabel = styled('span', {
+    name: tabListComponentName,
+    slot: 'OverflowLabel',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.spacing(1),
+        fontSize: theme.typography.pxToRem(14),
+        fontWeight: theme.typography.fontWeightSemibold,
+        color: theme.tokens.color_fg_default,
+    });
+});
+var TIMING_FUNCTION = 'cubic-bezier(0.19, 1, 0.22, 1)';
+export var SelectionIndicator = styled('span', {
+    name: tabListComponentName,
+    slot: 'SelectionIndicator',
+    shouldForwardProp: function (prop) { return !['ownerState'].includes(String(prop)); },
+})(function (_a) {
+    var theme = _a.theme, _b = _a.ownerState, leftOffset = _b.leftOffset, indicatorWidth = _b.indicatorWidth, isVisible = _b.isVisible;
+    return ({
+        position: 'absolute',
+        top: 0,
+        bottom: theme.spacing(1),
+        left: 0,
+        width: indicatorWidth,
+        borderRadius: theme.spacing(0.5),
+        backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
+        pointerEvents: 'none',
+        zIndex: 0,
+        opacity: isVisible ? 1 : 0,
+        transform: "translate3d(".concat(leftOffset, "px, 0, 0)"),
+        willChange: 'transform, width, opacity',
+        transition: "transform ".concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION, ", width ").concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION, ", opacity ").concat(theme.transitions.duration.short, "ms ").concat(TIMING_FUNCTION),
+        '@media (prefers-reduced-motion: reduce)': {
+            transition: 'none',
+        },
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            display: 'block',
+            bottom: theme.spacing(-1),
+            left: '50%',
+            transform: 'translateX(-50%)',
+            height: theme.spacing(0.25),
+            width: "calc(100% - ".concat(theme.spacing(2), ")"),
+            backgroundColor: theme.tokens.color_bg_brand_primary,
+        },
+    });
+});

package/esm/tabs/tab-list/tab-list-utils.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export var isTabChild = function (child) { return React.isValidElement(child); };
+export var getResolvedChildValue = function (child, index) { var _a; return (_a = child.props.value) !== null && _a !== void 0 ? _a : index; };
+export var getChildOrderValue = function (child, index) {
+    var _a, _b;
+    if (isTabChild(child)) {
+        return (_b = (_a = child.props.value) !== null && _a !== void 0 ? _a : child.key) !== null && _b !== void 0 ? _b : index;
+    }
+    return index;
+};
+// Tab selection uses identity equality for object values elsewhere in the tabs stack,
+// so overflow ordering should follow the same semantics.
+var areTabValuesEqual = function (left, right) { return left === right; };
+export var areValueArraysEqual = function (left, right) {
+    if (left.length !== right.length) {
+        return false;
+    }
+    return left.every(function (value, index) { return areTabValuesEqual(value, right[index]); });
+};
+export var createOverflowState = function (_a) {
+    var baseVisibleTabCount = _a.baseVisibleTabCount, moreLabel = _a.moreLabel, defaultTabOrder = _a.defaultTabOrder, _b = _a.overflowCompensation, overflowCompensation = _b === void 0 ? 0 : _b, orderedTabValues = _a.orderedTabValues;
+    return ({
+        overflowCompensation: overflowCompensation,
+        orderedTabValues: orderedTabValues,
+        baselineVisibleTabCount: baseVisibleTabCount,
+        baselineMoreLabel: moreLabel,
+        baselineTabOrder: defaultTabOrder,
+    });
+};