@auth0/quantum-product 2.10.6 → 2.10.8

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 };