@cube-dev/ui-kit 0.9.6 → 0.9.7

package/dist/es/components/forms/Switch/Switch.js

@@ -1,153 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useFocusableRef } from '@react-spectrum/utils';
-import { forwardRef, useRef } from 'react';
-import { useSwitch } from '@react-aria/switch';
-import { useHover } from '@react-aria/interactions';
-import { useToggleState } from '@react-stately/toggle';
-import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { Base } from '../../Base';
-import { useFocus } from '../../../utils/interactions';
-import { mergeProps } from '../../../utils/react';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useContextStyles } from '../../../providers/StylesProvider';
-import { HiddenInput } from '../../HiddenInput';
-import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
-import { LoadingOutlined } from '@ant-design/icons';
-import { useFormProps } from '../Form/Form';
-import { FieldWrapper } from '../FieldWrapper';
-import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-const STYLES = {
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'row',
-    preset: 'input',
-    width: 'min-content',
-    cursor: 'pointer',
-};
-const INPUT_STYLES = {
-    position: 'relative',
-    display: 'grid',
-    placeItems: 'center',
-    radius: 'round',
-    fill: {
-        '': '#dark.50',
-        checked: '#purple',
-        disabled: '#dark.12',
-    },
-    color: '#white',
-    border: false,
-    width: '5.25x 5.25x',
-    height: '3x 3x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-    transition: 'theme',
-    cursor: 'pointer',
-};
-const THUMB_STYLES = {
-    position: 'absolute',
-    width: '2.5x',
-    height: '2.5x',
-    radius: 'round',
-    fill: 'currentColor',
-    shadow: '0px 2px 4px #dark.20;',
-    top: '.25x',
-    left: {
-        '': '.25x',
-        checked: '2.5x',
-    },
-    transition: 'left',
-    cursor: 'pointer',
-};
-function Switch(props, ref) {
-    props = castNullableIsSelected(props);
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    let { qa, isDisabled = false, autoFocus, children, label, labelProps, labelStyles, thumbStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
-    label = label || children;
-    let wrapperContextStyles = useContextStyles('Switch_Wrapper', props);
-    let inputContextStyles = useContextStyles('Switch', props);
-    let labelContextStyles = useContextStyles('Switch_Label', props);
-    let thumbContextStyles = useContextStyles('Switch_Thumb', props);
-    let styles = extractStyles(props, OUTER_STYLES, {
-        ...(insideForm ? {} : STYLES),
-        ...wrapperContextStyles,
-    });
-    inputStyles = extractStyles(props, BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-        ...(insideForm && labelPosition === 'side'
-            ? {
-                marginTop: '-3px',
-                placeSelf: 'start',
-            }
-            : null),
-        ...inputStyles,
-    });
-    thumbStyles = {
-        ...THUMB_STYLES,
-        ...thumbContextStyles,
-        ...thumbStyles,
-    };
-    labelStyles = {
-        ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
-        ...labelContextStyles,
-        ...labelStyles,
-    };
-    let { isFocused, focusProps } = useFocus({ isDisabled }, true);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let inputRef = useRef(null);
-    let domRef = useFocusableRef(ref, inputRef);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
-    const switchField = (_jsxs(Base, { qa: `${qa || 'Switch'}Wrapper`, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Switch', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(Base, { mods: {
-                    checked: inputProps.checked,
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }, styles: inputStyles, children: _jsx(Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
-                        checked: inputProps.checked,
-                    } }, void 0) }, void 0)] }, void 0));
-    if (insideForm) {
-        return (_jsx(FieldWrapper, { ...{
-                as: 'label',
-                labelPosition,
-                label,
-                styles,
-                labelStyles,
-                labelProps,
-                isDisabled,
-                validationState,
-                message,
-                description,
-                requiredMark,
-                tooltip,
-                Component: switchField,
-                ref: domRef,
-            } }, void 0));
-    }
-    return (_jsxs(Base, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Base, { styles: labelStyles, mods: {
-                    disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }, void 0) : null, _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0))] }, void 0));
-}
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = forwardRef(Switch);
-_Switch.cubeInputType = 'Checkbox';
-export { _Switch as Switch };
-
-        

package/dist/es/components/forms/TextArea/TextArea.js

@@ -1,60 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
-import { TextInputBase, } from '../TextInput/TextInputBase';
-import { useControlledState } from '@react-stately/utils';
-import { useProviderProps } from '../../../provider';
-import { useTextField } from '@react-aria/textfield';
-import { chain } from '@react-aria/utils';
-import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-function TextArea(props, ref) {
-    props = castNullableStringValue(props);
-    props = useProviderProps(props);
-    let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, rows, ...otherProps } = props;
-    rows = rows || 3;
-    let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => { });
-    let inputRef = useRef(null);
-    let onHeightChange = useCallback(() => {
-        if (autoSize && inputRef.current) {
-            let input = inputRef.current;
-            let prevAlignment = input.style.alignSelf;
-            let computedStyle = getComputedStyle(input);
-            input.style.alignSelf = 'start';
-            input.style.height = 'auto';
-            input.style.height = input.scrollHeight
-                ? `calc(${input.scrollHeight}px + (2 * var(--border-width)))`
-                : `${parseFloat(computedStyle.paddingTop)
-                    + parseFloat(computedStyle.paddingBottom)
-                    + parseFloat(computedStyle.lineHeight) * (rows || 3)
-                    + 2}px`;
-            input.style.alignSelf = prevAlignment;
-        }
-    }, [inputRef]);
-    useLayoutEffect(() => {
-        if (inputRef.current) {
-            onHeightChange();
-        }
-    }, [onHeightChange, inputValue, inputRef]);
-    let { labelProps, inputProps } = useTextField({
-        ...props,
-        onChange: chain(onChange, setInputValue),
-        inputElementType: 'textarea',
-    }, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, multiLine: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
-}
-/**
- * TextInputs are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-const _TextArea = forwardRef(TextArea);
-_TextArea.cubeInputType = 'Text';
-export { _TextArea as TextArea };
-
-        

package/dist/es/components/forms/TextInput/TextInput.js

@@ -1,30 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
-import { TextInputBase } from './TextInputBase';
-import { useProviderProps } from '../../../provider';
-import { useTextField } from '@react-aria/textfield';
-import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-function TextInput(props, ref) {
-    castNullableStringValue(props);
-    props = useProviderProps(props);
-    let inputRef = useRef(null);
-    let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
-}
-/**
- * TextInputs are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-const _TextInput = forwardRef(TextInput);
-_TextInput.cubeInputType = 'Text';
-export { _TextInput as TextInput };
-
-        

package/dist/es/components/forms/TextInput/TextInputBase.js

@@ -1,164 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { WarningOutlined, CheckOutlined, LoadingOutlined, } from '@ant-design/icons';
-import { createFocusableRef } from '@react-spectrum/utils';
-import { cloneElement, forwardRef, useImperativeHandle, useRef, useState, } from 'react';
-import { useFormProps } from '../Form/Form';
-import { useHover } from '@react-aria/interactions';
-import { useProviderProps } from '../../../provider';
-import { Base } from '../../Base';
-import { extractStyles } from '../../../utils/styles';
-import { BLOCK_STYLES, POSITION_STYLES, DIMENSION_STYLES, } from '../../../styles/list';
-import { useFocus } from '../../../utils/interactions';
-import { Prefix } from '../../layout/Prefix';
-import { Suffix } from '../../layout/Suffix';
-import { useContextStyles } from '../../../providers/StylesProvider';
-import { FieldWrapper } from '../FieldWrapper';
-import { Space } from '../../layout/Space';
-import { Block } from '../../Block';
-import { mergeProps } from '../../../utils/react';
-const WRAPPER_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
-const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
-const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
-export const DEFAULT_INPUT_STYLES = {
-    display: 'block',
-    width: 'initial 100% initial',
-    height: 'initial initial initial',
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
-    },
-    fill: {
-        '': '#white',
-        disabled: '#dark.04',
-    },
-    border: {
-        '': true,
-        focused: true,
-        valid: '#success-text.50',
-        invalid: '#danger-text.50',
-        disabled: true,
-    },
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-        'invalid & focused': '#danger.50',
-        'valid & focused': '#success.50',
-    },
-    transition: 'theme',
-    radius: true,
-    padding: {
-        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
-    },
-    fontWeight: 400,
-    textAlign: 'left',
-    reset: 'input',
-    preset: 'default',
-    flexGrow: 1,
-    margin: 0,
-    resize: 'none',
-};
-function TextInputBase(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, ...otherProps } = props;
-    let [suffixWidth, setSuffixWidth] = useState(0);
-    let [prefixWidth, setPrefixWidth] = useState(0);
-    let styles = extractStyles(otherProps, STYLE_LIST);
-    let type = otherProps.type;
-    let contextStyles = useContextStyles('Input', otherProps);
-    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, {
-        ...DEFAULT_INPUT_STYLES,
-        ...contextStyles,
-        ...inputStyles,
-    });
-    wrapperStyles = {
-        ...WRAPPER_STYLES,
-        ...wrapperStyles,
-    };
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    if (validationState || isLoading || suffix) {
-        inputStyles.paddingRight = `${suffixWidth}px`;
-    }
-    let ElementType = multiLine ? 'textarea' : 'input';
-    let { isFocused, focusProps } = useFocus({ isDisabled });
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let domRef = useRef(null);
-    let defaultInputRef = useRef(null);
-    inputRef = inputRef || defaultInputRef;
-    // Expose imperative interface for ref
-    useImperativeHandle(ref, () => ({
-        ...createFocusableRef(domRef, inputRef),
-        select() {
-            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                inputRef.current.select();
-            }
-        },
-        getInputElement() {
-            return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-        },
-    }));
-    let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
-    let validation = cloneElement(validationIcon);
-    suffix =
-        typeof suffix === 'string' ? (_jsx(Block, { padding: "1x right", children: suffix }, void 0)) : (suffix);
-    // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
-    if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder)) {
-        if (!inputProps) {
-            inputProps = {};
-        }
-        inputProps.placeholder = ' ';
-    }
-    let textField = (_jsxs(Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            loadable: !!loadingIndicator,
-            multiline: multiLine,
-        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(Base, { qa: qa || 'TextInput', as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }, style: {
-                    WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), _jsx(Prefix, { padding: "0 1x 0 1.5x", onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: typeof prefix === 'string' ? (_jsx(Block, { padding: "1x left", children: prefix }, void 0)) : (prefix) }, void 0), _jsxs(Suffix, { padding: ".5x left", onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs(Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
-    return (_jsx(FieldWrapper, { ...{
-            labelPosition,
-            label,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            necessityLabel,
-            labelProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            isHidden,
-            Component: textField,
-            ref: domRef,
-        } }, void 0));
-}
-const _TextInputBase = forwardRef(TextInputBase);
-export { _TextInputBase as TextInputBase };
-
-        

package/dist/es/components/forms/index.js

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { TextInput } from './TextInput/TextInput';
-import { PasswordInput } from './PasswordInput/PasswordInput';
-import { NumberInput } from './NumberInput/NumberInput';
-import { FileInput } from './FileInput/FileInput';
-import { TextArea } from './TextArea/TextArea';
-const Input = Object.assign(TextInput, {
-    Text: TextInput,
-    Password: PasswordInput,
-    Number: NumberInput,
-    TextArea: TextArea,
-    File: FileInput,
-});
-export { Input, TextInput, NumberInput, TextArea, PasswordInput, FileInput };
-
-        

package/dist/es/components/layout/Flex.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'flex',
-    flow: 'row',
-};
-export const Flex = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/layout/Flow.js

@@ -1,24 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-};
-const STYLE_PROPS = CONTAINER_STYLES;
-export const Flow = forwardRef((props, ref) => {
-    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/layout/Grid.js

@@ -1,30 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'grid',
-    flow: 'row',
-    gap: '@(column-gap, 0)',
-};
-const PROP_MAP = {
-    template: 'gridTemplate',
-    columns: 'gridColumns',
-    rows: 'gridRows',
-    areas: 'gridAreas',
-};
-export const Grid = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES, PROP_MAP);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/layout/Prefix.js

@@ -1,43 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles, parseStyle } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { useCombinedRefs } from '../../utils/react';
-const DEFAULT_STYLES = {
-    position: 'absolute',
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    flow: 'column',
-    gap: 0,
-    left: '@prefix-gap',
-    top: '@prefix-gap',
-    bottom: '@prefix-gap',
-    color: '#dark.75',
-    height: '(100% - (2 * @prefix-gap))',
-};
-export const Prefix = forwardRef((allProps, outerRef) => {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
-    const ref = useCombinedRefs(outerRef);
-    useEffect(() => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
-            // @ts-ignore
-            '--prefix-gap': parseStyle(outerGap).value,
-        }, children: children }, void 0));
-});
-
-        

package/dist/es/components/layout/Space.js

@@ -1,32 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-const DEFAULT_STYLES = {
-    display: 'flex',
-    gap: true,
-};
-export const Space = forwardRef(function Space(props, ref) {
-    const flow = props.direction
-        ? props.direction === 'vertical'
-            ? 'column'
-            : 'row'
-        : props.flow || 'row';
-    const styles = extractStyles(props, CONTAINER_STYLES, {
-        ...DEFAULT_STYLES,
-        flow,
-        alignItems: flow === 'row' ? 'center' : 'stretch',
-    });
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/layout/Suffix.js

@@ -1,42 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.6
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES } from '../../styles/list';
-import { extractStyles, parseStyle } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { useCombinedRefs } from '../../utils/react';
-const DEFAULT_STYLES = {
-    position: 'absolute',
-    display: 'grid',
-    placeContent: 'stretch',
-    placeItems: 'center',
-    flow: 'column',
-    gap: 0,
-    right: '@suffix-gap',
-    top: '@suffix-gap',
-    bottom: '@suffix-gap',
-    color: '#dark.75',
-    height: '(100% - (2 * @suffix-gap))',
-};
-export const Suffix = forwardRef((allProps, outerRef) => {
-    let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES, DEFAULT_STYLES);
-    const ref = useCombinedRefs(outerRef);
-    useEffect(() => {
-        if (ref && ref.current && onWidthChange) {
-            onWidthChange(ref.current.offsetWidth);
-        }
-    }, [children, ref, onWidthChange]);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
-            '--suffix-gap': parseStyle(outerGap).value,
-        }, children: children }, void 0));
-});
-
-