@cube-dev/ui-kit 0.64.0 → 0.65.0

package/es/components/fields/ListBox/ListBox.js

@@ -0,0 +1,474 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.65.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef, useState, } from 'react';
+import { useFilter, useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
+import { Section as BaseSection, Item, useListState } from 'react-stately';
+import { LoadingIcon, SearchIcon } from '../../../icons';
+import { useProviderProps } from '../../../provider';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
+import { useFocus } from '../../../utils/react/interactions';
+import { Block } from '../../Block';
+import { useFieldProps, useFormProps, wrapWithField } from '../../form';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
+const ListBoxWrapperElement = tasty({
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: 0,
+        position: 'relative',
+        radius: true,
+        fill: '#white',
+        color: '#dark-02',
+        transition: 'theme',
+        outline: {
+            '': '#purple-03.0',
+            'invalid & focused': '#danger.50',
+            focused: '#purple-03',
+        },
+        border: {
+            '': true,
+            focused: '#purple-text',
+            valid: '#success-text.50',
+            invalid: '#danger-text.50',
+            disabled: true,
+        },
+    },
+});
+const SearchWrapperElement = tasty({
+    styles: {
+        ...INPUT_WRAPPER_STYLES,
+        border: '#clear',
+        radius: '1r top',
+        borderBottom: '1bw solid #border',
+    },
+});
+const SearchInputElement = tasty({
+    as: 'input',
+    styles: DEFAULT_INPUT_STYLES,
+});
+const ListElement = tasty({
+    as: 'ul',
+    styles: {
+        display: 'flex',
+        gap: '1bw',
+        flow: 'column',
+        margin: '0',
+        padding: '.5x',
+        listStyle: 'none',
+        height: 'auto',
+        overflow: 'auto',
+        scrollbar: 'styled',
+    },
+});
+const OptionElement = tasty({
+    as: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        gap: '.25x',
+        padding: '.75x 1x',
+        radius: '1r',
+        cursor: 'pointer',
+        transition: 'theme',
+        outline: 0,
+        border: 0,
+        userSelect: 'none',
+        color: {
+            '': '#dark-02',
+            'selected | pressed': '#dark',
+            disabled: '#dark-04',
+            valid: '#success-text',
+            invalid: '#danger-text',
+        },
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            'selected & focused': '#dark.09',
+            pressed: '#dark.06',
+            valid: '#success-bg',
+            invalid: '#danger-bg',
+            disabled: '#clear',
+        },
+        Label: {
+            preset: 't3',
+            color: 'inherit',
+        },
+        Description: {
+            preset: 't4',
+            color: {
+                '': '#dark-03',
+            },
+        },
+    },
+});
+const SectionWrapperElement = tasty({
+    as: 'li',
+    styles: {
+        display: 'block',
+    },
+});
+const SectionHeadingElement = tasty({
+    styles: {
+        preset: 't4 strong',
+        color: '#dark-03',
+        padding: '.5x 1x .25x',
+        userSelect: 'none',
+    },
+});
+const SectionListElement = tasty({
+    as: 'ul',
+    styles: {
+        display: 'flex',
+        gap: '1bw',
+        flow: 'column',
+        margin: '0',
+        padding: '0',
+        listStyle: 'none',
+    },
+});
+const DividerElement = tasty({
+    as: 'li',
+    styles: {
+        height: '1bw',
+        fill: '#border',
+        margin: '.5x 0',
+    },
+});
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+export const ListBox = forwardRef(function ListBox(props, ref) {
+    props = useProviderProps(props);
+    props = useFormProps(props);
+    props = useFieldProps(props, {
+        valuePropsMapper: ({ value, onChange }) => {
+            const fieldProps = {};
+            if (props.selectionMode === 'multiple') {
+                fieldProps.selectedKeys = Array.isArray(value)
+                    ? value
+                    : value
+                        ? [value]
+                        : [];
+            }
+            else {
+                fieldProps.selectedKey = value ?? null;
+            }
+            fieldProps.onSelectionChange = (key) => {
+                if (props.selectionMode === 'multiple') {
+                    if (Array.isArray(key)) {
+                        onChange(key);
+                    }
+                    else if (key instanceof Set) {
+                        onChange(Array.from(key));
+                    }
+                    else {
+                        onChange(key ? [key] : []);
+                    }
+                }
+                else {
+                    if (key instanceof Set) {
+                        onChange(key.size === 0 ? null : Array.from(key)[0]);
+                    }
+                    else {
+                        onChange(key);
+                    }
+                }
+            };
+            return fieldProps;
+        },
+    });
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', autoFocus, filter, emptyLabel, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
+    const [searchValue, setSearchValue] = useState('');
+    const { contains } = useFilter({ sensitivity: 'base' });
+    // Choose the text filter function: user-provided `filter` prop (if any)
+    // or the default `contains` helper from `useFilter`.
+    const textFilterFn = useMemo(() => filter || contains, [filter, contains]);
+    // Collection-level filter function expected by `useListState`.
+    // It converts the text filter (textValue, searchValue) ⟶ boolean
+    // into the shape `(nodes) => Iterable<Node<T>>`.
+    // The current `searchValue` is captured in the closure – every re-render
+    // produces a new function so React Stately updates the collection when the
+    // search term changes.
+    const collectionFilter = useCallback((nodes) => {
+        const term = searchValue.trim();
+        // If there is no search term, return nodes untouched to avoid
+        // unnecessary object allocations.
+        if (!term) {
+            return nodes;
+        }
+        // Recursive helper to filter sections and items.
+        const filterNodes = (iter) => {
+            const result = [];
+            for (const node of iter) {
+                if (node.type === 'section') {
+                    const filteredChildren = filterNodes(node.childNodes);
+                    if (filteredChildren.length) {
+                        // Preserve the original node but replace `childNodes` with the
+                        // filtered iterable so that React-Stately can still traverse it.
+                        result.push({
+                            ...node,
+                            childNodes: filteredChildren,
+                        });
+                    }
+                }
+                else {
+                    const text = node.textValue ?? String(node.rendered ?? '');
+                    if (textFilterFn(text, term)) {
+                        result.push(node);
+                    }
+                }
+            }
+            return result;
+        };
+        return filterNodes(nodes);
+    }, [searchValue, textFilterFn]);
+    // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
+    const externalSelectionHandler = onSelectionChange || props.onChange;
+    const wrappedOnSelectionChange = useMemo(() => {
+        if (!externalSelectionHandler)
+            return undefined;
+        return (keys) => {
+            // Don't allow selection changes when disabled
+            if (isDisabled) {
+                return;
+            }
+            // React Aria always passes a Set for selection changes
+            // For single selection mode, we extract the first (and only) key
+            if (keys instanceof Set) {
+                if (keys.size === 0) {
+                    externalSelectionHandler(props.selectionMode === 'multiple' ? [] : null);
+                }
+                else if (props.selectionMode === 'multiple') {
+                    externalSelectionHandler(Array.from(keys));
+                }
+                else {
+                    externalSelectionHandler(Array.from(keys)[0]);
+                }
+            }
+            else {
+                externalSelectionHandler(keys);
+            }
+        };
+    }, [externalSelectionHandler, isDisabled, props.selectionMode]);
+    // Prepare props for useListState with correct selection props
+    const listStateProps = {
+        ...props,
+        filter: collectionFilter,
+        onSelectionChange: wrappedOnSelectionChange,
+        isDisabled,
+        selectionMode: props.selectionMode || 'single',
+    };
+    // Set selection props based on mode
+    if (listStateProps.selectionMode === 'multiple') {
+        if (selectedKeys !== undefined) {
+            listStateProps.selectedKeys =
+                selectedKeys === 'all' ? 'all' : new Set(selectedKeys);
+        }
+        if (defaultSelectedKeys !== undefined) {
+            listStateProps.defaultSelectedKeys =
+                defaultSelectedKeys === 'all'
+                    ? 'all'
+                    : new Set(defaultSelectedKeys);
+        }
+        // Remove single-selection props if any
+        delete listStateProps.selectedKey;
+        delete listStateProps.defaultSelectedKey;
+    }
+    else {
+        // For single-selection we convert the scalar key props that our public
+        // API exposes into the Set-based props that React Stately expects.
+        if (selectedKey !== undefined) {
+            listStateProps.selectedKeys =
+                selectedKey == null ? new Set() : new Set([selectedKey]);
+        }
+        if (defaultSelectedKey !== undefined) {
+            listStateProps.defaultSelectedKeys =
+                defaultSelectedKey == null ? new Set() : new Set([defaultSelectedKey]);
+        }
+        // Remove the single-value props so we don't pass unsupported keys through.
+        delete listStateProps.selectedKey;
+        delete listStateProps.defaultSelectedKey;
+    }
+    const listState = useListState(listStateProps);
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
+    ref = useCombinedRefs(ref);
+    searchInputRef = useCombinedRefs(searchInputRef);
+    listRef = useCombinedRefs(listRef);
+    const { listBoxProps } = useListBox({
+        ...props,
+        'aria-label': props['aria-label'] || label?.toString(),
+        isDisabled,
+        shouldUseVirtualFocus: isSearchable,
+        shouldFocusWrap: true,
+    }, listState, listRef);
+    const { isFocused, focusProps } = useFocus({ isDisabled });
+    const isInvalid = validationState === 'invalid';
+    // Keyboard navigation handler for search input
+    const { keyboardProps } = useKeyboard({
+        onKeyDown: (e) => {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const isArrowDown = e.key === 'ArrowDown';
+                const { selectionManager, collection } = listState;
+                const currentKey = selectionManager.focusedKey;
+                // Helper function to find next selectable item (skip section headers and disabled items)
+                const findNextSelectableKey = (startKey, direction) => {
+                    let nextKey = startKey;
+                    const keyGetter = direction === 'forward'
+                        ? collection.getKeyAfter.bind(collection)
+                        : collection.getKeyBefore.bind(collection);
+                    while (nextKey != null) {
+                        const item = collection.getItem(nextKey);
+                        // Use SelectionManager's canSelectItem method for proper validation
+                        if (item &&
+                            item.type !== 'section' &&
+                            selectionManager.canSelectItem(nextKey)) {
+                            return nextKey;
+                        }
+                        nextKey = keyGetter(nextKey);
+                    }
+                    return null;
+                };
+                // Helper function to find first/last selectable item
+                const findFirstLastSelectableKey = (direction) => {
+                    const allKeys = Array.from(collection.getKeys());
+                    const keysToCheck = direction === 'forward' ? allKeys : allKeys.reverse();
+                    for (const key of keysToCheck) {
+                        const item = collection.getItem(key);
+                        if (item &&
+                            item.type !== 'section' &&
+                            selectionManager.canSelectItem(key)) {
+                            return key;
+                        }
+                    }
+                    return null;
+                };
+                let nextKey = null;
+                const direction = isArrowDown ? 'forward' : 'backward';
+                if (currentKey == null) {
+                    // No current focus, find first/last selectable item
+                    nextKey = findFirstLastSelectableKey(direction);
+                }
+                else {
+                    // Find next selectable item from current position
+                    const candidateKey = direction === 'forward'
+                        ? collection.getKeyAfter(currentKey)
+                        : collection.getKeyBefore(currentKey);
+                    nextKey = findNextSelectableKey(candidateKey, direction);
+                    // If no next key found and focus wrapping is enabled, wrap to first/last selectable item
+                    if (nextKey == null) {
+                        nextKey = findFirstLastSelectableKey(direction);
+                    }
+                }
+                if (nextKey != null) {
+                    selectionManager.setFocusedKey(nextKey);
+                }
+            }
+            else if (e.key === 'Enter' || (e.key === ' ' && !searchValue.trim())) {
+                const focusedKey = listState.selectionManager.focusedKey;
+                if (focusedKey != null) {
+                    e.preventDefault();
+                    // Use the SelectionManager's select method which handles all selection logic
+                    // including single vs multiple selection modes and modifier keys
+                    listState.selectionManager.select(focusedKey, e);
+                }
+            }
+        },
+    });
+    const mods = useMemo(() => ({
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        focused: isFocused,
+        loading: isLoading,
+        searchable: isSearchable,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isFocused,
+        isLoading,
+        isSearchable,
+    ]);
+    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, autoFocus: autoFocus && isSearchable, "data-autofocus": autoFocus ? '' : undefined, styles: searchInputStyles, "data-size": "small", "aria-controls": listBoxProps.id, "aria-activedescendant": listState.selectionManager.focusedKey != null
+                    ? `${listBoxProps.id}-option-${listState.selectionManager.focusedKey}`
+                    : undefined, onChange: (e) => {
+                    const value = e.target.value;
+                    setSearchValue(value);
+                }, ...keyboardProps, ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: isLoading ? _jsx(LoadingIcon, {}) : _jsx(SearchIcon, {}) }) })] })) : null;
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, ...(!isSearchable ? keyboardProps : {}), children: (() => {
+                    const renderedItems = [];
+                    let isFirstSection = true;
+                    for (const item of listState.collection) {
+                        if (item.type === 'section') {
+                            if (!isFirstSection) {
+                                renderedItems.push(_jsx(DividerElement, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                            }
+                            renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
+                            isFirstSection = false;
+                        }
+                        else {
+                            renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState }, item.key));
+                        }
+                    }
+                    // Show "No results found" message when there are no items after filtration
+                    if (renderedItems.length === 0 &&
+                        isSearchable &&
+                        searchValue.trim()) {
+                        return (_jsx("li", { children: _jsx(Block, { preset: "t4", color: "#dark-03", children: emptyLabel !== undefined ? emptyLabel : 'No results found' }) }));
+                    }
+                    return renderedItems;
+                })() })] }));
+    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
+});
+function Option({ item, state, styles, isParentDisabled, validationState }) {
+    const ref = useRef(null);
+    const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
+    const isSelected = state.selectionManager.isSelected(item.key);
+    const isFocused = state.selectionManager.focusedKey === item.key;
+    const { optionProps, isPressed } = useOption({
+        key: item.key,
+        isDisabled,
+        isSelected,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+    }, state, ref);
+    const description = item?.props?.description;
+    return (_jsxs(OptionElement, { ...optionProps, ref: ref, mods: {
+            selected: isSelected,
+            focused: isFocused,
+            disabled: isDisabled,
+            pressed: isPressed,
+            valid: isSelected && validationState === 'valid',
+            invalid: isSelected && validationState === 'invalid',
+        }, styles: styles, children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? _jsx("div", { "data-element": "Description", children: description }) : null] }));
+}
+function ListBoxSection(props) {
+    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, } = props;
+    const heading = item.rendered;
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
+        heading,
+        'aria-label': item['aria-label'],
+    });
+    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(SectionHeadingElement, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
+                    .filter((node) => state.collection.getItem(node.key))
+                    .map((node) => (_jsx(Option, { item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState }, node.key))) })] }));
+}
+const ListBoxSectionComponent = Object.assign(BaseSection, {
+    displayName: 'Section',
+});
+ListBox.Item = Item;
+ListBox.Section = ListBoxSectionComponent;
+Object.defineProperty(ListBox, 'cubeInputType', {
+    value: 'ListBox',
+    enumerable: false,
+    configurable: false,
+});
+
+        

package/es/components/fields/ListBox/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.65.0
+ * Released under the MIT license.
+ */
+
+export * from './ListBox';
+
+        

package/es/components/fields/NumberInput/NumberInput.js

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

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

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

package/es/components/fields/RadioGroup/Radio.js

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

package/es/components/fields/RadioGroup/RadioGroup.js

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

package/es/components/fields/RadioGroup/context.js

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

package/es/components/fields/RadioGroup/index.js

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

package/es/components/fields/SearchInput/SearchInput.js

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

package/es/components/fields/SearchInput/index.js

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

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
@@ -149,17 +149,16 @@ const OptionElement = tasty({
         padding: '(1x - 1px) (1.5x - 1px)',
         cursor: 'pointer',
         radius: true,
-        fill: {
-            '': '#dark.0',
-            'pressed | selected': '#purple.10',
-            'hovered | focused': '#dark.04',
-            disabled: '#dark.0',
-        },
         color: {
             '': '#dark-02',
-            'hovered | focused': '#dark-02',
-            'pressed | selected': '#purple',
-            disabled: '#dark.3',
+            selected: '#dark',
+            disabled: '#dark-04',
+        },
+        fill: {
+            '': '#clear',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            disabled: '#clear',
         },
         preset: 't3',
         transition: 'theme',

package/es/components/fields/Select/index.js

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

package/es/components/fields/Slider/Gradation.js

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

package/es/components/fields/Slider/Header.js

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

package/es/components/fields/Slider/RangeSlider.js

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

package/es/components/fields/Slider/Slider.js

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

package/es/components/fields/Slider/SliderBase.js

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

package/es/components/fields/Slider/SliderInput.js

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