@cube-dev/ui-kit 0.67.0 → 0.69.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @cube-dev/ui-kit
 
+## 0.69.0
+
+### Minor Changes
+
+- [#731](https://github.com/cube-js/cube-ui-kit/pull/731) [`1b57ef6c`](https://github.com/cube-js/cube-ui-kit/commit/1b57ef6c00e8e0fc8437aa92f02c57418cf7b048) Thanks [@tenphi](https://github.com/tenphi)! - More condensed UI. New sizes: medium (40) -> large (40), small (32) -> medium (32), large (48) -> xlarge (48), small (28), xsmall (24).
+
+- [#731](https://github.com/cube-js/cube-ui-kit/pull/731) [`1b57ef6c`](https://github.com/cube-js/cube-ui-kit/commit/1b57ef6c00e8e0fc8437aa92f02c57418cf7b048) Thanks [@tenphi](https://github.com/tenphi)! - Add size prop for TextInputMapper.
+
+## 0.68.0
+
+### Minor Changes
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Add FilterPicker component for single and multiple picker experience with a filter.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Split ListBox into two components: simple ListBox and FilterListBox with search input.
+
+### Patch Changes
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Improve the layout of Menu component.
+
+- [#727](https://github.com/cube-js/cube-ui-kit/pull/727) [`fa1397f2`](https://github.com/cube-js/cube-ui-kit/commit/fa1397f26e2f6ece95aec915f43e0815355d74f6) Thanks [@tenphi](https://github.com/tenphi)! - Add `fs` custom unit for stable fractions in grid layouts. `1sf` -> `minmax(0, 1fr)`.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - `wrapWithField` no longer wrap the input component with a field if no label is provided and `forceField` prop is not set.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Add a new icon ChartKPI.
+
+- [#727](https://github.com/cube-js/cube-ui-kit/pull/727) [`fa1397f2`](https://github.com/cube-js/cube-ui-kit/commit/fa1397f26e2f6ece95aec915f43e0815355d74f6) Thanks [@tenphi](https://github.com/tenphi)! - Improved tasty documentation.
+
 ## 0.67.0
 
 ### Minor Changes

package/es/_internal/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-chained-callback.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-deprecation-warning.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-event.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-sync-ref.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-update-effect.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-warn.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/_internal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/Block.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/GridProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/HiddenInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/actions/Action/Action.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -30,31 +30,38 @@ export const DEFAULT_BUTTON_STYLES = {
     flow: 'column',
     preset: {
         '': 't3m',
-        '[data-size="large"]': 't2m',
+        '[data-size="xsmall"]': 't4',
+        '[data-size="xlarge"]': 't2m',
     },
     textDecoration: 'none',
     transition: 'theme',
     reset: 'button',
     outlineOffset: 1,
     padding: {
-        '': '0 (2x - 1bw)',
-        '[data-size="small"]': '0 (1x - 1bw)',
-        '[data-size="medium"]': '0 (1.5x - 1bw)',
-        '[data-size="large"]': '0 (2.25x - 1bw)',
+        '': '.5x (1.5x - 1bw)',
+        '[data-size="small"] | [data-size="xsmall"]': '.5x (1x - 1bw)',
+        '[data-size="medium"]': '.5x (1.5x - 1bw)',
+        '[data-size="large"]': '.5x (2x - 1bw)',
+        '[data-size="xlarge"]': '.5x (2.25x - 1bw)',
         'single-icon-only | [data-type="link"]': 0,
     },
     width: {
         '': 'initial',
-        '[data-size="small"] & single-icon-only': '4x 4x',
-        '[data-size="medium"] & single-icon-only': '5x 5x',
-        '[data-size="large"] & single-icon-only': '6x 6x',
+        '[data-size="xsmall"] & single-icon-only': '@size-xs @size-xs',
+        '[data-size="small"] & single-icon-only': '@size-sm @size-sm',
+        '[data-size="medium"] & single-icon-only': '@size-md @size-md',
+        '[data-size="large"] & single-icon-only': '@size-lg @size-lg',
+        '[data-size="xlarge"] & single-icon-only': '@size-xl @size-xl',
+        '[data-type="link"]': 'initial',
     },
     height: {
         '': 'initial',
-        '[data-size="small"]': '4x 4x',
-        '[data-size="medium"]': '5x 5x',
-        '[data-size="large"]': '6x 6x',
-        '[data-type="link"]': 'auto',
+        '[data-size="xsmall"]': '@size-xs @size-xs',
+        '[data-size="small"]': '@size-sm @size-sm',
+        '[data-size="medium"]': '@size-md @size-md',
+        '[data-size="large"]': '@size-lg @size-lg',
+        '[data-size="xlarge"]': '@size-xl @size-xl',
+        '[data-type="link"]': 'initial',
     },
     whiteSpace: 'nowrap',
     radius: {
@@ -112,13 +119,13 @@ export const DEFAULT_OUTLINE_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
-        'pressed | selected': '#dark.06',
+        'pressed | (selected & !hovered)': '#dark.06',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#dark-02',
         hovered: '#dark-02',
-        'pressed | selected': '#dark',
+        'pressed | (selected & !hovered)': '#dark',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -130,7 +137,7 @@ export const DEFAULT_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
-        'pressed | selected': '#dark.06',
+        'pressed | (selected & !hovered)': '#dark.06',
     },
     color: {
         '': '#dark-02',
@@ -148,7 +155,7 @@ export const DEFAULT_CLEAR_STYLES = {
     fill: {
         '': '#purple.0',
         hovered: '#purple.16',
-        'pressed | selected': '#purple.10',
+        'pressed | (selected & !hovered)': '#purple.10',
     },
     color: {
         '': '#purple-text',
@@ -218,7 +225,7 @@ export const DANGER_OUTLINE_STYLES = {
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        'pressed | selected': '#danger.05',
+        'pressed | (selected & !hovered)': '#danger.05',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
@@ -234,11 +241,11 @@ export const DANGER_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        'pressed | selected': '#dark.05',
+        'pressed | (selected & !hovered)': '#dark.05',
     },
     color: {
         '': '#dark-02',
-        'pressed | selected': '#danger-text',
+        'pressed | (selected & !hovered)': '#danger-text',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -251,7 +258,7 @@ export const DANGER_CLEAR_STYLES = {
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        'pressed | selected': '#danger.05',
+        'pressed | (selected & !hovered)': '#danger.05',
     },
     color: {
         '': '#danger-text',
@@ -321,7 +328,7 @@ export const SUCCESS_OUTLINE_STYLES = {
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        'pressed | selected': '#success.05',
+        'pressed | (selected & !hovered)': '#success.05',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
@@ -337,11 +344,11 @@ export const SUCCESS_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        'pressed | selected': '#dark.05',
+        'pressed | (selected & !hovered)': '#dark.05',
     },
     color: {
         '': '#dark-02',
-        'pressed | selected': '#success-text',
+        'pressed | (selected & !hovered)': '#success-text',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -354,7 +361,7 @@ export const SUCCESS_CLEAR_STYLES = {
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        'pressed | selected': '#success.05',
+        'pressed | (selected & !hovered)': '#success.05',
     },
     color: {
         '': '#success-text',
@@ -422,7 +429,7 @@ export const SPECIAL_OUTLINE_STYLES = {
     fill: {
         '': '#white.0',
         hovered: '#white.18',
-        'pressed | selected': '#white.12',
+        'pressed | (selected & !hovered)': '#white.12',
         '[disabled] | disabled': '#white.12',
     },
     color: {
@@ -438,7 +445,7 @@ export const SPECIAL_NEUTRAL_STYLES = {
     fill: {
         '': '#white.0',
         hovered: '#white.12',
-        'pressed | selected': '#white.18',
+        'pressed | (selected & !hovered)': '#white.18',
     },
     color: {
         '': '#white',
@@ -525,13 +532,13 @@ export const Button = forwardRef(function Button(allProps, ref) {
         const specifiedLabel = label ?? props['aria-label'] ?? props['aria-labelledby'];
         if (icon) {
             if (!specifiedLabel) {
-                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.');
+                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.');
                 label = 'Unnamed'; // fix to avoid warning in production
             }
         }
         else {
             if (!specifiedLabel) {
-                accessibilityWarning('If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.');
+                accessibilityWarning('If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.');
                 label = 'Unnamed'; // fix to avoid warning in production
             }
         }

package/es/components/actions/Button/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/actions/ButtonGroup/ButtonGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/actions/CommandMenu/CommandMenu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -15,20 +15,18 @@ import { Item, Section, useTreeState } from 'react-stately';
 import { LoadingIcon } from '../../../icons';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { useDialogContext } from '../../overlays/Dialog/context';
 import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
 import { useMenuContext } from '../Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { MenuSection } from '../Menu/MenuSection';
 import { MenuTrigger } from '../Menu/MenuTrigger';
 import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from '../Menu/styled';
-import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledMenuWrapper, StyledSearchInput, } from './styled';
-function CommandMenuBase(props, ref) {
-    const { searchPlaceholder = 'Search commands...', searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = 'No commands found', searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = 'small', qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
+import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput, } from './styled';
+function CommandMenu(props, ref) {
+    const { searchPlaceholder = 'Search commands...', searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = 'No commands found', searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = 'medium', qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
     const domRef = useDOMRef(ref);
     const searchInputRef = useRef(null);
     const contextProps = useMenuContext();
-    const dialogContext = useDialogContext();
     // Convert string[] to Set<Key> for React Aria compatibility
     const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;
     const ariaDefaultSelectedKeys = defaultSelectedKeys
@@ -306,26 +304,18 @@ function CommandMenuBase(props, ref) {
     // Sync refs
     useSyncRef(contextProps, menuRef);
     const mods = useMemo(() => {
-        // Determine mods based on dialog context and menu context
-        let popoverMod = completeProps.mods?.popover || dialogContext?.type === 'popover';
-        let trayMod = completeProps.mods?.tray || dialogContext?.type === 'tray';
-        let modalMod = dialogContext?.type === 'modal';
+        // Determine mods based on menu context
+        let popoverMod = completeProps.mods?.popover;
+        let trayMod = completeProps.mods?.tray;
         return {
             sections: viewHasSections,
             footer: !!footer,
             header: !!header,
             popover: popoverMod,
             tray: trayMod,
-            modal: modalMod,
         };
-    }, [
-        viewHasSections,
-        footer,
-        header,
-        completeProps.mods,
-        dialogContext?.type,
-    ]);
-    return (_jsxs(StyledCommandMenu, { ...filterBaseProps(props), ref: domRef, qa: qa || 'CommandMenu', "data-size": size, mods: mods, styles: mergeProps(extractedStyles, styles), children: [header && (_jsx(StyledHeader, { role: "presentation", styles: headerStyles, children: header })), _jsx(StyledSearchInput, { ref: searchInputRef, type: "search", placeholder: searchPlaceholder, value: searchValue, styles: searchInputStyles, "data-size": size, "aria-controls": `${qa || 'CommandMenu'}-menu`, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": focusedKey != null
+    }, [viewHasSections, footer, header, completeProps.mods]);
+    return (_jsxs(StyledCommandMenu, { ...filterBaseProps(props), ref: domRef, qa: qa || 'CommandMenu', "data-size": size, mods: mods, styles: mergeProps(extractedStyles, styles), children: [header && (_jsx(StyledHeader, { role: "presentation", "data-size": size, styles: { border: 'none', ...headerStyles }, children: header })), _jsx(StyledSearchInput, { ref: searchInputRef, type: "search", placeholder: searchPlaceholder, value: searchValue, styles: searchInputStyles, "data-size": size, "aria-controls": `${qa || 'CommandMenu'}-menu`, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": focusedKey != null
                     ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`
                     : undefined, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: (e) => {
                     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -442,15 +432,15 @@ function CommandMenuBase(props, ref) {
                             handleSearchChange('');
                         }
                     }
-                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenuWrapper, { children: _jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
-                        border: 'none',
-                        boxShadow: 'none',
-                        radius: 0,
-                        padding: '0.5x',
-                    }, children: renderedItems }) })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", styles: footerStyles, children: footer }))] }));
+                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
+                    border: 'none',
+                    boxShadow: 'none',
+                    radius: 0,
+                    padding: '0.5x',
+                }, children: renderedItems })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", "data-size": size, styles: footerStyles, children: footer }))] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
-const _CommandMenu = React.forwardRef(CommandMenuBase);
+const _CommandMenu = React.forwardRef(CommandMenu);
 // Attach Trigger alias from MenuTrigger for consistent API
 // Also attach Item and Section for compound component pattern
 const __CommandMenu = Object.assign(_CommandMenu, {

package/es/components/actions/CommandMenu/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 

package/es/components/actions/CommandMenu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.67.0
+ * @cube-dev/ui-kit v0.69.0
  * Released under the MIT license.
  */
 
@@ -30,8 +30,8 @@ export const StyledCommandMenu = tasty({
         overflow: 'hidden',
         height: {
             '': 'initial',
-            popover: 'initial max-content (50vh - 4x)',
-            tray: 'initial max-content (100vh - 4x)',
+            popover: 'initial max-content (50vh - @size-md)',
+            tray: 'initial max-content (100vh - @size-md)',
         },
     },
 });
@@ -39,7 +39,7 @@ export const StyledSearchInput = tasty({
     qa: 'SearchInput',
     as: 'input',
     styles: {
-        display: 'flex',
+        display: 'grid',
         width: '100%',
         color: '#dark',
         fill: '#white',
@@ -47,24 +47,16 @@ export const StyledSearchInput = tasty({
         outline: 'none',
         transition: 'theme',
         radius: 0,
-        padding: '@vertical-padding @right-padding @vertical-padding @left-padding',
+        padding: '.5x 1.5x',
         textAlign: 'left',
         reset: 'input',
         preset: 't3',
         margin: 0,
         boxSizing: 'border-box',
         userSelect: 'auto',
-        '@vertical-padding': {
-            '': '(.75x - 1bw)',
-            '[data-size="medium"]': '(1.25x - 1bw)',
-        },
-        '@left-padding': {
-            '': '1x',
-            '[data-size="medium"]': '1x',
-        },
-        '@right-padding': {
-            '': '1x',
-            '[data-size="medium"]': '1x',
+        height: {
+            '': '@size-md @size-md',
+            '[data-size="large"]': '@size-lg @size-lg',
         },
         '&::placeholder': {
             color: '#dark-03',