@auth0/quantum-product 1.11.0 → 1.12.0

package/breadcrumbs/breadcrumbs-overrides.d.ts

@@ -1,2 +1,2 @@
-import { BreadcrumbsProps } from '@mui/material/Breadcrumbs';
-export declare const createMuiBreadcrumbsOverrides: import("../theme/create-component-overrides").ComponentOverrideCreator<BreadcrumbsProps<"nav", {}>, keyof import("@mui/material/Breadcrumbs").BreadcrumbsClasses>;
+import { BreadcrumbsProps } from '@mui/material';
+export declare const createMuiBreadcrumbsOverrides: import("../theme/create-component-overrides").ComponentOverrideCreator<BreadcrumbsProps<"nav", {}>, keyof import("@mui/material").BreadcrumbsClasses>;

package/breadcrumbs/breadcrumbs-overrides.js

@@ -1,15 +1,31 @@
 "use strict";
+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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMuiBreadcrumbsOverrides = void 0;
+var material_1 = require("@mui/material");
 var create_component_overrides_1 = require("../theme/create-component-overrides");
 exports.createMuiBreadcrumbsOverrides = (0, create_component_overrides_1.createComponentOverrides)(function (_a) {
-    var tokens = _a.tokens;
+    var _b;
+    var mixins = _a.mixins, tokens = _a.tokens;
     return ({
         styleOverrides: {
             separator: {
                 color: tokens.color_fg_decorative,
                 fontSize: '0.875rem',
             },
+            root: (_b = {},
+                _b["& .".concat(material_1.buttonBaseClasses.root, ":focus")] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
+                _b),
         },
     });
 });

package/button/button-overrides.js

@@ -1,4 +1,15 @@
 "use strict";
+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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMuiButtonOverrides = void 0;
 var Button_1 = require("@mui/material/Button");
@@ -210,9 +221,9 @@ exports.createMuiButtonOverrides = (0, create_component_overrides_1.createCompon
             {
                 props: { color: 'danger' },
                 style: (_b = {},
-                    _b["&:focus,&.".concat(Button_1.buttonClasses.focusVisible)] = mixins.focusRing({
+                    _b["&:focus,&.".concat(Button_1.buttonClasses.focusVisible)] = __assign({ outlineOffset: 2 }, mixins.focusRing({
                         color: tokens.color_border_focus_state_danger,
-                    }),
+                    })),
                     _b),
             },
         ],
@@ -227,6 +238,9 @@ exports.createMuiButtonOverrides = (0, create_component_overrides_1.createCompon
                     backgroundColor: tokens.color_bg_button_disabled,
                     borderColor: tokens.color_border_disabled,
                 },
+                _c["&:focus,&.".concat(Button_1.buttonClasses.focusVisible)] = {
+                    outlineOffset: 2,
+                },
                 _c),
             fullWidth: {
                 width: '100%',

package/card/card-header/card-header.js

@@ -91,5 +91,5 @@ exports.CardHeader = React.forwardRef(function (props, ref) {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'h2' }, { display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: (0, clsx_1.default)(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(text_1.Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: (0, clsx_1.default)(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/card/card.js

@@ -98,7 +98,7 @@ var Root = (0, styled_1.styled)(Card_1.default, {
                 backgroundColor: (0, color_manipulator_1.fade)(theme.palette.action.hoverBackground, 0.1),
                 boxShadow: theme.shadows[1],
             },
-        '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
+        '&:focus': __assign({ outlineOffset: 2 }, theme.mixins.focusRing()),
     }))), (ownerState.selectableButton && {
         cursor: 'pointer',
         transition: theme.transitions.create(['box-shadow', 'border-color'], {

package/checkbox/checkbox-overrides.js

@@ -27,7 +27,7 @@ var createMuiCheckboxOverrides = function (_a) {
                     duration: transitions.duration.short,
                 }),
                 color: tokens.color_border_input,
-                '&:focus-within svg': __assign({ borderRadius: 4 }, mixins.focusRing()),
+                '&:focus-within svg': __assign({ borderRadius: 4, outlineOffset: 2 }, mixins.focusRing()),
             },
             colorPrimary: (_b = {
                     '&:hover,': {

package/chip/chip-overrides.js

@@ -40,11 +40,7 @@ exports.createMuiChipOverrides = (0, create_component_overrides_1.createComponen
                         boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
                         backgroundColor: tokens.color_bg_link_hover,
                     },
-                    '&:focus,&.Mui-focusVisible': {
-                        cursor: 'pointer',
-                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
-                        backgroundColor: tokens.color_bg_link_hover,
-                    }
+                    '&:focus,&.Mui-focusVisible': __assign({ cursor: 'pointer', boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button), backgroundColor: tokens.color_bg_link_hover, outlineOffset: 2 }, mixins.focusRing())
                 },
                 _c["&.".concat(Chip_1.chipClasses.disabled)] = {
                     opacity: 1,

package/chip/chip.js

@@ -74,13 +74,7 @@ var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentNam
             boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
             backgroundColor: theme.tokens.color_bg_selected_subtle_pressed,
         },
-        _b["&:focus:not(&.".concat(Chip_1.chipClasses.disabled, "),&.Mui-focusVisible:not(&.").concat(Chip_1.chipClasses.disabled, ")")] = {
-            backgroundColor: theme.tokens.color_bg_selected_subtle_hover,
-            boxShadow: [
-                theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
-                theme.mixins.focusRing().boxShadow,
-            ],
-        },
+        _b["&:focus:not(&.".concat(Chip_1.chipClasses.disabled, "),&.Mui-focusVisible:not(&.").concat(Chip_1.chipClasses.disabled, ")")] = __assign({ backgroundColor: theme.tokens.color_bg_selected_subtle_hover, boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2) }, theme.mixins.focusRing()),
         _b[".".concat(Checkbox_1.checkboxClasses.colorPrimary, ".").concat(Checkbox_1.checkboxClasses.checked, ":not(.").concat(Checkbox_1.checkboxClasses.disabled, ")")] = {
             color: theme.tokens.color_bg_selected,
         },

package/dialog/dialog-title/dialog-title.d.ts

@@ -6,4 +6,4 @@ export interface IDialogTitleProps extends Omit<DialogTitleProps, 'classes'> {
     onClose?(event: {}, reason: 'closeClick'): void;
     classes?: Partial<DialogTitleClasses>;
 }
-export declare const DialogTitle: React.ForwardRefExoticComponent<Pick<IDialogTitleProps, "p" | "slot" | "style" | "title" | "color" | "border" | "boxShadow" | "hidden" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "padding" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "className" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disableTypography" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "component" | "onClose"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Pick<IDialogTitleProps, "p" | "slot" | "style" | "title" | "color" | "border" | "hidden" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "padding" | "alignContent" | "alignItems" | "alignSelf" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "translate" | "visibility" | "whiteSpace" | "width" | "zIndex" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "className" | "classes" | "children" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disableTypography" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "component" | "onClose"> & React.RefAttributes<HTMLDivElement>>;

package/esm/breadcrumbs/breadcrumbs-overrides.js

@@ -1,12 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { buttonBaseClasses } from '@mui/material';
 import { createComponentOverrides } from '../theme/create-component-overrides';
 export var createMuiBreadcrumbsOverrides = createComponentOverrides(function (_a) {
-    var tokens = _a.tokens;
+    var _b;
+    var mixins = _a.mixins, tokens = _a.tokens;
     return ({
         styleOverrides: {
             separator: {
                 color: tokens.color_fg_decorative,
                 fontSize: '0.875rem',
             },
+            root: (_b = {},
+                _b["& .".concat(buttonBaseClasses.root, ":focus")] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
+                _b),
         },
     });
 });

package/esm/button/button-overrides.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { buttonClasses } from '@mui/material/Button';
 import { createComponentOverrides } from '../theme/create-component-overrides';
 export var createMuiButtonOverrides = createComponentOverrides(function (_a) {
@@ -207,9 +218,9 @@ export var createMuiButtonOverrides = createComponentOverrides(function (_a) {
             {
                 props: { color: 'danger' },
                 style: (_b = {},
-                    _b["&:focus,&.".concat(buttonClasses.focusVisible)] = mixins.focusRing({
+                    _b["&:focus,&.".concat(buttonClasses.focusVisible)] = __assign({ outlineOffset: 2 }, mixins.focusRing({
                         color: tokens.color_border_focus_state_danger,
-                    }),
+                    })),
                     _b),
             },
         ],
@@ -224,6 +235,9 @@ export var createMuiButtonOverrides = createComponentOverrides(function (_a) {
                     backgroundColor: tokens.color_bg_button_disabled,
                     borderColor: tokens.color_border_disabled,
                 },
+                _c["&:focus,&.".concat(buttonClasses.focusVisible)] = {
+                    outlineOffset: 2,
+                },
                 _c),
             fullWidth: {
                 width: '100%',

package/esm/card/card-header/card-header.js

@@ -62,5 +62,5 @@ export var CardHeader = React.forwardRef(function (props, ref) {
             action: classes.action,
             avatar: classes.avatar,
             content: classes.content,
-        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'h2' }, { display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
+        }, title: React.createElement(Title, __assign({ variant: titleVariant, color: "textPrimary" }, { component: 'p' }, { role: "heading", display: "block" }, titleTypographyProps, { className: clsx(classes.title, titleTypographyProps.className), ownerState: { size: size } }), title), subheader: subheader ? (React.createElement(Text, __assign({ variant: "body2", color: "textSecondary", component: "p" }, subheaderTypographyProps, { className: clsx(classes.subheader, subheaderTypographyProps.className) }), subheader)) : null }, cardProps, { disableTypography: true })));
 });

package/esm/card/card.js

@@ -69,7 +69,7 @@ var Root = styled(MuiCard, {
                 backgroundColor: fade(theme.palette.action.hoverBackground, 0.1),
                 boxShadow: theme.shadows[1],
             },
-        '&:focus': __assign({ outline: 'none' }, theme.mixins.focusRing()),
+        '&:focus': __assign({ outlineOffset: 2 }, theme.mixins.focusRing()),
     }))), (ownerState.selectableButton && {
         cursor: 'pointer',
         transition: theme.transitions.create(['box-shadow', 'border-color'], {

package/esm/checkbox/checkbox-overrides.js

@@ -24,7 +24,7 @@ export var createMuiCheckboxOverrides = function (_a) {
                     duration: transitions.duration.short,
                 }),
                 color: tokens.color_border_input,
-                '&:focus-within svg': __assign({ borderRadius: 4 }, mixins.focusRing()),
+                '&:focus-within svg': __assign({ borderRadius: 4, outlineOffset: 2 }, mixins.focusRing()),
             },
             colorPrimary: (_b = {
                     '&:hover,': {

package/esm/chip/chip-overrides.js

@@ -37,11 +37,7 @@ export var createMuiChipOverrides = createComponentOverrides(function (_a) {
                         boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
                         backgroundColor: tokens.color_bg_link_hover,
                     },
-                    '&:focus,&.Mui-focusVisible': {
-                        cursor: 'pointer',
-                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
-                        backgroundColor: tokens.color_bg_link_hover,
-                    }
+                    '&:focus,&.Mui-focusVisible': __assign({ cursor: 'pointer', boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button), backgroundColor: tokens.color_bg_link_hover, outlineOffset: 2 }, mixins.focusRing())
                 },
                 _c["&.".concat(chipClasses.disabled)] = {
                     opacity: 1,

package/esm/chip/chip.js

@@ -48,13 +48,7 @@ var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (
             boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
             backgroundColor: theme.tokens.color_bg_selected_subtle_pressed,
         },
-        _b["&:focus:not(&.".concat(chipClasses.disabled, "),&.Mui-focusVisible:not(&.").concat(chipClasses.disabled, ")")] = {
-            backgroundColor: theme.tokens.color_bg_selected_subtle_hover,
-            boxShadow: [
-                theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
-                theme.mixins.focusRing().boxShadow,
-            ],
-        },
+        _b["&:focus:not(&.".concat(chipClasses.disabled, "),&.Mui-focusVisible:not(&.").concat(chipClasses.disabled, ")")] = __assign({ backgroundColor: theme.tokens.color_bg_selected_subtle_hover, boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2) }, theme.mixins.focusRing()),
         _b[".".concat(checkboxClasses.colorPrimary, ".").concat(checkboxClasses.checked, ":not(.").concat(checkboxClasses.disabled, ")")] = {
             color: theme.tokens.color_bg_selected,
         },

package/esm/icon-button/icon-button-overrides.js

@@ -1,8 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { createComponentOverrides } from '../theme/create-component-overrides';
 import { iconButtonClasses } from '@mui/material/IconButton';
 export var createMuiIconButtonOverrides = createComponentOverrides(function (_a) {
-    var _b;
-    var typography = _a.typography, tokens = _a.tokens;
+    var _b, _c, _d, _e;
+    var mixins = _a.mixins, typography = _a.typography, tokens = _a.tokens;
     return {
         defaultProps: {},
         styleOverrides: {
@@ -12,6 +23,9 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
                     backgroundColor: tokens.color_bg_button_disabled,
                     borderColor: tokens.color_border_disabled,
                 },
+                _b["&:focus,&.Mui-focusVisible"] = {
+                    outlineOffset: 2,
+                },
                 _b),
         },
         variants: [
@@ -66,17 +80,21 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
             },
             {
                 props: { color: 'danger' },
-                style: {
-                    color: tokens.color_fg_link_danger,
-                    '&:hover,&.Mui-hover': {
-                        color: tokens.color_fg_link_danger_hover,
-                        backgroundColor: tokens.color_bg_link_danger_hover,
-                    },
-                    '&:active,&.Mui-active': {
-                        color: tokens.color_fg_link_danger_pressed,
-                        backgroundColor: tokens.color_bg_link_danger_pressed,
-                    },
-                },
+                style: (_c = {
+                        color: tokens.color_fg_link_danger,
+                        '&:hover,&.Mui-hover': {
+                            color: tokens.color_fg_link_danger_hover,
+                            backgroundColor: tokens.color_bg_link_danger_hover,
+                        },
+                        '&:active,&.Mui-active': {
+                            color: tokens.color_fg_link_danger_pressed,
+                            backgroundColor: tokens.color_bg_link_danger_pressed,
+                        }
+                    },
+                    _c["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _c),
             },
             {
                 props: { variant: 'contained', color: 'primary' },
@@ -95,18 +113,22 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
             },
             {
                 props: { variant: 'contained', color: 'danger' },
-                style: {
-                    backgroundColor: tokens.color_bg_button_danger,
-                    color: tokens.color_fg_on_button_danger,
-                    '&:hover,&.Mui-hover': {
-                        color: tokens.color_fg_on_button_danger,
-                        backgroundColor: tokens.color_bg_button_danger_hover,
-                    },
-                    '&:active,&.Mui-active': {
+                style: (_d = {
+                        backgroundColor: tokens.color_bg_button_danger,
                         color: tokens.color_fg_on_button_danger,
-                        backgroundColor: tokens.color_bg_button_danger_pressed,
-                    },
-                },
+                        '&:hover,&.Mui-hover': {
+                            color: tokens.color_fg_on_button_danger,
+                            backgroundColor: tokens.color_bg_button_danger_hover,
+                        },
+                        '&:active,&.Mui-active': {
+                            color: tokens.color_fg_on_button_danger,
+                            backgroundColor: tokens.color_bg_button_danger_pressed,
+                        }
+                    },
+                    _d["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _d),
             },
             {
                 props: { variant: 'contained', color: 'default' },
@@ -162,6 +184,14 @@ export var createMuiIconButtonOverrides = createComponentOverrides(function (_a)
                     },
                 },
             },
+            {
+                props: { variant: 'outlined', color: 'danger' },
+                style: (_e = {},
+                    _e["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
+                        color: tokens.color_border_focus_state_danger,
+                    })),
+                    _e),
+            },
             {
                 props: { variant: 'link', color: 'default' },
                 style: {

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

@@ -26,13 +26,12 @@ import { styled } from '../styled';
 import { useIconButtonContext } from './icon-button-context';
 import { Tooltip } from '../tooltip';
 export var IconButtonComponentName = 'QuantumIconButton';
-export var IconButtonTooltipComponentName = 'QuantumIconTooltip';
 export { iconButtonClasses };
-var Root = styled(Tooltip, { name: IconButtonTooltipComponentName, slot: 'Root' })({});
+var Root = styled(Tooltip, { name: IconButtonComponentName, slot: 'Tooltip' })({});
 // using any here to work arround TS perf issues with OverrideableComponent and styled
 var StyledIconButton = styled(MuiIconButton, {
     name: IconButtonComponentName,
-    slot: 'IconButton',
+    slot: 'Root',
 })(function (_a) {
     var _b;
     var theme = _a.theme, edge = _a.edge, ownerState = _a.ownerState, color = _a.color;
@@ -50,10 +49,20 @@ var StyledIconButton = styled(MuiIconButton, {
         borderRadius: '50%',
     })));
 });
+var DisabledWrapper = styled('span', {
+    name: IconButtonComponentName,
+    slot: 'DisabledWrapper',
+    // doing this prevents the label from being applied to the span. Instead it is applied to the IconButton
+    shouldForwardProp: function (prop) { return prop !== 'aria-label' && prop !== 'title'; },
+})({
+    display: 'inline-flex',
+    flex: 0,
+    width: 'max-content',
+});
 export var IconButton = React.forwardRef(function (props, ref) {
     var iconButtonContext = useIconButtonContext();
     var children = props.children, label = props.label, _a = props.color, color = _a === void 0 ? 'default' : _a, _b = props.variant, variant = _b === void 0 ? 'link' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c, disabled = props.disabled, edgeProp = props.edge, _d = props.shape, shape = _d === void 0 ? 'default' : _d, tooltipPlacement = props.tooltipPlacement, onTooltipClose = props.onTooltipClose, iconButtonProps = __rest(props, ["children", "label", "color", "variant", "size", "disabled", "edge", "shape", "tooltipPlacement", "onTooltipClose"]);
     var edge = edgeProp != null ? edgeProp : iconButtonContext.edge;
-    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose },
-        React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape } }, iconButtonProps), children)));
+    var button = (React.createElement(StyledIconButton, __assign({ color: color, ref: ref, edge: edge, disabled: disabled, size: size, variant: variant, ownerState: { shape: shape }, "aria-label": label }, iconButtonProps), children));
+    return (React.createElement(Root, { title: label, placement: tooltipPlacement, onClose: onTooltipClose }, disabled ? React.createElement(DisabledWrapper, null, button) : button));
 });

package/esm/input/outlined-input-overrides.js

@@ -1,18 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 export var createMuiOutlinedInputOverrides = function (_a) {
     var _b, _c, _d, _e;
-    var spacing = _a.spacing, transitions = _a.transitions, mixins = _a.mixins, tokens = _a.tokens;
+    var spacing = _a.spacing, transitions = _a.transitions, tokens = _a.tokens;
     return {
         defaultProps: {
             color: 'primary',
@@ -37,13 +26,19 @@ export var createMuiOutlinedInputOverrides = function (_a) {
                 _b["&:hover .".concat(outlinedInputClasses.notchedOutline)] = {
                     borderColor: tokens.color_border_input_hover,
                 },
-                _b["&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderWidth: 2, borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
-                _b["&.".concat(outlinedInputClasses.focused, ":hover .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
+                _b["&.".concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderWidth: 2,
+                    borderColor: tokens.color_border_focus,
+                },
+                _b["&.".concat(outlinedInputClasses.focused, ":hover .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_focus,
+                },
                 _b["&.".concat(outlinedInputClasses.error, " .").concat(outlinedInputClasses.notchedOutline)] = {
                     borderColor: tokens.color_border_state_danger,
-                    borderWidth: 2,
                 },
-                _b["&.".concat(outlinedInputClasses.error, "&.").concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_state_danger }, mixins.focusRing({ color: tokens.color_border_focus_state_danger })),
+                _b["&.".concat(outlinedInputClasses.error, "&.").concat(outlinedInputClasses.focused, " .").concat(outlinedInputClasses.notchedOutline)] = {
+                    borderColor: tokens.color_border_focus_state_danger,
+                },
                 _b),
             notchedOutline: {
                 top: 0,

package/esm/label/label.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { rootShouldForwardProp, styled } from '../styled';
 export var labelComponentName = 'QuantumLabel';
@@ -46,7 +57,7 @@ var StyledLabel = styled('span', {
     slot: 'Root',
     shouldForwardProp: function (prop) { return rootShouldForwardProp(prop) && prop !== 'color' && prop !== 'variant'; },
 })(function (_a) {
-    var theme = _a.theme, _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c;
+    var theme = _a.theme, _b = _a.ownerState, _c = _b.color, color = _c === void 0 ? 'default' : _c, _d = _b.variant, variant = _d === void 0 ? 'default' : _d;
     return (__assign(__assign(__assign(__assign(__assign({}, theme.typography.overline), { padding: theme.spacing(0.25, 0.75), borderRadius: 4, display: 'inline-block', verticalAlign: 'middle' }), (variant === 'default' && __assign(__assign(__assign(__assign(__assign(__assign({}, (color === 'default' && {
         background: theme.tokens.color_bg_state_neutral_subtle,
         color: theme.tokens.color_fg_on_state_neutral_subtle,
@@ -98,6 +109,13 @@ var StyledLabel = styled('span', {
     })))));
 });
 export var Label = React.forwardRef(function (props, ref) {
-    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a;
-    return (React.createElement(StyledLabel, __assign({ ref: ref }, getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr), props)));
+    var productReleaseStage = props.productReleaseStage, _a = props.productReleaseStageAbbr, productReleaseStageAbbr = _a === void 0 ? true : _a, children = props.children, color = props.color, variant = props.variant, rootProps = __rest(props, ["productReleaseStage", "productReleaseStageAbbr", "children", "color", "variant"]);
+    var ownerState = productReleaseStage
+        ? getReleaseStageLabelProps(productReleaseStage, productReleaseStageAbbr)
+        : {
+            color: color,
+            variant: variant,
+            children: children,
+        };
+    return (React.createElement(StyledLabel, __assign({ ref: ref, ownerState: ownerState }, rootProps), ownerState.children));
 });

package/esm/radio/radio-overrides.js

@@ -24,7 +24,7 @@ export var createMuiRadioOverrides = function (_a) {
                     duration: transitions.duration.short,
                 }),
                 color: tokens.color_border_input,
-                '&:focus-within svg': __assign({ borderRadius: '50%' }, mixins.focusRing()),
+                '&:focus-within svg': __assign({ borderRadius: '50%', outlineOffset: 2 }, mixins.focusRing()),
                 // switch base is overriding this. Resetting it here.
                 '&&': {
                     padding: 0,

package/esm/switch/switch-overrides.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { switchClasses } from '@mui/material/Switch';
 var SWITCH_DIMENSIONS = {
     heightPx: 24,
@@ -19,7 +30,7 @@ export var createMuiSwitchOverrides = function (_a) {
                 padding: 0,
                 overflow: 'visible',
                 '&:focus-within,&.Mui-focused': (_b = {},
-                    _b["& .".concat(switchClasses.track)] = mixins.focusRing(),
+                    _b["& .".concat(switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
                     _b),
             },
             colorPrimary: (_c = {

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

@@ -1,18 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { tabClasses } from '@mui/material/Tab';
 export var createMuiTabOverrides = function (_a) {
     var _b, _c;
-    var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography, mixins = _a.mixins;
+    var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography;
     return {
         variants: [
             {
@@ -45,7 +34,9 @@ export var createMuiTabOverrides = function (_a) {
                 _c['&:hover'] = {
                     color: tokens.color_fg_selected,
                 },
-                _c['&:focus-visible'] = __assign({}, mixins.focusRing({ type: 'inset' })),
+                _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),