@auth0/quantum-product 1.11.1 → 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/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/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),

package/esm/theme/create-mixins.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { alpha, getContrastRatio } from '../styles/color-manipulator';
+import { getContrastRatio } from '../styles/color-manipulator';
 import { shadeMap } from './colors';
 export var createMixins = function (_a) {
     var palette = _a.palette, tokens = _a.tokens, _b = _a.overrides, overrides = _b === void 0 ? {} : _b;
@@ -37,10 +37,9 @@ export var createMixins = function (_a) {
     };
     var focusRing = function (options) {
         if (options === void 0) { options = {}; }
-        var _a = options.color, color = _a === void 0 ? tokens.color_border_focus_bold : _a, _b = options.type, type = _b === void 0 ? 'default' : _b, _c = options.opacity, opacity = _c === void 0 ? palette.mode === 'light' ? 0.25 : 0.5 : _c;
-        var shadow = "".concat(opacity === 1 ? color : alpha(color, opacity), " 0px 0px 0px 0.25em");
+        var _a = options.color, color = _a === void 0 ? tokens.color_border_focus : _a;
         return {
-            boxShadow: type === 'default' ? shadow : "inset ".concat(shadow),
+            outline: "2px solid ".concat(color),
         };
     };
     var borderAsBoxShadow = function (color, width) {
@@ -58,7 +57,7 @@ export var createMixins = function (_a) {
             },
             hover: hoverStyles,
             active: hoverStyles,
-            focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static, opacity: 1 })),
+            focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static })),
         };
     };
     var getColorModeValue = function (_a) {