@auth0/quantum-product 2.10.8 → 2.12.0

package/switch/switch-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const switchComponentName: "QuantumSwitch";
 export declare function getSwitchUtilityClass(slot: string): string;
-export declare const switchClasses: Record<"switch" | "formControlLabel", string>;
+export declare const switchClasses: Record<"switch" | "formControlLabel" | "pressing", string>;
 export type SwitchClasses = typeof switchClasses;
 export type SwitchClassKey = keyof SwitchClasses;

package/switch/switch-classes.js

@@ -7,4 +7,4 @@ exports.switchComponentName = 'QuantumSwitch';
 function getSwitchUtilityClass(slot) {
     return (0, classes_1.generateUtilityClass)(exports.switchComponentName, slot);
 }
-exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel']);
+exports.switchClasses = (0, classes_1.generateUtilityClasses)(exports.switchComponentName, ['switch', 'formControlLabel', 'pressing']);

package/switch/switch-overrides.js

@@ -13,83 +13,161 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMuiSwitchOverrides = void 0;
 var Switch_1 = require("@mui/material/Switch");
-var SWITCH_DIMENSIONS = {
-    heightPx: 24,
-    widthPx: 44,
-    thumbSizePx: 16,
+var switch_classes_1 = require("./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(Switch_1.switchClasses.switchBase, ":not(.").concat(Switch_1.switchClasses.checked, "):not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
+                    insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
+                },
+                _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked, ":not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
+                    insetInlineStart: pxToRem(-thumbActiveExtensionPx),
+                },
+                _b)
+        },
+        _a["&.".concat(switch_classes_1.switchClasses.pressing)] = (_c = {},
+            _c["& .".concat(Switch_1.switchClasses.switchBase, ":not(.").concat(Switch_1.switchClasses.checked, "):not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
+                insetInlineEnd: pxToRem(-thumbActiveExtensionPx),
+            },
+            _c["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked, ":not(.").concat(Switch_1.switchClasses.disabled, ") .").concat(Switch_1.switchClasses.thumb, "::before")] = {
+                insetInlineStart: pxToRem(-thumbActiveExtensionPx),
+            },
+            _c),
+        _a["& .".concat(Switch_1.switchClasses.track)] = {
+            borderRadius: pxToRem(dimensions.heightPx * 2),
+        },
+        _a["& .".concat(Switch_1.switchClasses.switchBase)] = {
+            padding: pxToRem((dimensions.heightPx - dimensions.thumbSizePx) / 2),
+        },
+        _a["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.checked)] = {
+            transform: "translateX(".concat(pxToRem(dimensions.thumbEndPositionPx), ")"),
+        },
+        _a["& .".concat(Switch_1.switchClasses.thumb)] = {
+            height: pxToRem(dimensions.thumbSizePx),
+            width: pxToRem(dimensions.thumbSizePx),
+            borderRadius: pxToRem(dimensions.thumbSizePx),
+        },
+        _a["& .".concat(Switch_1.switchClasses.thumb, "::before")] = {
+            borderRadius: pxToRem(dimensions.thumbSizePx),
+        },
+        _a;
 };
 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(Switch_1.switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
-                    _b),
-            },
-            colorPrimary: (_c = {
+            root: __assign(__assign({ padding: 0, overflow: 'visible' }, getSwitchSizeStyles('medium', typography.pxToRem)), (_b = {}, _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.disabled)] = {
+                cursor: 'not-allowed',
+            }, _b["& .".concat(Switch_1.switchClasses.switchBase, ".").concat(Switch_1.switchClasses.disabled, " + .").concat(Switch_1.switchClasses.track)] = {
+                cursor: 'not-allowed',
+            }, _b['&:focus-within,&.Mui-focused'] = (_c = {},
+                _c["& .".concat(Switch_1.switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
+                _c), _b)),
+            colorPrimary: (_d = {
                     color: tokens.color_bg_layer
                 },
-                _c["&.".concat(Switch_1.switchClasses.checked)] = (_d = {
+                _d["&.".concat(Switch_1.switchClasses.checked)] = (_e = {
                         color: tokens.color_bg_layer
                     },
-                    _d["& + .".concat(Switch_1.switchClasses.track)] = {
+                    _e["& + .".concat(Switch_1.switchClasses.track)] = {
                         backgroundColor: tokens.color_bg_switch_on,
                     },
-                    _d["&.".concat(Switch_1.switchClasses.disabled)] = (_e = {
+                    _e["&.".concat(Switch_1.switchClasses.disabled)] = (_f = {
                             color: tokens.color_bg_layer
                         },
-                        _e["& + .".concat(Switch_1.switchClasses.track)] = {
+                        _f["& + .".concat(Switch_1.switchClasses.track)] = {
                             backgroundColor: tokens.color_bg_switch_on_disabled,
                         },
-                        _e),
-                    _d),
-                _c["&.".concat(Switch_1.switchClasses.disabled)] = (_f = {
+                        _f),
+                    _e),
+                _d["&.".concat(Switch_1.switchClasses.disabled)] = (_g = {
                         color: tokens.color_bg_layer
                     },
-                    _f["& + .".concat(Switch_1.switchClasses.track)] = {
+                    _g["& + .".concat(Switch_1.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(Switch_1.switchClasses.checked)] = (_h = {
-                        transform: "translateX(".concat(typography.pxToRem(SWITCH_DIMENSIONS.thumbSizePx + 4), ")")
-                    },
-                    _h["& + .".concat(Switch_1.switchClasses.track)] = {
+                _h["&.".concat(Switch_1.switchClasses.checked)] = (_j = {},
+                    _j["& + .".concat(Switch_1.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(Switch_1.switchClasses.disabled, ",&:hover,&:active")] = {
+                    _j),
+                _h["&.".concat(Switch_1.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),
+            },
+        ],
     };
 };
 exports.createMuiSwitchOverrides = createMuiSwitchOverrides;

package/switch/switch.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IFormControlLabelProps, IFormHelperTextProps } from '../form';
 import { SwitchProps } from '@mui/material/Switch';
 import { SwitchClasses } from './switch-classes';
-export interface ISwitchProps extends Omit<SwitchProps, 'size' | 'color' | 'classes'>, Pick<IFormControlLabelProps, 'labelPlacement'> {
+export interface ISwitchProps extends Omit<SwitchProps, 'color' | 'classes'>, Pick<IFormControlLabelProps, 'labelPlacement'> {
     children?: React.ReactNode;
     /** [checked, unchecked] */
     labels?: [string, string];

package/switch/switch.js

@@ -54,6 +54,22 @@ 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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -66,18 +82,45 @@ var styled_1 = require("../styled");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var switch_classes_1 = require("./switch-classes");
 var classes_1 = require("../styles/classes");
-var SwitchHeight = 24;
+var SWITCH_HEIGHT_BY_SIZE = {
+    medium: 24,
+    small: 20,
+};
 var SwitchLineHeight = 18;
+var StatusLabel = (0, styled_1.styled)('span', {
+    name: switch_classes_1.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 = (0, styled_1.styled)(form_1.FormControlLabel, {
     name: switch_classes_1.switchComponentName,
     slot: 'FormControlLabel',
+    shouldForwardProp: function (prop) { return (0, styled_1.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(form_1.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(form_1.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,
         },
@@ -89,12 +132,63 @@ var StyledFormControlLabel = (0, styled_1.styled)(form_1.FormControlLabel, {
         _c)));
 });
 exports.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 = (0, classes_1.useMergedClasses)(switch_classes_1.switchClasses, switch_classes_1.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);
         }
@@ -102,9 +196,9 @@ exports.Switch = React.forwardRef(function (props, ref) {
             onValueChange(event.target.checked);
         }
     };
-    var switchButton = (React.createElement(Switch_1.default, __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(Switch_1.default, __assign({ checked: checked, disabled: isDisabled, defaultChecked: defaultChecked, size: size, className: (0, clsx_1.default)(!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: (0, clsx_1.default)(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: (0, clsx_1.default)(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/tabs/tab/tab-override.d.ts

@@ -1,3 +1,3 @@
-import { TabProps, TabClassKey } from '@mui/material/Tab';
+import { TabClassKey, TabProps } from '@mui/material/Tab';
 import type { ComponentOverrideCreator } from '../../theme/create-component-overrides';
 export declare const createMuiTabOverrides: ComponentOverrideCreator<TabProps, TabClassKey>;

package/tabs/tab/tab-override.js

@@ -18,10 +18,18 @@ 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',
@@ -31,17 +39,20 @@ var createMuiTabOverrides = function (_a) {
                 },
                 _b),
             textColorPrimary: (_c = {},
+                _c["&.".concat(Tab_1.tabClasses.disabled)] = {
+                    color: tokens.color_fg_disabled,
+                },
                 _c["&.".concat(Tab_1.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/tabs/tab/tab.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { OverridableComponent, OverrideProps } from '../../overridable-component';
 import { TabTypeMap } from '@mui/material/Tab';
 type ITabTypeMap<ExtraPropsType = {}, DefaultElementType extends React.ElementType = TabTypeMap['defaultComponent']> = TabTypeMap<ExtraPropsType & {
-    productReleaseStage?: 'beta' | 'earlyAccess' | 'generalAvailability';
+    productReleaseStage?: 'developerPreview' | 'beta' | 'earlyAccess' | 'generalAvailability';
     analyticsId?: string;
 }, DefaultElementType>;
 export type ITabProps<D extends React.ElementType = ITabTypeMap['defaultComponent'], P = {}> = OverrideProps<ITabTypeMap<P, D>, D>;

package/tabs/tab-list/tab-list-overrides.d.ts

@@ -0,0 +1,12 @@
+import { IStyledOwnerStateProps } from '../../styled';
+export declare const tabListComponentName = "QuantumTabList";
+export declare const TabListContainer: import("styled-components").StyledComponent<"div", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowButtonWrapper: import("styled-components").StyledComponent<"div", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowLabelContainer: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export declare const OverflowLabel: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme>, never>;
+export interface ISelectionIndicatorOwnerState {
+    leftOffset: number;
+    indicatorWidth: number;
+    isVisible: boolean;
+}
+export declare const SelectionIndicator: import("styled-components").StyledComponent<"span", import("../..").ITheme, import("@mui/system").MUIStyledCommonProps<import("../..").ITheme> & IStyledOwnerStateProps<ISelectionIndicatorOwnerState>, never>;

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionIndicator = exports.OverflowLabel = exports.OverflowLabelContainer = exports.OverflowButtonWrapper = exports.TabListContainer = exports.tabListComponentName = void 0;
+var styled_1 = require("../../styled");
+exports.tabListComponentName = 'QuantumTabList';
+exports.TabListContainer = (0, styled_1.styled)('div', {
+    name: exports.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',
+    });
+});
+exports.OverflowButtonWrapper = (0, styled_1.styled)('div', {
+    name: exports.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),
+    });
+});
+exports.OverflowLabelContainer = (0, styled_1.styled)('span', {
+    name: exports.tabListComponentName,
+    slot: 'OverflowLabelContainer',
+})(function (_a) {
+    var theme = _a.theme;
+    return ({
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    });
+});
+exports.OverflowLabel = (0, styled_1.styled)('span', {
+    name: exports.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)';
+exports.SelectionIndicator = (0, styled_1.styled)('span', {
+    name: exports.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/tabs/tab-list/tab-list-utils.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+export type TabChildProps = {
+    component?: React.ElementType;
+    disabled?: boolean;
+    href?: string;
+    label?: React.ReactNode;
+    onClick?: (event: React.MouseEvent) => void;
+    value?: unknown;
+    analyticsId?: string;
+    [key: string]: unknown;
+};
+export type TabChild = React.ReactElement<TabChildProps>;
+export interface IOverflowState {
+    overflowCompensation: number;
+    orderedTabValues?: unknown[];
+    baselineVisibleTabCount: number;
+    baselineMoreLabel: string;
+    baselineTabOrder: unknown[];
+}
+export declare const isTabChild: (child: React.ReactNode) => child is TabChild;
+export declare const getResolvedChildValue: (child: TabChild, index: number) => unknown;
+export declare const getChildOrderValue: (child: React.ReactNode, index: number) => unknown;
+export declare const areValueArraysEqual: (left: unknown[], right: unknown[]) => boolean;
+interface ICreateOverflowStateProps {
+    baseVisibleTabCount: number;
+    moreLabel: string;
+    defaultTabOrder: unknown[];
+    overflowCompensation?: number;
+    orderedTabValues?: unknown[];
+}
+export declare const createOverflowState: ({ baseVisibleTabCount, moreLabel, defaultTabOrder, overflowCompensation, orderedTabValues, }: ICreateOverflowStateProps) => IOverflowState;
+export {};