@auth0/quantum-product 1.6.6 → 1.6.8

package/alert/alert.js

@@ -102,11 +102,7 @@ var AlertRoot = (0, styled_1.styled)('div', {
         },
         _b))), (ownerState.variant === 'standard' && (_c = {
             backgroundColor: theme.tokens[severityBackgroundShade[ownerState.severity]],
-            color: theme.tokens[severityColorSubtleShade[ownerState.severity]],
-            '& a,& a:hover': {
-                color: 'currentColor',
-                textDecoration: 'underline',
-            }
+            color: theme.tokens[severityColorSubtleShade[ownerState.severity]]
         },
         _c["& .".concat(alert_classes_1.alertClasses.icon)] = {
             color: theme.tokens[severityColorSubtleShade[ownerState.severity]],

package/chip/chip-overrides.js

@@ -1,68 +1,98 @@
 "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.createMuiChipOverrides = void 0;
 var Chip_1 = require("@mui/material/Chip");
 var create_component_overrides_1 = require("../theme/create-component-overrides");
 exports.createMuiChipOverrides = (0, create_component_overrides_1.createComponentOverrides)(function (_a) {
-    var _b, _c;
-    var mixins = _a.mixins, palette = _a.palette, spacing = _a.spacing, tokens = _a.tokens;
+    var _b, _c, _d;
+    var mixins = _a.mixins, spacing = _a.spacing, tokens = _a.tokens, typography = _a.typography;
     return ({
         defaultProps: {
             variant: 'outlined',
         },
         styleOverrides: {
-            root: (_b = {
-                    color: tokens.color_fg_bold,
-                    height: 'unset',
-                    borderColor: tokens.color_border_bold,
-                    borderRadius: 4
+            root: __assign(__assign({}, tokens.type_body_100), (_b = { gap: spacing(1.5), padding: spacing(1.125, 1.5), color: tokens.color_fg_link, height: 'unset', border: 'none', boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button), backgroundColor: tokens.color_bg_layer, borderRadius: 4, '&:hover,&.Mui-hover,&:focus,&.Mui-focusVisible': {
+                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                        backgroundColor: tokens.color_bg_layer,
+                    }, '&:focus,&.Mui-focusVisible': {
+                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                        backgroundColor: tokens.color_bg_layer,
+                    } }, _b["&.".concat(Chip_1.chipClasses.disabled)] = {
+                opacity: 1,
+                pointerEvents: 'none',
+                color: tokens.color_fg_disabled,
+                backgroundColor: tokens.color_bg_disabled,
+            }, _b)),
+            clickable: (_c = {
+                    '&:hover,&.Mui-hover,&:focus,&.Mui-focusVisible': {
+                        cursor: 'pointer',
+                        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,
+                    }
                 },
-                _b["&.".concat(Chip_1.chipClasses.disabled)] = {
+                _c["&.".concat(Chip_1.chipClasses.disabled)] = {
                     opacity: 1,
-                    color: palette.action.disabled,
-                    backgroundColor: palette.action.disabledBackground,
+                    pointerEvents: 'none',
+                    color: tokens.color_fg_disabled,
+                    backgroundColor: tokens.color_bg_disabled,
                 },
-                _b['&:hover'] = {
-                    cursor: 'pointer',
-                    boxShadow: 'none',
-                    backgroundColor: palette.action.hoverBackground,
+                _c),
+            outlined: (_d = {},
+                _d[".".concat(Chip_1.chipClasses.clickable, "&:focus,.").concat(Chip_1.chipClasses.clickable, "&.Mui-focusVisible, .").concat(Chip_1.chipClasses.deletable, "&:focus, .").concat(Chip_1.chipClasses.deletable, "&.Mui-focusVisible")] = {
+                    boxShadow: [mixins.borderAsBoxShadow(tokens.color_border_button), mixins.focusRing().boxShadow],
+                    backgroundColor: tokens.color_bg_link_hover,
+                },
+                _d[".".concat(Chip_1.chipClasses.clickable, "&:hover,.").concat(Chip_1.chipClasses.clickable, "&.Mui-hover,.").concat(Chip_1.chipClasses.deletable, "&:hover,.").concat(Chip_1.chipClasses.deletable, "&.Mui-hover")] = {
+                    boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                    backgroundColor: tokens.color_bg_link_hover,
                 },
-                _b),
-            label: {
-                paddingTop: spacing(1.25),
-                paddingBottom: spacing(1.25),
-                paddingLeft: spacing(1),
+                _d[".".concat(Chip_1.chipClasses.clickable, "&:active,.").concat(Chip_1.chipClasses.clickable, "&.Mui-active, .").concat(Chip_1.chipClasses.deletable, "&:active, .").concat(Chip_1.chipClasses.deletable, "&.Mui-active")] = {
+                    boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                    backgroundColor: tokens.color_bg_link_pressed,
+                },
+                _d),
+            label: __assign({ padding: 0 }, tokens.type_body_100),
+            avatar: {
+                margin: 0,
+                height: typography.pxToRem(18),
+                width: typography.pxToRem(18),
+            },
+            icon: {
+                margin: 0,
+                height: typography.pxToRem(18),
+                width: typography.pxToRem(18),
             },
             sizeSmall: {
-                height: 'unset',
+                padding: spacing(0.625, 1),
+                borderRadius: 4,
             },
             labelSmall: {
-                padding: spacing(0.5, 1),
+                padding: 0,
             },
-            outlined: (_c = {},
-                _c[".".concat(Chip_1.chipClasses.clickable, "&:focus, .").concat(Chip_1.chipClasses.deletable, "&:focus")] = {
-                    backgroundColor: 'transparent',
-                },
-                _c[".".concat(Chip_1.chipClasses.clickable, "&:hover, .").concat(Chip_1.chipClasses.deletable, "&:hover")] = {
-                    backgroundColor: palette.action.hoverBackground,
-                },
-                _c),
-            deletable: {
-                '&:hover': {
-                    backgroundColor: palette.action.hoverBackground,
-                },
-                '&:focus': mixins.focusRing(),
-            },
-            clickable: {
+            deleteIcon: {
+                height: typography.pxToRem(16),
+                width: typography.pxToRem(16),
+                margin: 0,
+                color: tokens.color_fg_link_subtle,
                 '&:hover': {
-                    backgroundColor: palette.action.hoverBackground,
+                    color: tokens.color_fg_link_subtle_hover,
                 },
-                '&:focus': mixins.focusRing(),
-            },
-            deleteIcon: {
-                height: '1rem',
-                width: '1rem',
-                color: tokens.color_fg_default,
             },
         },
     });

package/chip/chip.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChipProps } from '@mui/material/Chip';
 export declare const chipComponentName: "QuantumChip";
-export interface IChipProps extends Omit<ChipProps, 'color'> {
+export interface IChipProps extends Omit<ChipProps, 'color' | 'variant'> {
     selected?: boolean;
 }
-export declare const Chip: React.ForwardRefExoticComponent<Pick<IChipProps, "label" | "slot" | "style" | "title" | "disabled" | "selected" | "hidden" | "size" | "icon" | "translate" | "className" | "classes" | "children" | "sx" | "variant" | "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" | "avatar" | "clickable" | "deleteIcon" | "onDelete"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Chip: React.ForwardRefExoticComponent<Pick<IChipProps, "label" | "slot" | "style" | "title" | "disabled" | "selected" | "hidden" | "size" | "icon" | "translate" | "className" | "classes" | "children" | "sx" | "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" | "avatar" | "clickable" | "deleteIcon" | "onDelete"> & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -50,49 +50,41 @@ var React = __importStar(require("react"));
 var Checkbox_1 = require("@mui/material/Checkbox");
 var Chip_1 = __importStar(require("@mui/material/Chip"));
 var icon_1 = require("../icon");
-var color_manipulator_1 = require("../styles/color-manipulator");
 var styled_1 = require("../styled");
 exports.chipComponentName = 'QuantumChip';
 // TODO: padding left is 8px only if chip has a checkbox. Right now the override is for any chip.
 var Root = (0, styled_1.styled)(Chip_1.default, { name: exports.chipComponentName, slot: 'Root' })(function (_a) {
-    var _b, _c;
-    var theme = _a.theme, disabled = _a.disabled, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign({}, (disabled && {
-        opacity: 1,
-        pointerEvents: 'none',
-        backgroundColor: theme.tokens.color_bg_disabled,
-    })), (_b = {}, _b[".".concat(Checkbox_1.checkboxClasses.root)] = {
-        padding: theme.spacing(1),
-    }, _b)), (ownerState.selected && (_c = {
-            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1),
-            borderColor: theme.tokens.color_border_selected,
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign({}, (ownerState.selected && (_b = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
             transition: theme.transitions.create(['box-shadow', 'border-color'], {
                 duration: theme.transitions.duration.shortest,
             })
         },
-        _c["&.".concat(Chip_1.chipClasses.disabled)] = {
-            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_disabled_selected, 1),
-            borderColor: theme.tokens.color_border_disabled_selected,
+        _b["&.".concat(Chip_1.chipClasses.disabled)] = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_disabled_selected, 2),
+            backgroundColor: theme.tokens.color_bg_disabled,
         },
-        _c["&:hover:not(&.".concat(Chip_1.chipClasses.disabled, ")")] = {
-            boxShadow: "".concat(theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1)),
-            borderColor: theme.tokens.color_border_selected,
-            backgroundColor: theme.tokens.color_bg_link_hover,
-            transition: theme.transitions.create(['box-shadow', 'border-color'], {
-                duration: theme.transitions.duration.shortest,
-            }),
+        _b["&:hover:not(&.".concat(Chip_1.chipClasses.disabled, "), &.Mui-hover:not(&.").concat(Chip_1.chipClasses.disabled, ")")] = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
+            backgroundColor: theme.tokens.color_bg_selected_subtle_hover,
         },
-        _c["&:focus:not(&.".concat(Chip_1.chipClasses.disabled, ")")] = {
-            boxShadow: "".concat(theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1), ", ").concat((0, color_manipulator_1.fade)(theme.tokens.color_border_focus, 0.25), " 0px 0px 0px 0.25em"),
-            borderColor: theme.tokens.color_border_selected,
-            transition: theme.transitions.create(['box-shadow', 'border-color'], {
-                duration: theme.transitions.duration.shortest,
-            }),
+        _b["&:active:not(&.".concat(Chip_1.chipClasses.disabled, "),&.Mui-active:not(&.").concat(Chip_1.chipClasses.disabled, ")")] = {
+            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,
+            ],
         },
-        _c[".".concat(Checkbox_1.checkboxClasses.colorPrimary, ".").concat(Checkbox_1.checkboxClasses.checked, ":not(.").concat(Checkbox_1.checkboxClasses.disabled, ")")] = {
+        _b[".".concat(Checkbox_1.checkboxClasses.colorPrimary, ".").concat(Checkbox_1.checkboxClasses.checked, ":not(.").concat(Checkbox_1.checkboxClasses.disabled, ")")] = {
             color: theme.tokens.color_bg_selected,
         },
-        _c))));
+        _b))));
 });
 exports.Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(icon_1.XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);

package/esm/alert/alert.js

@@ -73,11 +73,7 @@ var AlertRoot = styled('div', {
         },
         _b))), (ownerState.variant === 'standard' && (_c = {
             backgroundColor: theme.tokens[severityBackgroundShade[ownerState.severity]],
-            color: theme.tokens[severityColorSubtleShade[ownerState.severity]],
-            '& a,& a:hover': {
-                color: 'currentColor',
-                textDecoration: 'underline',
-            }
+            color: theme.tokens[severityColorSubtleShade[ownerState.severity]]
         },
         _c["& .".concat(alertClasses.icon)] = {
             color: theme.tokens[severityColorSubtleShade[ownerState.severity]],

package/esm/chip/chip-overrides.js

@@ -1,65 +1,95 @@
+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 { chipClasses } from '@mui/material/Chip';
 import { createComponentOverrides } from '../theme/create-component-overrides';
 export var createMuiChipOverrides = createComponentOverrides(function (_a) {
-    var _b, _c;
-    var mixins = _a.mixins, palette = _a.palette, spacing = _a.spacing, tokens = _a.tokens;
+    var _b, _c, _d;
+    var mixins = _a.mixins, spacing = _a.spacing, tokens = _a.tokens, typography = _a.typography;
     return ({
         defaultProps: {
             variant: 'outlined',
         },
         styleOverrides: {
-            root: (_b = {
-                    color: tokens.color_fg_bold,
-                    height: 'unset',
-                    borderColor: tokens.color_border_bold,
-                    borderRadius: 4
+            root: __assign(__assign({}, tokens.type_body_100), (_b = { gap: spacing(1.5), padding: spacing(1.125, 1.5), color: tokens.color_fg_link, height: 'unset', border: 'none', boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button), backgroundColor: tokens.color_bg_layer, borderRadius: 4, '&:hover,&.Mui-hover,&:focus,&.Mui-focusVisible': {
+                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                        backgroundColor: tokens.color_bg_layer,
+                    }, '&:focus,&.Mui-focusVisible': {
+                        boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                        backgroundColor: tokens.color_bg_layer,
+                    } }, _b["&.".concat(chipClasses.disabled)] = {
+                opacity: 1,
+                pointerEvents: 'none',
+                color: tokens.color_fg_disabled,
+                backgroundColor: tokens.color_bg_disabled,
+            }, _b)),
+            clickable: (_c = {
+                    '&:hover,&.Mui-hover,&:focus,&.Mui-focusVisible': {
+                        cursor: 'pointer',
+                        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,
+                    }
                 },
-                _b["&.".concat(chipClasses.disabled)] = {
+                _c["&.".concat(chipClasses.disabled)] = {
                     opacity: 1,
-                    color: palette.action.disabled,
-                    backgroundColor: palette.action.disabledBackground,
+                    pointerEvents: 'none',
+                    color: tokens.color_fg_disabled,
+                    backgroundColor: tokens.color_bg_disabled,
                 },
-                _b['&:hover'] = {
-                    cursor: 'pointer',
-                    boxShadow: 'none',
-                    backgroundColor: palette.action.hoverBackground,
+                _c),
+            outlined: (_d = {},
+                _d[".".concat(chipClasses.clickable, "&:focus,.").concat(chipClasses.clickable, "&.Mui-focusVisible, .").concat(chipClasses.deletable, "&:focus, .").concat(chipClasses.deletable, "&.Mui-focusVisible")] = {
+                    boxShadow: [mixins.borderAsBoxShadow(tokens.color_border_button), mixins.focusRing().boxShadow],
+                    backgroundColor: tokens.color_bg_link_hover,
+                },
+                _d[".".concat(chipClasses.clickable, "&:hover,.").concat(chipClasses.clickable, "&.Mui-hover,.").concat(chipClasses.deletable, "&:hover,.").concat(chipClasses.deletable, "&.Mui-hover")] = {
+                    boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                    backgroundColor: tokens.color_bg_link_hover,
                 },
-                _b),
-            label: {
-                paddingTop: spacing(1.25),
-                paddingBottom: spacing(1.25),
-                paddingLeft: spacing(1),
+                _d[".".concat(chipClasses.clickable, "&:active,.").concat(chipClasses.clickable, "&.Mui-active, .").concat(chipClasses.deletable, "&:active, .").concat(chipClasses.deletable, "&.Mui-active")] = {
+                    boxShadow: mixins.borderAsBoxShadow(tokens.color_border_button),
+                    backgroundColor: tokens.color_bg_link_pressed,
+                },
+                _d),
+            label: __assign({ padding: 0 }, tokens.type_body_100),
+            avatar: {
+                margin: 0,
+                height: typography.pxToRem(18),
+                width: typography.pxToRem(18),
+            },
+            icon: {
+                margin: 0,
+                height: typography.pxToRem(18),
+                width: typography.pxToRem(18),
             },
             sizeSmall: {
-                height: 'unset',
+                padding: spacing(0.625, 1),
+                borderRadius: 4,
             },
             labelSmall: {
-                padding: spacing(0.5, 1),
+                padding: 0,
             },
-            outlined: (_c = {},
-                _c[".".concat(chipClasses.clickable, "&:focus, .").concat(chipClasses.deletable, "&:focus")] = {
-                    backgroundColor: 'transparent',
-                },
-                _c[".".concat(chipClasses.clickable, "&:hover, .").concat(chipClasses.deletable, "&:hover")] = {
-                    backgroundColor: palette.action.hoverBackground,
-                },
-                _c),
-            deletable: {
-                '&:hover': {
-                    backgroundColor: palette.action.hoverBackground,
-                },
-                '&:focus': mixins.focusRing(),
-            },
-            clickable: {
+            deleteIcon: {
+                height: typography.pxToRem(16),
+                width: typography.pxToRem(16),
+                margin: 0,
+                color: tokens.color_fg_link_subtle,
                 '&:hover': {
-                    backgroundColor: palette.action.hoverBackground,
+                    color: tokens.color_fg_link_subtle_hover,
                 },
-                '&:focus': mixins.focusRing(),
-            },
-            deleteIcon: {
-                height: '1rem',
-                width: '1rem',
-                color: tokens.color_fg_default,
             },
         },
     });

package/esm/chip/chip.js

@@ -24,49 +24,41 @@ import * as React from 'react';
 import { checkboxClasses } from '@mui/material/Checkbox';
 import MuiChip, { chipClasses } from '@mui/material/Chip';
 import { XIcon } from '../icon';
-import { fade } from '../styles/color-manipulator';
 import { styled } from '../styled';
 export var chipComponentName = 'QuantumChip';
 // TODO: padding left is 8px only if chip has a checkbox. Right now the override is for any chip.
 var Root = styled(MuiChip, { name: chipComponentName, slot: 'Root' })(function (_a) {
-    var _b, _c;
-    var theme = _a.theme, disabled = _a.disabled, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign({}, (disabled && {
-        opacity: 1,
-        pointerEvents: 'none',
-        backgroundColor: theme.tokens.color_bg_disabled,
-    })), (_b = {}, _b[".".concat(checkboxClasses.root)] = {
-        padding: theme.spacing(1),
-    }, _b)), (ownerState.selected && (_c = {
-            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1),
-            borderColor: theme.tokens.color_border_selected,
+    var _b;
+    var theme = _a.theme, ownerState = _a.ownerState;
+    return (__assign({}, (ownerState.selected && (_b = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
             transition: theme.transitions.create(['box-shadow', 'border-color'], {
                 duration: theme.transitions.duration.shortest,
             })
         },
-        _c["&.".concat(chipClasses.disabled)] = {
-            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_disabled_selected, 1),
-            borderColor: theme.tokens.color_border_disabled_selected,
+        _b["&.".concat(chipClasses.disabled)] = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_disabled_selected, 2),
+            backgroundColor: theme.tokens.color_bg_disabled,
         },
-        _c["&:hover:not(&.".concat(chipClasses.disabled, ")")] = {
-            boxShadow: "".concat(theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1)),
-            borderColor: theme.tokens.color_border_selected,
-            backgroundColor: theme.tokens.color_bg_link_hover,
-            transition: theme.transitions.create(['box-shadow', 'border-color'], {
-                duration: theme.transitions.duration.shortest,
-            }),
+        _b["&:hover:not(&.".concat(chipClasses.disabled, "), &.Mui-hover:not(&.").concat(chipClasses.disabled, ")")] = {
+            boxShadow: theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 2),
+            backgroundColor: theme.tokens.color_bg_selected_subtle_hover,
         },
-        _c["&:focus:not(&.".concat(chipClasses.disabled, ")")] = {
-            boxShadow: "".concat(theme.mixins.borderAsBoxShadow(theme.tokens.color_border_selected, 1), ", ").concat(fade(theme.tokens.color_border_focus, 0.25), " 0px 0px 0px 0.25em"),
-            borderColor: theme.tokens.color_border_selected,
-            transition: theme.transitions.create(['box-shadow', 'border-color'], {
-                duration: theme.transitions.duration.shortest,
-            }),
+        _b["&:active:not(&.".concat(chipClasses.disabled, "),&.Mui-active:not(&.").concat(chipClasses.disabled, ")")] = {
+            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,
+            ],
         },
-        _c[".".concat(checkboxClasses.colorPrimary, ".").concat(checkboxClasses.checked, ":not(.").concat(checkboxClasses.disabled, ")")] = {
+        _b[".".concat(checkboxClasses.colorPrimary, ".").concat(checkboxClasses.checked, ":not(.").concat(checkboxClasses.disabled, ")")] = {
             color: theme.tokens.color_bg_selected,
         },
-        _c))));
+        _b))));
 });
 export var Chip = React.forwardRef(function (props, ref) {
     var selected = props.selected, _a = props.deleteIcon, deleteIcon = _a === void 0 ? React.createElement(XIcon, null) : _a, chipProps = __rest(props, ["selected", "deleteIcon"]);

package/esm/floating-panel/floating-panel.js

@@ -24,14 +24,15 @@ import * as React from 'react';
 import { styled } from '../styled';
 import { IconButton } from '../icon-button';
 import { XIcon } from '../icon';
-import { Drawer } from '@mui/material';
+import { Drawer } from '../drawer';
+import { paperClasses } from '../paper';
 export var floatingPanelComponentName = 'QuantumFloatingPanel';
 var CloseButton = function (_a) {
     var onCloseButtonClick = _a.onCloseButtonClick;
     return (React.createElement(StyledIconButton, { variant: "outlined", shape: "circular", size: "small", onClick: onCloseButtonClick },
         React.createElement(XIcon, null)));
 };
-var StyledIconButton = styled(IconButton)(function (_a) {
+var StyledIconButton = styled(IconButton, { name: floatingPanelComponentName, slot: 'CloseButton' })(function (_a) {
     var theme = _a.theme;
     return ({
         position: 'absolute',
@@ -40,7 +41,7 @@ var StyledIconButton = styled(IconButton)(function (_a) {
         zIndex: theme.zIndex.drawer,
     });
 });
-var SubContainer = styled('div')({
+var SubContainer = styled('div', { name: floatingPanelComponentName, slot: 'SubContainer' })({
     display: 'flex',
     width: 0,
 });
@@ -48,16 +49,20 @@ export var Root = styled(Drawer, { name: floatingPanelComponentName, slot: 'Root
     var _b;
     var theme = _a.theme, panelWidth = _a.panelWidth, elevated = _a.elevated, topOffset = _a.topOffset, anchor = _a.anchor;
     var boxShadowStyle = elevated ? theme.shadows[2] : 'none';
-    var topOffsetStyle = topOffset ? (topOffset === 'appbar' ? 56 : topOffset) : 0;
+    var topOffsetStyle = topOffset
+        ? topOffset === 'appbar'
+            ? theme.layout.appTop + theme.layout.appBarHeight
+            : topOffset
+        : 0;
     var borderStyle = "1px solid ".concat(theme.tokens.color_border_default);
     var borderPositionStyle = anchor === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle };
     return _b = {},
-        _b["& .MuiPaper-root"] = __assign({ width: "".concat(panelWidth, "px"), top: topOffsetStyle, bottom: 0, height: 'auto', boxShadow: boxShadowStyle, background: theme.tokens.color_bg_layer_elevated }, borderPositionStyle),
+        _b["& .".concat(paperClasses.root)] = __assign({ width: panelWidth, top: topOffsetStyle, bottom: 0, height: 'auto', boxShadow: boxShadowStyle, background: theme.tokens.color_bg_layer_elevated }, borderPositionStyle),
         _b;
 });
-export var FloatingPanel = React.forwardRef(function (_a) {
-    var _b = _a.panelWidth, panelWidth = _b === void 0 ? 360 : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, open = _a.open, _e = _a.elevated, elevated = _e === void 0 ? true : _e, topOffset = _a.topOffset, ref = _a.ref, position = _a.position, onClose = _a.onClose, children = _a.children, sx = _a.sx, rootProps = __rest(_a, ["panelWidth", "closeOnOutsideClick", "showCloseButton", "open", "elevated", "topOffset", "ref", "position", "onClose", "children", "sx"]);
-    return (React.createElement(Root, __assign({ ref: ref, panelWidth: panelWidth, open: open, anchor: position, onClose: onClose, elevated: elevated, topOffset: topOffset, hideBackdrop: !closeOnOutsideClick, sx: sx, BackdropProps: { invisible: true } }, rootProps),
+export var FloatingPanel = React.forwardRef(function (_a, ref) {
+    var _b = _a.panelWidth, panelWidth = _b === void 0 ? 360 : _b, _c = _a.closeOnOutsideClick, closeOnOutsideClick = _c === void 0 ? true : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, open = _a.open, _e = _a.elevated, elevated = _e === void 0 ? true : _e, topOffset = _a.topOffset, position = _a.position, onClose = _a.onClose, children = _a.children, rootProps = __rest(_a, ["panelWidth", "closeOnOutsideClick", "showCloseButton", "open", "elevated", "topOffset", "position", "onClose", "children"]);
+    return (React.createElement(Root, __assign({ ref: ref, panelWidth: panelWidth, open: open, anchor: position, onClose: onClose, elevated: elevated, topOffset: topOffset, hideBackdrop: !closeOnOutsideClick, BackdropProps: { invisible: true } }, rootProps),
         children,
         showCloseButton && (React.createElement(SubContainer, null,
             React.createElement(CloseButton, { onCloseButtonClick: onClose })))));

package/esm/index.js

@@ -51,7 +51,7 @@ export * from './mobile-stepper';
 export * from './no-ssr';
 export * from './page';
 export * from './pagination';
-export * from './panel-layout';
+export * from './panel';
 export * from './paper';
 export * from './popover';
 export * from './popper';

package/esm/panel/index.js

@@ -0,0 +1,6 @@
+export * from './panel';
+export * from './panel-body';
+export * from './panel-footer';
+export * from './panel-header';
+export * from './panel-layout';
+export { PanelContext, usePanelContext } from './panel-context';

package/esm/panel/panel/index.js

@@ -0,0 +1,2 @@
+export { Panel } from './panel';
+export { panelClasses } from './panel-classes';

package/esm/panel/panel/panel-classes.js

@@ -0,0 +1,20 @@
+import { generateUtilityClass, generateUtilityClasses } from '../../styles/classes';
+export var panelComponentName = 'QuantumPanel';
+export function getPanelUtilityClass(slot) {
+    return generateUtilityClass(panelComponentName, slot);
+}
+export var panelClasses = generateUtilityClasses(panelComponentName, [
+    'root',
+    'content',
+    'variantFloating',
+    'variantPersistent',
+    'variantPermanent',
+    'sizeSmall',
+    'sizeMedium',
+    'sizeLarge',
+    'placementStart',
+    'placementEnd',
+    'closeButton',
+    'fixed',
+    'open',
+]);