@auth0/quantum-product 2.10.6 → 2.10.7

package/command-palette/command-palette-classes.d.ts

@@ -1,5 +1,5 @@
 export declare const commandPaletteComponentName: "QuantumCommandPalette";
 export declare function getCommandPaletteUtilityClass(slot: string): string;
-export declare const commandPaletteClasses: Record<"dialog" | "footer" | "input" | "kbd" | "separator" | "tab" | "root" | "loading" | "list" | "item" | "group" | "inputWrapper" | "inputIcon" | "groupHeading" | "groupItems" | "itemSelected" | "itemIcon" | "itemLabel" | "itemShortcut" | "tabs" | "tabSelected" | "empty" | "dialogPaper", string>;
+export declare const commandPaletteClasses: Record<"dialog" | "footer" | "input" | "kbd" | "separator" | "tab" | "root" | "loading" | "list" | "item" | "group" | "inputWrapper" | "inputIcon" | "listInner" | "groupHeading" | "groupItems" | "itemSelected" | "itemIcon" | "itemLabel" | "itemShortcut" | "tabs" | "tabSelected" | "empty" | "dialogPaper", string>;
 export type CommandPaletteClasses = typeof commandPaletteClasses;
 export type CommandPaletteClassKey = keyof CommandPaletteClasses;

package/command-palette/command-palette-classes.js

@@ -13,6 +13,7 @@ exports.commandPaletteClasses = (0, classes_1.generateUtilityClasses)(exports.co
     'inputWrapper',
     'inputIcon',
     'list',
+    'listInner',
     'group',
     'groupHeading',
     'groupItems',

package/command-palette/command-palette-dialog.js

@@ -63,6 +63,7 @@ var React = __importStar(require("react"));
 var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
 var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_1 = require("./command-palette");
 var command_palette_classes_1 = require("./command-palette-classes");
@@ -84,18 +85,19 @@ var StyledDialog = (0, styled_1.styled)(Dialog_1.default, {
             overflow: 'hidden',
             backgroundColor: theme.tokens.color_bg_layer_elevated,
             border: "1px solid ".concat(theme.tokens.color_border_default),
-            boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.12),\n                0px 13.7866px 33.4221px rgba(0, 0, 0, 0.086),\n                0px 7.37098px 17.869px rgba(0, 0, 0, 0.07),\n                0px 4.13211px 10.0172px rgba(0, 0, 0, 0.06),\n                0px 2.19453px 5.32008px rgba(0, 0, 0, 0.048),\n                0px 0.913195px 2.21381px rgba(0, 0, 0, 0.034)",
+            boxShadow: '0 -1px 0 -1px rgba(0,0,0,0.06), 0 1px 0 -1px rgba(0,0,0,0.06), 0 2px 24px -6px rgba(0,0,0,0.04), 0 4px 48px -12px rgba(0,0,0,0.04), 0 8px 80px -24px rgba(0,0,0,0.04)',
         },
         '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            backdropFilter: 'blur(4px)',
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            backdropFilter: 'blur(2px)',
         },
     });
 });
 exports.CommandPaletteDialog = React.forwardRef(function (props, ref) {
-    var _a = props.open, open = _a === void 0 ? false : _a, onOpenChange = props.onOpenChange, overlayProps = props.overlayProps, contentProps = props.contentProps, children = props.children, className = props.className, commandPaletteProps = __rest(props, ["open", "onOpenChange", "overlayProps", "contentProps", "children", "className"]);
+    var _a = props.open, open = _a === void 0 ? false : _a, onOpenChange = props.onOpenChange, overlayProps = props.overlayProps, contentProps = props.contentProps, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, commandPaletteProps = __rest(props, ["open", "onOpenChange", "overlayProps", "contentProps", "analyticsId", "classes", "children", "className", "sx"]);
     var paletteRef = React.useRef(null);
     var handleRef = (0, useForkRef_1.default)(ref, paletteRef);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     var handleEntered = React.useCallback(function () {
         requestAnimationFrame(function () {
             var _a;
@@ -106,7 +108,7 @@ exports.CommandPaletteDialog = React.forwardRef(function (props, ref) {
     var handleClose = React.useCallback(function () {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }, [onOpenChange]);
-    return (React.createElement(StyledDialog, { open: open, onClose: handleClose, TransitionProps: { onEntered: handleEntered }, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.dialog, className), maxWidth: false, BackdropProps: overlayProps, PaperProps: contentProps },
+    return (React.createElement(StyledDialog, __assign({ open: open, onClose: handleClose, TransitionProps: { onEntered: handleEntered }, sx: sx, className: (0, clsx_1.default)(classes.dialog, className), maxWidth: false, BackdropProps: overlayProps, PaperProps: __assign(__assign({}, contentProps), { className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.dialogPaper, classes.dialogPaper, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }, (analyticsId && { 'data-analytics-id': analyticsId })),
         React.createElement(command_palette_1.CommandPalette, __assign({ ref: handleRef }, commandPaletteProps), children)));
 });
 exports.CommandPaletteDialog.displayName = 'CommandPaletteDialog';

package/command-palette/command-palette-empty.js

@@ -61,6 +61,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteEmpty = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
@@ -80,11 +81,12 @@ var Root = (0, styled_1.styled)('div', {
     });
 });
 exports.CommandPaletteEmpty = React.forwardRef(function (props, ref) {
-    var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, className = props.className, emptyProps = __rest(props, ["children", "className"]);
+    var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, emptyProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
     var filteredCount = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.filtered.count; });
     var isSearching = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search.length > 0; });
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     if (!isSearching || filteredCount > 0)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, role: "presentation", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.empty, className) }, emptyProps), children));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "presentation", className: (0, clsx_1.default)(classes.empty, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), emptyProps), children));
 });
 exports.CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';

package/command-palette/command-palette-footer.js

@@ -61,6 +61,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteShortcutKey = exports.CommandPaletteFooter = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var Root = (0, styled_1.styled)('div', {
@@ -80,7 +81,7 @@ var Root = (0, styled_1.styled)('div', {
 });
 var Kbd = (0, styled_1.styled)('kbd', {
     name: command_palette_classes_1.commandPaletteComponentName,
-    slot: 'FooterKbd',
+    slot: 'Kbd',
 })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -100,12 +101,14 @@ var Kbd = (0, styled_1.styled)('kbd', {
     });
 });
 exports.CommandPaletteFooter = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, footerProps = __rest(props, ["children", "className"]);
-    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.footer, className) }, footerProps), children));
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, footerProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: (0, clsx_1.default)(classes.footer, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), footerProps), children));
 });
 exports.CommandPaletteFooter.displayName = 'CommandPaletteFooter';
 exports.CommandPaletteShortcutKey = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, kbdProps = __rest(props, ["children", "className"]);
-    return (React.createElement(Kbd, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.kbd, className) }, kbdProps), children));
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, kbdProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Kbd, __assign({ ref: ref, sx: sx, className: (0, clsx_1.default)(classes.kbd, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), kbdProps), children));
 });
 exports.CommandPaletteShortcutKey.displayName = 'CommandPaletteShortcutKey';

package/command-palette/command-palette-group.js

@@ -61,6 +61,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteGroup = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var use_id_1 = require("../utils/use-id");
 var command_palette_classes_1 = require("./command-palette-classes");
@@ -97,23 +98,25 @@ var Items = (0, styled_1.styled)('div', {
     outline: 'none',
 }); });
 exports.CommandPaletteGroup = React.forwardRef(function (props, ref) {
-    var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
-    var id = (0, use_id_1.useId)() || '';
-    var headingId = "".concat(id, "-heading");
+    var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, value = props.value, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, groupProps = __rest(props, ["heading", "forceMount", "value", "analyticsId", "classes", "children", "className", "sx"]);
+    var generatedId = (0, use_id_1.useId)() || '';
+    var groupId = value || generatedId;
+    var headingId = generatedId ? "".concat(generatedId, "-heading") : undefined;
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     React.useLayoutEffect(function () {
-        var cleanup = context.group(id);
+        var cleanup = context.group(groupId);
         return cleanup;
-    }, [context, id]);
+    }, [context, groupId]);
     var filteredState = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.filtered; });
     var search = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search; });
-    var groupCount = filteredState.groups.get(id);
+    var groupCount = filteredState.groups.get(groupId);
     var isVisible = forceMount || context.filter === false || !search || (groupCount !== undefined && groupCount > 0);
     if (!isVisible)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.group, className), role: "presentation" }, groupProps),
-        heading && (React.createElement(Heading, { id: headingId, className: command_palette_classes_1.commandPaletteClasses.groupHeading, "aria-hidden": true }, heading)),
-        React.createElement(command_palette_context_1.CommandPaletteGroupContext.Provider, { value: id },
-            React.createElement(Items, { role: "group", className: command_palette_classes_1.commandPaletteClasses.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: (0, clsx_1.default)(classes.group, className), role: "presentation" }, (analyticsId && { 'data-analytics-id': analyticsId }), groupProps),
+        heading && (React.createElement(Heading, { id: headingId, className: classes.groupHeading, "aria-hidden": true }, heading)),
+        React.createElement(command_palette_context_1.CommandPaletteGroupContext.Provider, { value: groupId },
+            React.createElement(Items, { role: "group", className: classes.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
 });
 exports.CommandPaletteGroup.displayName = 'CommandPaletteGroup';

package/command-palette/command-palette-input.js

@@ -62,6 +62,7 @@ exports.CommandPaletteInput = void 0;
 var React = __importStar(require("react"));
 var icon_1 = require("../icon");
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
@@ -74,7 +75,7 @@ var Wrapper = (0, styled_1.styled)('div', {
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(1.5),
-        padding: "".concat(theme.spacing(1.5), " ").concat(theme.spacing(2)),
+        padding: "".concat(theme.spacing(1.75), " ").concat(theme.spacing(2.5)),
     });
 });
 var IconWrapper = (0, styled_1.styled)('div', {
@@ -105,8 +106,9 @@ var InputElement = (0, styled_1.styled)('input', {
         outline: 'none',
         backgroundColor: 'transparent',
         color: theme.tokens.color_fg_default,
-        fontSize: theme.typography.body1.fontSize,
-        lineHeight: theme.typography.body1.lineHeight,
+        fontSize: theme.typography.body2.fontSize,
+        fontWeight: theme.typography.fontWeightMedium,
+        lineHeight: theme.typography.body2.lineHeight,
         fontFamily: theme.typography.fontFamily,
         caretColor: theme.tokens.color_fg_brand_primary,
         '&::placeholder': {
@@ -118,7 +120,8 @@ var InputElement = (0, styled_1.styled)('input', {
     });
 });
 exports.CommandPaletteInput = React.forwardRef(function (props, ref) {
-    var _a = props.icon, icon = _a === void 0 ? React.createElement(icon_1.SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, className = props.className, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "className"]);
+    var _a = props.icon, icon = _a === void 0 ? React.createElement(icon_1.SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "analyticsId", "classes", "className", "sx"]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
     var store = (0, command_palette_context_1.useCommandPaletteStore)();
     var search = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search; });
@@ -137,8 +140,8 @@ exports.CommandPaletteInput = React.forwardRef(function (props, ref) {
         store.setState('search', e.target.value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     }, [store, onValueChange]);
-    return (React.createElement(Wrapper, { className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.inputWrapper, className) },
-        icon && React.createElement(IconWrapper, { className: command_palette_classes_1.commandPaletteClasses.inputIcon }, icon),
-        React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: command_palette_classes_1.commandPaletteClasses.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
+    return (React.createElement(Wrapper, __assign({ sx: sx, className: (0, clsx_1.default)(classes.inputWrapper, className) }, (analyticsId && { 'data-analytics-id': analyticsId })),
+        icon && React.createElement(IconWrapper, { className: classes.inputIcon }, icon),
+        React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: classes.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
 });
 exports.CommandPaletteInput.displayName = 'CommandPaletteInput';

package/command-palette/command-palette-item.js

@@ -87,6 +87,7 @@ exports.CommandPaletteItem = void 0;
 var React = __importStar(require("react"));
 var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var use_id_1 = require("../utils/use-id");
 var command_palette_1 = require("./command-palette");
@@ -97,7 +98,7 @@ var Root = (0, styled_1.styled)('div', {
     slot: 'Item',
 })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
+    return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(0.75), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
             duration: theme.transitions.duration.shortest,
         }) }, (ownerState.isSelected && {
         backgroundColor: theme.tokens.color_bg_interactive_hover,
@@ -199,7 +200,7 @@ function useValue(id, ref, deps) {
 exports.CommandPaletteItem = React.forwardRef(function (props, ref) {
     var _a;
     var _b, _c;
-    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
+    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "analyticsId", "classes", "children", "className", "sx"]);
     var generatedId = (0, use_id_1.useId)();
     var idRef = React.useRef();
     if (!idRef.current) {
@@ -211,6 +212,7 @@ exports.CommandPaletteItem = React.forwardRef(function (props, ref) {
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
     var store = (0, command_palette_context_1.useCommandPaletteStore)();
     var groupId = React.useContext(command_palette_context_1.CommandPaletteGroupContext);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     var itemValue = useValue(id, itemRef, [valueProp, keywords, children]);
     var selectedValue = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.selectedValue; });
     var isSelected = selectedValue === itemValue && itemValue !== '';
@@ -235,9 +237,9 @@ exports.CommandPaletteItem = React.forwardRef(function (props, ref) {
     var shortcutKeys = shortcut ? (Array.isArray(shortcut) ? shortcut : shortcut.split('+')) : null;
     if (!isVisible)
         return null;
-    return (React.createElement(Root, __assign((_a = { ref: mergedRef, ownerState: { isSelected: isSelected, disabled: disabled }, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.item, isSelected && command_palette_classes_1.commandPaletteClasses.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[command_palette_1.VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), itemProps),
-        icon && React.createElement(ItemIcon, { className: command_palette_classes_1.commandPaletteClasses.itemIcon }, icon),
-        React.createElement(ItemLabel, { className: command_palette_classes_1.commandPaletteClasses.itemLabel }, children),
-        shortcutKeys && (React.createElement(ItemShortcut, { className: command_palette_classes_1.commandPaletteClasses.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: command_palette_classes_1.commandPaletteClasses.kbd }, key)); })))));
+    return (React.createElement(Root, __assign((_a = { ref: mergedRef, sx: sx, ownerState: { isSelected: isSelected, disabled: disabled }, className: (0, clsx_1.default)(classes.item, isSelected && classes.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[command_palette_1.VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), (analyticsId && { 'data-analytics-id': analyticsId }), itemProps),
+        icon && React.createElement(ItemIcon, { className: classes.itemIcon }, icon),
+        React.createElement(ItemLabel, { className: classes.itemLabel }, children),
+        shortcutKeys && (React.createElement(ItemShortcut, { className: classes.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: classes.kbd }, key)); })))));
 });
 exports.CommandPaletteItem.displayName = 'CommandPaletteItem';

package/command-palette/command-palette-list.js

@@ -61,6 +61,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteList = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
@@ -93,9 +94,10 @@ var Inner = (0, styled_1.styled)('div', {
     slot: 'ListInner',
 })(function () { return ({}); });
 exports.CommandPaletteList = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, listProps = __rest(props, ["children", "className", "style"]);
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, style = props.style, sx = props.sx, listProps = __rest(props, ["children", "analyticsId", "classes", "className", "style", "sx"]);
     var context = (0, command_palette_context_1.useCommandPaletteContext)();
-    return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.list, className), style: style }, listProps),
-        React.createElement(Inner, { ref: context.listInnerRef }, children)));
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", sx: sx, className: (0, clsx_1.default)(classes.list, className), style: style }, (analyticsId && { 'data-analytics-id': analyticsId }), listProps),
+        React.createElement(Inner, { ref: context.listInnerRef, className: classes.listInner }, children)));
 });
 exports.CommandPaletteList.displayName = 'CommandPaletteList';

package/command-palette/command-palette-loading.js

@@ -62,6 +62,7 @@ exports.CommandPaletteLoading = void 0;
 var React = __importStar(require("react"));
 var spinner_1 = require("../spinner");
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var Root = (0, styled_1.styled)('div', {
@@ -81,8 +82,9 @@ var Root = (0, styled_1.styled)('div', {
     });
 });
 exports.CommandPaletteLoading = React.forwardRef(function (props, ref) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, className = props.className, loadingProps = __rest(props, ["progress", "children", "className"]);
-    return (React.createElement(Root, __assign({ ref: ref, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.loading, className) }, loadingProps),
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, loadingProps = __rest(props, ["progress", "children", "analyticsId", "classes", "className", "sx"]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: (0, clsx_1.default)(classes.loading, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), loadingProps),
         React.createElement(spinner_1.Spinner, null),
         children));
 });

package/command-palette/command-palette-separator.js

@@ -61,6 +61,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandPaletteSeparator = void 0;
 var React = __importStar(require("react"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var command_palette_context_1 = require("./command-palette-context");
@@ -76,11 +77,12 @@ var Root = (0, styled_1.styled)('div', {
     });
 });
 exports.CommandPaletteSeparator = React.forwardRef(function (props, ref) {
-    var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, className = props.className, separatorProps = __rest(props, ["alwaysRender", "className"]);
+    var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, separatorProps = __rest(props, ["alwaysRender", "analyticsId", "classes", "className", "sx"]);
     var search = (0, command_palette_context_1.useCommandPaletteState)(function (state) { return state.search; });
     var isSearching = search.length > 0;
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     if (!alwaysRender && isSearching)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, role: "separator", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.separator, className) }, separatorProps)));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "separator", className: (0, clsx_1.default)(classes.separator, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), separatorProps)));
 });
 exports.CommandPaletteSeparator.displayName = 'CommandPaletteSeparator';

package/command-palette/command-palette-tabs.js

@@ -62,6 +62,7 @@ exports.CommandPaletteTab = exports.CommandPaletteTabs = void 0;
 var React = __importStar(require("react"));
 var useForkRef_1 = __importDefault(require("@mui/utils/useForkRef"));
 var styled_1 = require("../styled");
+var classes_1 = require("../styles/classes");
 var clsx_1 = __importDefault(require("../utils/clsx"));
 var command_palette_classes_1 = require("./command-palette-classes");
 var Root = (0, styled_1.styled)('div', {
@@ -73,7 +74,7 @@ var Root = (0, styled_1.styled)('div', {
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(0.5),
-        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
+        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.25)),
         overflowX: 'auto',
         scrollbarWidth: 'none',
         '&::-webkit-scrollbar': {
@@ -86,23 +87,24 @@ var TabButton = (0, styled_1.styled)('button', {
     slot: 'Tab',
 })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
+    return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.25)), borderRadius: theme.spacing(0.75), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
             duration: theme.transitions.duration.shortest,
         }), color: theme.tokens.color_fg_disabled, backgroundColor: 'transparent' }, (ownerState.active && {
         color: theme.tokens.color_fg_default,
-        backgroundColor: theme.tokens.color_bg_state_neutral_subtle,
+        backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
     })), (!ownerState.active && {
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_interactive_hover,
         },
     })), { '&:focus-visible': {
             outline: 'none',
-            backgroundColor: theme.tokens.color_bg_interactive_hover,
+            backgroundColor: theme.tokens.color_bg_link_pressed,
         } }));
 });
 exports.CommandPaletteTabs = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, tabsProps = __rest(props, ["children", "className"]);
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, tabsProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
     var tabsRef = React.useRef(null);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     var handleKeyDown = React.useCallback(function (e) {
         var tabs = tabsRef.current;
         if (!tabs)
@@ -132,15 +134,16 @@ exports.CommandPaletteTabs = React.forwardRef(function (props, ref) {
         }
     }, []);
     var mergedRef = (0, useForkRef_1.default)(tabsRef, ref);
-    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.tabs, className), onKeyDown: handleKeyDown }, tabsProps), children));
+    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", sx: sx, className: (0, clsx_1.default)(classes.tabs, className), onKeyDown: handleKeyDown }, (analyticsId && { 'data-analytics-id': analyticsId }), tabsProps), children));
 });
 exports.CommandPaletteTabs.displayName = 'CommandPaletteTabs';
 exports.CommandPaletteTab = React.forwardRef(function (props, ref) {
-    var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, children = props.children, className = props.className, onClick = props.onClick, tabProps = __rest(props, ["active", "onSelect", "children", "className", "onClick"]);
+    var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, onClick = props.onClick, sx = props.sx, tabProps = __rest(props, ["active", "onSelect", "analyticsId", "classes", "children", "className", "onClick", "sx"]);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     var handleClick = React.useCallback(function (e) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onSelect, onClick]);
-    return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, ownerState: { active: active }, className: (0, clsx_1.default)(command_palette_classes_1.commandPaletteClasses.tab, active && command_palette_classes_1.commandPaletteClasses.tabSelected, className), onClick: handleClick }, tabProps), children));
+    return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, sx: sx, ownerState: { active: active }, className: (0, clsx_1.default)(classes.tab, active && classes.tabSelected, className), onClick: handleClick }, (analyticsId && { 'data-analytics-id': analyticsId }), tabProps), children));
 });
 exports.CommandPaletteTab.displayName = 'CommandPaletteTab';

package/command-palette/command-palette-types.d.ts

@@ -1,5 +1,15 @@
 import * as React from 'react';
+import type { SxProps } from '../styled';
+import type { CommandPaletteClasses } from './command-palette-classes';
 export type CommandPaletteFilterFn = (value: string, search: string, keywords?: string[]) => number;
+export interface ICommandPaletteCommonProps {
+    /** Analytics identifier rendered as `data-analytics-id` */
+    analyticsId?: string;
+    /** Slot class overrides */
+    classes?: Partial<CommandPaletteClasses>;
+    /** Style overrides */
+    sx?: SxProps;
+}
 export interface ICommandPaletteState {
     search: string;
     selectedValue: string;
@@ -25,7 +35,7 @@ export interface ICommandPaletteContextValue {
     inputId: string;
     listInnerRef: React.RefObject<HTMLDivElement | null>;
 }
-export interface ICommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ICommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>, ICommandPaletteCommonProps {
     /** Accessible label for the command palette */
     label?: string;
     /** Controlled search value */
@@ -46,25 +56,25 @@ export interface ICommandPaletteProps extends Omit<React.HTMLAttributes<HTMLDivE
     onSelect?(value: string): void;
     children?: React.ReactNode;
 }
-export interface ICommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'> {
+export interface ICommandPaletteInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'type'>, ICommandPaletteCommonProps {
     /** Icon to show before the input */
     icon?: React.ReactNode;
     /** Callback when value changes */
     onValueChange?(search: string): void;
 }
-export interface ICommandPaletteListProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteListProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     children?: React.ReactNode;
 }
-export interface ICommandPaletteGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteGroupProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     /** Heading text for the group */
     heading?: React.ReactNode;
     /** Force render even when all items are filtered out */
     forceMount?: boolean;
-    /** Unique value for the group used for filtering */
+    /** Stable value used to identify the group in filtering state */
     value?: string;
     children?: React.ReactNode;
 }
-export interface ICommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+export interface ICommandPaletteItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>, ICommandPaletteCommonProps {
     /** Unique value for the item (auto-derived from textContent if not provided) */
     value?: string;
     /** Additional keywords for filtering */
@@ -81,24 +91,24 @@ export interface ICommandPaletteItemProps extends Omit<React.HTMLAttributes<HTML
     shortcut?: string | string[];
     children?: React.ReactNode;
 }
-export interface ICommandPaletteTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteTabsProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     children?: React.ReactNode;
 }
-export interface ICommandPaletteTabProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ICommandPaletteTabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ICommandPaletteCommonProps {
     /** Whether this tab is currently active */
     active?: boolean;
     /** Callback when tab is clicked */
     onSelect?(): void;
     children?: React.ReactNode;
 }
-export interface ICommandPaletteSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteSeparatorProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     /** Render even when search is active */
     alwaysRender?: boolean;
 }
-export interface ICommandPaletteEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteEmptyProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     children?: React.ReactNode;
 }
-export interface ICommandPaletteLoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteLoadingProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     /** Progress percentage (0-100) */
     progress?: number;
     children?: React.ReactNode;
@@ -113,9 +123,9 @@ export interface ICommandPaletteDialogProps extends ICommandPaletteProps {
     /** Props to pass to the dialog content wrapper */
     contentProps?: React.HTMLAttributes<HTMLDivElement>;
 }
-export interface ICommandPaletteFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ICommandPaletteFooterProps extends React.HTMLAttributes<HTMLDivElement>, ICommandPaletteCommonProps {
     children?: React.ReactNode;
 }
-export interface ICommandPaletteShortcutKeyProps extends React.HTMLAttributes<HTMLElement> {
+export interface ICommandPaletteShortcutKeyProps extends React.HTMLAttributes<HTMLElement>, ICommandPaletteCommonProps {
     children?: React.ReactNode;
 }

package/command-palette/command-palette.js

@@ -220,7 +220,7 @@ function useScheduleLayoutEffect() {
 }
 exports.CommandPalette = React.forwardRef(function (props, ref) {
     var _a;
-    var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, children = props.children, className = props.className, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "children", "className"]);
+    var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "analyticsId", "classes", "children", "className", "sx"]);
     var generatedId = (0, use_id_1.useId)();
     var id = (_a = rootProps.id) !== null && _a !== void 0 ? _a : generatedId;
     var listId = id ? "".concat(id, "-list") : undefined;
@@ -469,9 +469,9 @@ exports.CommandPalette = React.forwardRef(function (props, ref) {
             }
         }
     }, [loop, store, propsRef]);
-    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, undefined);
+    var classes = (0, classes_1.useMergedClasses)(command_palette_classes_1.commandPaletteClasses, command_palette_classes_1.getCommandPaletteUtilityClass, propClasses);
     return (React.createElement(command_palette_context_1.CommandPaletteStoreContext.Provider, { value: store.current },
         React.createElement(command_palette_context_1.CommandPaletteContext.Provider, { value: context },
-            React.createElement(Root, __assign({ ref: ref, className: (0, clsx_1.default)(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, rootProps), children))));
+            React.createElement(Root, __assign({ ref: ref, sx: sx, className: (0, clsx_1.default)(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps), children))));
 });
 exports.CommandPalette.displayName = 'CommandPalette';

package/esm/command-palette/command-palette-classes.js

@@ -9,6 +9,7 @@ export var commandPaletteClasses = generateUtilityClasses(commandPaletteComponen
     'inputWrapper',
     'inputIcon',
     'list',
+    'listInner',
     'group',
     'groupHeading',
     'groupItems',

package/esm/command-palette/command-palette-dialog.js

@@ -24,9 +24,10 @@ import * as React from 'react';
 import MuiDialog from '@mui/material/Dialog';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
 import { CommandPalette } from './command-palette';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 var StyledDialog = styled(MuiDialog, {
     name: commandPaletteComponentName,
     slot: 'Dialog',
@@ -45,18 +46,19 @@ var StyledDialog = styled(MuiDialog, {
             overflow: 'hidden',
             backgroundColor: theme.tokens.color_bg_layer_elevated,
             border: "1px solid ".concat(theme.tokens.color_border_default),
-            boxShadow: "0px 33px 80px rgba(0, 0, 0, 0.12),\n                0px 13.7866px 33.4221px rgba(0, 0, 0, 0.086),\n                0px 7.37098px 17.869px rgba(0, 0, 0, 0.07),\n                0px 4.13211px 10.0172px rgba(0, 0, 0, 0.06),\n                0px 2.19453px 5.32008px rgba(0, 0, 0, 0.048),\n                0px 0.913195px 2.21381px rgba(0, 0, 0, 0.034)",
+            boxShadow: '0 -1px 0 -1px rgba(0,0,0,0.06), 0 1px 0 -1px rgba(0,0,0,0.06), 0 2px 24px -6px rgba(0,0,0,0.04), 0 4px 48px -12px rgba(0,0,0,0.04), 0 8px 80px -24px rgba(0,0,0,0.04)',
         },
         '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            backdropFilter: 'blur(4px)',
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            backdropFilter: 'blur(2px)',
         },
     });
 });
 export var CommandPaletteDialog = React.forwardRef(function (props, ref) {
-    var _a = props.open, open = _a === void 0 ? false : _a, onOpenChange = props.onOpenChange, overlayProps = props.overlayProps, contentProps = props.contentProps, children = props.children, className = props.className, commandPaletteProps = __rest(props, ["open", "onOpenChange", "overlayProps", "contentProps", "children", "className"]);
+    var _a = props.open, open = _a === void 0 ? false : _a, onOpenChange = props.onOpenChange, overlayProps = props.overlayProps, contentProps = props.contentProps, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, commandPaletteProps = __rest(props, ["open", "onOpenChange", "overlayProps", "contentProps", "analyticsId", "classes", "children", "className", "sx"]);
     var paletteRef = React.useRef(null);
     var handleRef = useForkRef(ref, paletteRef);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     var handleEntered = React.useCallback(function () {
         requestAnimationFrame(function () {
             var _a;
@@ -67,7 +69,7 @@ export var CommandPaletteDialog = React.forwardRef(function (props, ref) {
     var handleClose = React.useCallback(function () {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     }, [onOpenChange]);
-    return (React.createElement(StyledDialog, { open: open, onClose: handleClose, TransitionProps: { onEntered: handleEntered }, className: clsx(commandPaletteClasses.dialog, className), maxWidth: false, BackdropProps: overlayProps, PaperProps: contentProps },
+    return (React.createElement(StyledDialog, __assign({ open: open, onClose: handleClose, TransitionProps: { onEntered: handleEntered }, sx: sx, className: clsx(classes.dialog, className), maxWidth: false, BackdropProps: overlayProps, PaperProps: __assign(__assign({}, contentProps), { className: clsx(commandPaletteClasses.dialogPaper, classes.dialogPaper, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }, (analyticsId && { 'data-analytics-id': analyticsId })),
         React.createElement(CommandPalette, __assign({ ref: handleRef }, commandPaletteProps), children)));
 });
 CommandPaletteDialog.displayName = 'CommandPaletteDialog';

package/esm/command-palette/command-palette-empty.js

@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { useCommandPaletteState } from './command-palette-context';
 var Root = styled('div', {
     name: commandPaletteComponentName,
@@ -41,11 +42,12 @@ var Root = styled('div', {
     });
 });
 export var CommandPaletteEmpty = React.forwardRef(function (props, ref) {
-    var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, className = props.className, emptyProps = __rest(props, ["children", "className"]);
+    var _a = props.children, children = _a === void 0 ? 'No results found.' : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, emptyProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
     var filteredCount = useCommandPaletteState(function (state) { return state.filtered.count; });
     var isSearching = useCommandPaletteState(function (state) { return state.search.length > 0; });
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     if (!isSearching || filteredCount > 0)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, role: "presentation", className: clsx(commandPaletteClasses.empty, className) }, emptyProps), children));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "presentation", className: clsx(classes.empty, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), emptyProps), children));
 });
 CommandPaletteEmpty.displayName = 'CommandPaletteEmpty';

package/esm/command-palette/command-palette-footer.js

@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 var Root = styled('div', {
     name: commandPaletteComponentName,
     slot: 'Footer',
@@ -41,7 +42,7 @@ var Root = styled('div', {
 });
 var Kbd = styled('kbd', {
     name: commandPaletteComponentName,
-    slot: 'FooterKbd',
+    slot: 'Kbd',
 })(function (_a) {
     var theme = _a.theme;
     return ({
@@ -61,12 +62,14 @@ var Kbd = styled('kbd', {
     });
 });
 export var CommandPaletteFooter = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, footerProps = __rest(props, ["children", "className"]);
-    return (React.createElement(Root, __assign({ ref: ref, className: clsx(commandPaletteClasses.footer, className) }, footerProps), children));
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, footerProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.footer, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), footerProps), children));
 });
 CommandPaletteFooter.displayName = 'CommandPaletteFooter';
 export var CommandPaletteShortcutKey = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, kbdProps = __rest(props, ["children", "className"]);
-    return (React.createElement(Kbd, __assign({ ref: ref, className: clsx(commandPaletteClasses.kbd, className) }, kbdProps), children));
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, kbdProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Kbd, __assign({ ref: ref, sx: sx, className: clsx(classes.kbd, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), kbdProps), children));
 });
 CommandPaletteShortcutKey.displayName = 'CommandPaletteShortcutKey';

package/esm/command-palette/command-palette-group.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
 import { useId } from '../utils/use-id';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, } from './command-palette-context';
 var Root = styled('div', {
     name: commandPaletteComponentName,
@@ -58,23 +59,25 @@ var Items = styled('div', {
     outline: 'none',
 }); });
 export var CommandPaletteGroup = React.forwardRef(function (props, ref) {
-    var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, children = props.children, className = props.className, groupProps = __rest(props, ["heading", "forceMount", "children", "className"]);
-    var id = useId() || '';
-    var headingId = "".concat(id, "-heading");
+    var heading = props.heading, _a = props.forceMount, forceMount = _a === void 0 ? false : _a, value = props.value, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, groupProps = __rest(props, ["heading", "forceMount", "value", "analyticsId", "classes", "children", "className", "sx"]);
+    var generatedId = useId() || '';
+    var groupId = value || generatedId;
+    var headingId = generatedId ? "".concat(generatedId, "-heading") : undefined;
     var context = useCommandPaletteContext();
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     React.useLayoutEffect(function () {
-        var cleanup = context.group(id);
+        var cleanup = context.group(groupId);
         return cleanup;
-    }, [context, id]);
+    }, [context, groupId]);
     var filteredState = useCommandPaletteState(function (state) { return state.filtered; });
     var search = useCommandPaletteState(function (state) { return state.search; });
-    var groupCount = filteredState.groups.get(id);
+    var groupCount = filteredState.groups.get(groupId);
     var isVisible = forceMount || context.filter === false || !search || (groupCount !== undefined && groupCount > 0);
     if (!isVisible)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, className: clsx(commandPaletteClasses.group, className), role: "presentation" }, groupProps),
-        heading && (React.createElement(Heading, { id: headingId, className: commandPaletteClasses.groupHeading, "aria-hidden": true }, heading)),
-        React.createElement(CommandPaletteGroupContext.Provider, { value: id },
-            React.createElement(Items, { role: "group", className: commandPaletteClasses.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.group, className), role: "presentation" }, (analyticsId && { 'data-analytics-id': analyticsId }), groupProps),
+        heading && (React.createElement(Heading, { id: headingId, className: classes.groupHeading, "aria-hidden": true }, heading)),
+        React.createElement(CommandPaletteGroupContext.Provider, { value: groupId },
+            React.createElement(Items, { role: "group", className: classes.groupItems, "aria-labelledby": heading ? headingId : undefined }, children))));
 });
 CommandPaletteGroup.displayName = 'CommandPaletteGroup';

package/esm/command-palette/command-palette-input.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { SearchIcon } from '../icon';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { useCommandPaletteContext, useCommandPaletteState, useCommandPaletteStore } from './command-palette-context';
 var Wrapper = styled('div', {
     name: commandPaletteComponentName,
@@ -35,7 +36,7 @@ var Wrapper = styled('div', {
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(1.5),
-        padding: "".concat(theme.spacing(1.5), " ").concat(theme.spacing(2)),
+        padding: "".concat(theme.spacing(1.75), " ").concat(theme.spacing(2.5)),
     });
 });
 var IconWrapper = styled('div', {
@@ -66,8 +67,9 @@ var InputElement = styled('input', {
         outline: 'none',
         backgroundColor: 'transparent',
         color: theme.tokens.color_fg_default,
-        fontSize: theme.typography.body1.fontSize,
-        lineHeight: theme.typography.body1.lineHeight,
+        fontSize: theme.typography.body2.fontSize,
+        fontWeight: theme.typography.fontWeightMedium,
+        lineHeight: theme.typography.body2.lineHeight,
         fontFamily: theme.typography.fontFamily,
         caretColor: theme.tokens.color_fg_brand_primary,
         '&::placeholder': {
@@ -79,7 +81,8 @@ var InputElement = styled('input', {
     });
 });
 export var CommandPaletteInput = React.forwardRef(function (props, ref) {
-    var _a = props.icon, icon = _a === void 0 ? React.createElement(SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, className = props.className, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "className"]);
+    var _a = props.icon, icon = _a === void 0 ? React.createElement(SearchIcon, { size: 20 }) : _a, _b = props.placeholder, placeholder = _b === void 0 ? 'Search for commands...' : _b, onValueChange = props.onValueChange, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, inputProps = __rest(props, ["icon", "placeholder", "onValueChange", "analyticsId", "classes", "className", "sx"]);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     var context = useCommandPaletteContext();
     var store = useCommandPaletteStore();
     var search = useCommandPaletteState(function (state) { return state.search; });
@@ -98,8 +101,8 @@ export var CommandPaletteInput = React.forwardRef(function (props, ref) {
         store.setState('search', e.target.value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     }, [store, onValueChange]);
-    return (React.createElement(Wrapper, { className: clsx(commandPaletteClasses.inputWrapper, className) },
-        icon && React.createElement(IconWrapper, { className: commandPaletteClasses.inputIcon }, icon),
-        React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: commandPaletteClasses.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
+    return (React.createElement(Wrapper, __assign({ sx: sx, className: clsx(classes.inputWrapper, className) }, (analyticsId && { 'data-analytics-id': analyticsId })),
+        icon && React.createElement(IconWrapper, { className: classes.inputIcon }, icon),
+        React.createElement(InputElement, __assign({ ref: ref, id: context.inputId, className: classes.input, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": context.listId, "aria-label": placeholder, "aria-autocomplete": "list", autoComplete: "off", autoCorrect: "off", spellCheck: false, placeholder: placeholder, value: search, onChange: handleChange, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, inputProps))));
 });
 CommandPaletteInput.displayName = 'CommandPaletteInput';

package/esm/command-palette/command-palette-item.js

@@ -48,17 +48,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
 import { useId } from '../utils/use-id';
 import { VALUE_ATTR } from './command-palette';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { CommandPaletteGroupContext, useCommandPaletteContext, useCommandPaletteState, useCommandPaletteStore, } from './command-palette-context';
 var Root = styled('div', {
     name: commandPaletteComponentName,
     slot: 'Item',
 })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
+    return (__assign(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', gap: theme.spacing(1.5), padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(0.75), cursor: 'pointer', userSelect: 'none', fontSize: theme.typography.body2.fontSize, fontWeight: theme.typography.fontWeightMedium, lineHeight: theme.typography.body2.lineHeight, color: theme.tokens.color_fg_default, transition: theme.transitions.create(['background-color', 'color'], {
             duration: theme.transitions.duration.shortest,
         }) }, (ownerState.isSelected && {
         backgroundColor: theme.tokens.color_bg_interactive_hover,
@@ -160,7 +161,7 @@ function useValue(id, ref, deps) {
 export var CommandPaletteItem = React.forwardRef(function (props, ref) {
     var _a;
     var _b, _c;
-    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, children = props.children, className = props.className, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "children", "className"]);
+    var valueProp = props.value, keywords = props.keywords, _d = props.disabled, disabled = _d === void 0 ? false : _d, onSelect = props.onSelect, _e = props.forceMount, forceMount = _e === void 0 ? false : _e, icon = props.icon, shortcut = props.shortcut, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, itemProps = __rest(props, ["value", "keywords", "disabled", "onSelect", "forceMount", "icon", "shortcut", "analyticsId", "classes", "children", "className", "sx"]);
     var generatedId = useId();
     var idRef = React.useRef();
     if (!idRef.current) {
@@ -172,6 +173,7 @@ export var CommandPaletteItem = React.forwardRef(function (props, ref) {
     var context = useCommandPaletteContext();
     var store = useCommandPaletteStore();
     var groupId = React.useContext(CommandPaletteGroupContext);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     var itemValue = useValue(id, itemRef, [valueProp, keywords, children]);
     var selectedValue = useCommandPaletteState(function (state) { return state.selectedValue; });
     var isSelected = selectedValue === itemValue && itemValue !== '';
@@ -196,9 +198,9 @@ export var CommandPaletteItem = React.forwardRef(function (props, ref) {
     var shortcutKeys = shortcut ? (Array.isArray(shortcut) ? shortcut : shortcut.split('+')) : null;
     if (!isVisible)
         return null;
-    return (React.createElement(Root, __assign((_a = { ref: mergedRef, ownerState: { isSelected: isSelected, disabled: disabled }, className: clsx(commandPaletteClasses.item, isSelected && commandPaletteClasses.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), itemProps),
-        icon && React.createElement(ItemIcon, { className: commandPaletteClasses.itemIcon }, icon),
-        React.createElement(ItemLabel, { className: commandPaletteClasses.itemLabel }, children),
-        shortcutKeys && (React.createElement(ItemShortcut, { className: commandPaletteClasses.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: commandPaletteClasses.kbd }, key)); })))));
+    return (React.createElement(Root, __assign((_a = { ref: mergedRef, sx: sx, ownerState: { isSelected: isSelected, disabled: disabled }, className: clsx(classes.item, isSelected && classes.itemSelected, className), role: "option", "aria-selected": isSelected, "aria-disabled": disabled, "data-disabled": disabled || undefined }, _a[VALUE_ATTR] = encodeURIComponent(itemValue), _a.onPointerMove = handlePointerMove, _a.onClick = handleClick, _a), (analyticsId && { 'data-analytics-id': analyticsId }), itemProps),
+        icon && React.createElement(ItemIcon, { className: classes.itemIcon }, icon),
+        React.createElement(ItemLabel, { className: classes.itemLabel }, children),
+        shortcutKeys && (React.createElement(ItemShortcut, { className: classes.itemShortcut }, shortcutKeys.map(function (key, i) { return (React.createElement(Kbd, { key: i, className: classes.kbd }, key)); })))));
 });
 CommandPaletteItem.displayName = 'CommandPaletteItem';

package/esm/command-palette/command-palette-list.js

@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { useCommandPaletteContext } from './command-palette-context';
 var Root = styled('div', {
     name: commandPaletteComponentName,
@@ -54,9 +55,10 @@ var Inner = styled('div', {
     slot: 'ListInner',
 })(function () { return ({}); });
 export var CommandPaletteList = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, listProps = __rest(props, ["children", "className", "style"]);
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, style = props.style, sx = props.sx, listProps = __rest(props, ["children", "analyticsId", "classes", "className", "style", "sx"]);
     var context = useCommandPaletteContext();
-    return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", className: clsx(commandPaletteClasses.list, className), style: style }, listProps),
-        React.createElement(Inner, { ref: context.listInnerRef }, children)));
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, id: context.listId, role: "listbox", "aria-label": "Suggestions", sx: sx, className: clsx(classes.list, className), style: style }, (analyticsId && { 'data-analytics-id': analyticsId }), listProps),
+        React.createElement(Inner, { ref: context.listInnerRef, className: classes.listInner }, children)));
 });
 CommandPaletteList.displayName = 'CommandPaletteList';

package/esm/command-palette/command-palette-loading.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { Spinner } from '../spinner';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 var Root = styled('div', {
     name: commandPaletteComponentName,
     slot: 'Loading',
@@ -42,8 +43,9 @@ var Root = styled('div', {
     });
 });
 export var CommandPaletteLoading = React.forwardRef(function (props, ref) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, className = props.className, loadingProps = __rest(props, ["progress", "children", "className"]);
-    return (React.createElement(Root, __assign({ ref: ref, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: clsx(commandPaletteClasses.loading, className) }, loadingProps),
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.children, children = _b === void 0 ? 'Loading...' : _b, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, loadingProps = __rest(props, ["progress", "children", "analyticsId", "classes", "className", "sx"]);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "progressbar", "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": "Loading results", className: clsx(classes.loading, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), loadingProps),
         React.createElement(Spinner, null),
         children));
 });

package/esm/command-palette/command-palette-separator.js

@@ -22,8 +22,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 import { useCommandPaletteState } from './command-palette-context';
 var Root = styled('div', {
     name: commandPaletteComponentName,
@@ -37,11 +38,12 @@ var Root = styled('div', {
     });
 });
 export var CommandPaletteSeparator = React.forwardRef(function (props, ref) {
-    var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, className = props.className, separatorProps = __rest(props, ["alwaysRender", "className"]);
+    var _a = props.alwaysRender, alwaysRender = _a === void 0 ? false : _a, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, separatorProps = __rest(props, ["alwaysRender", "analyticsId", "classes", "className", "sx"]);
     var search = useCommandPaletteState(function (state) { return state.search; });
     var isSearching = search.length > 0;
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     if (!alwaysRender && isSearching)
         return null;
-    return (React.createElement(Root, __assign({ ref: ref, role: "separator", className: clsx(commandPaletteClasses.separator, className) }, separatorProps)));
+    return (React.createElement(Root, __assign({ ref: ref, sx: sx, role: "separator", className: clsx(classes.separator, className) }, (analyticsId && { 'data-analytics-id': analyticsId }), separatorProps)));
 });
 CommandPaletteSeparator.displayName = 'CommandPaletteSeparator';

package/esm/command-palette/command-palette-tabs.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '../styled';
+import { useMergedClasses } from '../styles/classes';
 import clsx from '../utils/clsx';
-import { commandPaletteClasses, commandPaletteComponentName } from './command-palette-classes';
+import { commandPaletteClasses, commandPaletteComponentName, getCommandPaletteUtilityClass, } from './command-palette-classes';
 var Root = styled('div', {
     name: commandPaletteComponentName,
     slot: 'Tabs',
@@ -34,7 +35,7 @@ var Root = styled('div', {
         display: 'flex',
         alignItems: 'center',
         gap: theme.spacing(0.5),
-        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2)),
+        padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(1.25)),
         overflowX: 'auto',
         scrollbarWidth: 'none',
         '&::-webkit-scrollbar': {
@@ -47,23 +48,24 @@ var TabButton = styled('button', {
     slot: 'Tab',
 })(function (_a) {
     var theme = _a.theme, ownerState = _a.ownerState;
-    return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.5)), borderRadius: theme.spacing(1), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
+    return (__assign(__assign(__assign({ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: "".concat(theme.spacing(0.5), " ").concat(theme.spacing(1.25)), borderRadius: theme.spacing(0.75), border: 'none', cursor: 'pointer', fontSize: theme.typography.caption.fontSize, fontWeight: theme.typography.fontWeightSemibold, fontFamily: theme.typography.caption.fontFamily, lineHeight: theme.typography.caption.lineHeight, whiteSpace: 'nowrap', userSelect: 'none', transition: theme.transitions.create(['background-color', 'color'], {
             duration: theme.transitions.duration.shortest,
         }), color: theme.tokens.color_fg_disabled, backgroundColor: 'transparent' }, (ownerState.active && {
         color: theme.tokens.color_fg_default,
-        backgroundColor: theme.tokens.color_bg_state_neutral_subtle,
+        backgroundColor: theme.tokens.color_bg_layer_alternate_bold,
     })), (!ownerState.active && {
         '&:hover': {
             backgroundColor: theme.tokens.color_bg_interactive_hover,
         },
     })), { '&:focus-visible': {
             outline: 'none',
-            backgroundColor: theme.tokens.color_bg_interactive_hover,
+            backgroundColor: theme.tokens.color_bg_link_pressed,
         } }));
 });
 export var CommandPaletteTabs = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, tabsProps = __rest(props, ["children", "className"]);
+    var children = props.children, analyticsId = props.analyticsId, propClasses = props.classes, className = props.className, sx = props.sx, tabsProps = __rest(props, ["children", "analyticsId", "classes", "className", "sx"]);
     var tabsRef = React.useRef(null);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     var handleKeyDown = React.useCallback(function (e) {
         var tabs = tabsRef.current;
         if (!tabs)
@@ -93,15 +95,16 @@ export var CommandPaletteTabs = React.forwardRef(function (props, ref) {
         }
     }, []);
     var mergedRef = useForkRef(tabsRef, ref);
-    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", className: clsx(commandPaletteClasses.tabs, className), onKeyDown: handleKeyDown }, tabsProps), children));
+    return (React.createElement(Root, __assign({ ref: mergedRef, role: "tablist", sx: sx, className: clsx(classes.tabs, className), onKeyDown: handleKeyDown }, (analyticsId && { 'data-analytics-id': analyticsId }), tabsProps), children));
 });
 CommandPaletteTabs.displayName = 'CommandPaletteTabs';
 export var CommandPaletteTab = React.forwardRef(function (props, ref) {
-    var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, children = props.children, className = props.className, onClick = props.onClick, tabProps = __rest(props, ["active", "onSelect", "children", "className", "onClick"]);
+    var _a = props.active, active = _a === void 0 ? false : _a, onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, onClick = props.onClick, sx = props.sx, tabProps = __rest(props, ["active", "onSelect", "analyticsId", "classes", "children", "className", "onClick", "sx"]);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     var handleClick = React.useCallback(function (e) {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     }, [onSelect, onClick]);
-    return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, ownerState: { active: active }, className: clsx(commandPaletteClasses.tab, active && commandPaletteClasses.tabSelected, className), onClick: handleClick }, tabProps), children));
+    return (React.createElement(TabButton, __assign({ ref: ref, role: "tab", type: "button", "aria-selected": active, tabIndex: active ? 0 : -1, sx: sx, ownerState: { active: active }, className: clsx(classes.tab, active && classes.tabSelected, className), onClick: handleClick }, (analyticsId && { 'data-analytics-id': analyticsId }), tabProps), children));
 });
 CommandPaletteTab.displayName = 'CommandPaletteTab';

package/esm/command-palette/command-palette.js

@@ -180,7 +180,7 @@ function useScheduleLayoutEffect() {
 }
 export var CommandPalette = React.forwardRef(function (props, ref) {
     var _a;
-    var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, children = props.children, className = props.className, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "children", "className"]);
+    var _b = props.label, label = _b === void 0 ? 'Command palette' : _b, searchProp = props.search, _onSearchChange = props.onSearchChange, valueProp = props.value, _onValueChange = props.onValueChange, filterProp = props.filter, _c = props.shouldFilter, shouldFilter = _c === void 0 ? true : _c, _d = props.loop, loop = _d === void 0 ? false : _d, _onSelect = props.onSelect, analyticsId = props.analyticsId, propClasses = props.classes, children = props.children, className = props.className, sx = props.sx, rootProps = __rest(props, ["label", "search", "onSearchChange", "value", "onValueChange", "filter", "shouldFilter", "loop", "onSelect", "analyticsId", "classes", "children", "className", "sx"]);
     var generatedId = useId();
     var id = (_a = rootProps.id) !== null && _a !== void 0 ? _a : generatedId;
     var listId = id ? "".concat(id, "-list") : undefined;
@@ -429,10 +429,10 @@ export var CommandPalette = React.forwardRef(function (props, ref) {
             }
         }
     }, [loop, store, propsRef]);
-    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, undefined);
+    var classes = useMergedClasses(commandPaletteClasses, getCommandPaletteUtilityClass, propClasses);
     return (React.createElement(CommandPaletteStoreContext.Provider, { value: store.current },
         React.createElement(CommandPaletteContext.Provider, { value: context },
-            React.createElement(Root, __assign({ ref: ref, className: clsx(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, rootProps), children))));
+            React.createElement(Root, __assign({ ref: ref, sx: sx, className: clsx(classes.root, className), tabIndex: -1, onKeyDown: handleKeyDown, "aria-label": label }, (analyticsId && { 'data-analytics-id': analyticsId }), rootProps), children))));
 });
 CommandPalette.displayName = 'CommandPalette';
 export { VALUE_ATTR };

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

@@ -17,6 +17,7 @@ export var createMuiInputLabelOverrides = function (_a) {
                 _b["&.".concat(inputLabelClasses.shrink)] = {
                     transform: 'none',
                 },
+                _b.userSelect = 'auto',
                 _b),
             asterisk: {
                 color: tokens.color_fg_state_neutral,

package/input/input-label/input-label-overrides.d.ts

@@ -1,3 +1,3 @@
-import type { InputLabelProps, InputLabelClassKey } from '@mui/material/InputLabel';
+import type { InputLabelClassKey, InputLabelProps } from '@mui/material/InputLabel';
 import type { ComponentOverrideCreator } from '../../theme/create-component-overrides';
 export declare const createMuiInputLabelOverrides: ComponentOverrideCreator<InputLabelProps, InputLabelClassKey>;

package/input/input-label/input-label-overrides.js

@@ -20,6 +20,7 @@ var createMuiInputLabelOverrides = function (_a) {
                 _b["&.".concat(InputLabel_1.inputLabelClasses.shrink)] = {
                     transform: 'none',
                 },
+                _b.userSelect = 'auto',
                 _b),
             asterisk: {
                 color: tokens.color_fg_state_neutral,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "2.10.6",
+  "version": "2.10.7",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {