@cube-dev/ui-kit 0.9.4 → 0.9.7

package/dist/cjs/components/overlays/Tooltip/context.js

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipContext = void 0;
-const react_1 = __importDefault(require("react"));
-exports.TooltipContext = react_1.default.createContext({});
-
-        

package/dist/cjs/components/pickers/ComboBox/ComboBox.js

@@ -1,171 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComboBox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
-const utils_1 = require("@react-aria/utils");
-const react_1 = require("react");
-const combobox_1 = require("@react-stately/combobox");
-const combobox_2 = require("@react-aria/combobox");
-const button_1 = require("@react-aria/button");
-const Form_1 = require("../../forms/Form");
-const interactions_1 = require("@react-aria/interactions");
-const provider_1 = require("../../../provider");
-const i18n_1 = require("@react-aria/i18n");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const interactions_2 = require("../../../utils/interactions");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const react_2 = require("../../../utils/react");
-const FieldWrapper_1 = require("../../forms/FieldWrapper");
-const Select_1 = require("../Select/Select");
-const Prefix_1 = require("../../layout/Prefix");
-const Suffix_1 = require("../../layout/Suffix");
-const Space_1 = require("../../layout/Space");
-const collections_1 = require("@react-stately/collections");
-const TextInputBase_1 = require("../../forms/TextInput/TextInputBase");
-const overlays_1 = require("@react-aria/overlays");
-const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
-const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
-const COMBOBOX_STYLES = {
-    position: 'relative',
-    display: 'grid',
-};
-const INPUT_STYLES = {
-    ...TextInputBase_1.DEFAULT_INPUT_STYLES,
-    width: '100%',
-};
-const TRIGGER_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    placeContent: 'center',
-    placeSelf: 'stretch',
-    radius: 'right',
-    padding: '0 1x',
-    color: 'inherit',
-    border: 0,
-    fill: {
-        '': '#purple.0',
-        hovered: '#dark.04',
-        pressed: '#dark.08',
-        disabled: '#clear',
-    },
-    cursor: 'pointer',
-};
-function ComboBox(props, ref) {
-    var _a;
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, multiLine, autoFocus, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', loadingState, filter, styles, ...otherProps } = props;
-    let isAsync = loadingState != null;
-    let { contains } = (0, i18n_1.useFilter)({ sensitivity: 'base' });
-    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
-    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
-    let state = (0, combobox_1.useComboBoxState)({
-        ...props,
-        defaultFilter: filter || contains,
-        allowsEmptyCollection: isAsync,
-    });
-    const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...COMBOBOX_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('ComboBox_Wrapper', props),
-        ...styles,
-    });
-    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('ComboBox', props),
-        ...inputStyles,
-    });
-    triggerStyles = {
-        ...TRIGGER_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('ComboBox_Trigger', props),
-        ...triggerStyles,
-    };
-    ref = (0, react_2.useCombinedRefs)(ref);
-    inputRef = (0, react_2.useCombinedRefs)(inputRef);
-    triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
-    popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
-    listBoxRef = (0, react_2.useCombinedRefs)(listBoxRef);
-    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = (0, combobox_2.useComboBox)({
-        ...props,
-        inputRef,
-        buttonRef: triggerRef,
-        listBoxRef,
-        popoverRef,
-        menuTrigger,
-    }, state);
-    let { overlayProps, placement } = (0, overlays_1.useOverlayPosition)({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    inputStyles.paddingRight = `${suffixWidth}px`;
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled });
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    // Get props for the button based on the trigger props from useComboBox
-    let { buttonProps, isPressed: isTriggerPressed } = (0, button_1.useButton)(triggerProps, triggerRef);
-    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = (0, interactions_1.useHover)({ isDisabled });
-    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
-    let validation = (0, react_1.cloneElement)(validationIcon);
-    let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let comboBoxField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: ref, qa: "ComboBoxWrapper", ...(0, react_2.modAttrs)({
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            disabled: isDisabled,
-            hovered: isHovered,
-            focused: isFocused,
-        }), styles: outerStyles, style: {
-            zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'ComboBox', as: "input", ...(0, utils_1.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)({
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "button", ...(0, utils_1.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
-                            pressed: isTriggerPressed,
-                            focused: isTriggerFocused,
-                            hovered: isTriggerHovered,
-                            disabled: isDisabled,
-                        }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.ListBoxPopup, { ...listBoxProps, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, shouldUseVirtualFocus: true, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            Component: comboBoxField,
-            ref: ref,
-        } }, void 0));
-}
-const _ComboBox = (0, react_1.forwardRef)(ComboBox);
-const __ComboBox = Object.assign(_ComboBox, { Item: collections_1.Item });
-exports.ComboBox = __ComboBox;
-__ComboBox.cubeInputType = 'ComboBox';
-
-        

package/dist/cjs/components/pickers/Select/Select.js

@@ -1,258 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = exports.ListBoxPopup = void 0;
-const react_1 = require("react");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
-const react_2 = require("../../../utils/react");
-const react_3 = require("react");
-const select_1 = require("@react-stately/select");
-const select_2 = require("@react-aria/select");
-const listbox_1 = require("@react-aria/listbox");
-const button_1 = require("@react-aria/button");
-const focus_1 = require("@react-aria/focus");
-const overlays_1 = require("@react-aria/overlays");
-const Form_1 = require("../../forms/Form/Form");
-const interactions_1 = require("@react-aria/interactions");
-const provider_1 = require("../../../provider");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const interactions_2 = require("../../../utils/interactions");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const react_4 = require("../../../utils/react");
-const FieldWrapper_1 = require("../../forms/FieldWrapper");
-const collections_1 = require("@react-stately/collections");
-const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
-const transitions_1 = require("../../../utils/transitions");
-const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
-const SELECT_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
-const INPUT_STYLES = {
-    display: 'grid',
-    flow: 'column',
-    gridColumns: {
-        '': '1fr auto',
-        'with-prefix': 'auto 1fr auto',
-    },
-    placeItems: 'center stretch',
-    placeContent: 'center stretch',
-    gap: '1x',
-    padding: {
-        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-        '[data-size="small"]': '(.75x - 1px) 1x (.75x - 1px)  (1.5x - 1px)',
-    },
-    border: {
-        '': true,
-        invalid: '#danger-text.50',
-        valid: '#success-text.50',
-        focused: true,
-    },
-    radius: true,
-    reset: 'input',
-    preset: 'default',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
-    },
-    fill: {
-        '': '#purple.0',
-        hovered: '#dark.04',
-        pressed: '#dark.08',
-        disabled: '#dark.04',
-    },
-    fontWeight: 400,
-    textAlign: 'left',
-    cursor: 'pointer',
-    transition: 'theme',
-};
-const OVERLAY_STYLES = {
-    position: 'absolute',
-};
-const LISTBOX_STYLES = {
-    display: 'flex',
-    gap: '.5x',
-    flow: 'column',
-    margin: '0',
-    padding: '.5x',
-    listStyle: 'none',
-    radius: true,
-    fill: '#white',
-    shadow: '0px 4px 16px #shadow',
-    height: 'initial 30x',
-    overflow: 'hidden auto',
-    styledScrollbar: true,
-};
-const OPTION_STYLES = {
-    display: 'block',
-    padding: '(1x - 1px) (1.5x - 1px)',
-    cursor: 'pointer',
-    radius: true,
-    fill: {
-        '': '#white',
-        focused: '#dark.04',
-        selected: '#purple',
-        'focused & selected': '#purple-text',
-        disabled: '#dark.04',
-    },
-    color: {
-        '': '#dark.85',
-        selected: '#white',
-        disabled: '#dark.30',
-    },
-    preset: 't3m',
-};
-function Select(props, ref) {
-    var _a;
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFormProps)(props);
-    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, requiredMark = true, placeholder, tooltip, size, styles, ...otherProps } = props;
-    let state = (0, select_1.useSelectState)(props);
-    const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...SELECT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Select_Wrapper', otherProps),
-        ...styles,
-    });
-    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Select', otherProps),
-        ...inputStyles,
-    });
-    if (styles) {
-    }
-    ref = (0, react_4.useCombinedRefs)(ref);
-    triggerRef = (0, react_4.useCombinedRefs)(triggerRef);
-    popoverRef = (0, react_4.useCombinedRefs)(popoverRef);
-    listBoxRef = (0, react_4.useCombinedRefs)(listBoxRef);
-    let { labelProps, triggerProps, valueProps, menuProps } = (0, select_2.useSelect)(props, state, triggerRef);
-    let { overlayProps, placement } = (0, overlays_1.useOverlayPosition)({
-        targetRef: triggerRef,
-        overlayRef: popoverRef,
-        scrollRef: listBoxRef,
-        // @ts-ignore
-        placement: `${direction} end`,
-        shouldFlip: shouldFlip,
-        isOpen: state.isOpen,
-        onClose: state.close,
-        offset: overlayOffset,
-    });
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    // Get props for the button based on the trigger props from useSelect
-    let { buttonProps } = (0, button_1.useButton)(triggerProps, triggerRef);
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
-    let validation = (0, react_3.cloneElement)(validationIcon);
-    let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let selectField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: "SelectWrapper", mods: {
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            disabled: isDisabled,
-            hovered: isHovered,
-            focused: isFocused,
-        }, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: qa || 'Select', as: "button", ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: {
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                    'with-prefix': !!prefix,
-                }, children: [prefix, (0, jsx_runtime_1.jsx)("span", { ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : placeholder }, void 0), (validationState || isLoading || suffix) && ((0, jsx_runtime_1.jsxs)("div", { children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffix] }, void 0)), (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }, void 0) }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            Component: selectField,
-            ref: ref,
-        } }, void 0));
-}
-function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, ...otherProps }) {
-    // Get props for the listbox
-    let { listBoxProps } = (0, listbox_1.useListBox)({
-        autoFocus: state.focusStrategy || true,
-        shouldUseVirtualFocus,
-        ...otherProps,
-    }, state, listBoxRef);
-    listBoxStyles = {
-        ...LISTBOX_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('ListBoxPopup'),
-        ...listBoxStyles,
-    };
-    // Handle events that should cause the popup to close,
-    // e.g. blur, clicking outside, or pressing the escape key.
-    let { overlayProps } = (0, overlays_1.useOverlay)({
-        onClose: () => state.close(),
-        shouldCloseOnBlur: true,
-        isOpen: state.isOpen,
-        isDismissable: true,
-    }, popoverRef);
-    // Wrap in <FocusScope> so that focus is restored back to the
-    // trigger when the popup is closed. In addition, add hidden
-    // <DismissButton> components at the start and end of the list
-    // to allow screen reader users to dismiss the popup easily.
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: {
-            minWidth: minWidth ? `${minWidth}px` : 'initial',
-            ...OVERLAY_STYLES,
-            overlayStyles,
-        }, ...parentOverlayProps, ...overlayProps, css: (0, transitions_1.getOverlayTransitionCSS)({ placement }), "data-position": placement, ref: popoverRef, children: (0, jsx_runtime_1.jsxs)(focus_1.FocusScope, { restoreFocus: true, children: [(0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { as: "ul", styles: listBoxStyles, ...(0, react_2.mergeProps)(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => ((0, jsx_runtime_1.jsx)(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
-}
-exports.ListBoxPopup = ListBoxPopup;
-function Option({ item, state, styles, shouldUseVirtualFocus }) {
-    let ref = (0, react_3.useRef)(null);
-    let isDisabled = state.disabledKeys.has(item.key);
-    let isSelected = state.selectionManager.isSelected(item.key);
-    let isVirtualFocused = state.selectionManager.focusedKey === item.key;
-    styles = {
-        ...OPTION_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Option'),
-        ...styles,
-    };
-    let { optionProps } = (0, listbox_1.useOption)({
-        key: item.key,
-        isDisabled,
-        isSelected,
-        shouldSelectOnPressUp: true,
-        shouldFocusOnHover: true,
-        shouldUseVirtualFocus,
-    }, state, ref);
-    // Handle focus events so we can apply highlighted
-    // style to the focused option
-    let [isFocused, setFocused] = (0, react_3.useState)(false);
-    let { focusProps } = (0, interactions_1.useFocus)({ onFocusChange: setFocused });
-    return ((0, react_1.createElement)(Base_1.Base, { as: "li", ...(0, react_2.mergeProps)(optionProps, focusProps), ref: ref, mods: {
-            selected: isSelected,
-            focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
-            disabled: isDisabled,
-        }, "data-theme": isSelected ? 'special' : undefined, styles: styles, key: item.key }, item.rendered));
-}
-const _Select = (0, react_3.forwardRef)(Select);
-_Select.cubeInputType = 'Select';
-const __Select = Object.assign(_Select, { Item: collections_1.Item });
-exports.Select = __Select;
-
-        

package/dist/cjs/components/portal/Portal.js

@@ -1,48 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_dom_1 = __importDefault(require("react-dom"));
-const usePortal_1 = require("./usePortal");
-/**
- * This component renders its children outside the current DOM hierarchy.
- *
- * React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to
- * render a Portal in SSR, use prop `disabled`.
- *
- * By default, Portal's children render under the `<Root />` component.
- *
- * ***Important***: Since React doesn't support portals on SSR, `<Portal />` children renders in the next tick.
- * If you need to make some computations, use the `onMount` callback
- *
- * @see https://reactjs.org/docs/portals.html
- *
- * @example ```jsx
- *  <div>
- *    Portal will be rendered outside me!
- *
- *    <Portal>
- *      <div>some content will be showed outside of parent container</div>
- *    </Portal>
- *  </div>
- * ```
- */
-function Portal(props) {
-    const { children, mountRoot, isDisabled } = (0, usePortal_1.usePortal)(props);
-    if (isDisabled)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
-    return mountRoot ? react_dom_1.default.createPortal(children, mountRoot) : null;
-}
-exports.Portal = Portal;
-
-        

package/dist/cjs/components/portal/PortalProvider.js

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PortalProvider = exports.usePortalContext = void 0;
-const react_1 = require("react");
-const PortalContext = (0, react_1.createContext)(null);
-/**
- * @private
- * @internal Don't even try to use it
- */
-function usePortalContext() {
-    const root = (0, react_1.useContext)(PortalContext);
-    return { root };
-}
-exports.usePortalContext = usePortalContext;
-/**
- * @private
- * @internal Don't even try to use it
- */
-exports.PortalProvider = PortalContext.Provider;
-
-        

package/dist/cjs/components/portal/index.js

@@ -1,25 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PortalProvider = void 0;
-var PortalProvider_1 = require("./PortalProvider");
-Object.defineProperty(exports, "PortalProvider", { enumerable: true, get: function () { return PortalProvider_1.PortalProvider; } });
-__exportStar(require("./Portal"), exports);
-
-        

package/dist/cjs/components/portal/storybook/templates/basic.js

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Basic = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Portal_1 = require("../../Portal");
-const Divider_1 = require("../../../content/Divider");
-const Basic = (args) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["By default, Portal content should be there ", ' -> ', (0, jsx_runtime_1.jsxs)(Portal_1.Portal, { ...args, children: ["Portal's content.", !args.isDisabled && ' But, if you disable me, I\'ll be near the arrow'] }, void 0), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}, void 0)] }, void 0));
-exports.Basic = Basic;
-
-        

package/dist/cjs/components/portal/storybook/templates/index.js

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./basic"), exports);
-
-        

package/dist/cjs/components/portal/types.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-
-        

package/dist/cjs/components/portal/usePortal.js

@@ -1,50 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePortal = void 0;
-const react_1 = require("react");
-const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
-const PortalProvider_1 = require("./PortalProvider");
-/**
- * @internal Do not use it
- */
-function usePortal(props) {
-    const { children, isDisabled = false, root = null, onMount } = props;
-    const onMountRef = (0, react_1.useRef)(onMount);
-    const portalContext = (0, PortalProvider_1.usePortalContext)();
-    const [mountRoot, setMountRoot] = (0, react_1.useState)(null);
-    onMountRef.current = onMount;
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (!isDisabled) {
-            const contextRoot = portalContext.root;
-            const currentRoot = (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : null;
-            const currentContextRoot = (_b = contextRoot === null || contextRoot === void 0 ? void 0 : contextRoot.current) !== null && _b !== void 0 ? _b : null;
-            (0, tiny_invariant_1.default)(!(contextRoot === null && currentRoot === null), 'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component');
-            setMountRoot(currentRoot !== null && currentRoot !== void 0 ? currentRoot : currentContextRoot);
-        }
-    }, [root, portalContext.root, isDisabled]);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (isDisabled || mountRoot) {
-            (_a = onMountRef.current) === null || _a === void 0 ? void 0 : _a.call(onMountRef);
-        }
-    }, [isDisabled, mountRoot]);
-    return {
-        isDisabled,
-        children,
-        mountRoot,
-    };
-}
-exports.usePortal = usePortal;
-
-