@cube-dev/ui-kit 0.0.0-canary-23bc0fd → 0.0.0-canary-9ea74e0

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

@@ -1,19 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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 { forwardRef, useMemo, 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, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../../tasty';
-import { Base } from '../../Base';
+import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
@@ -22,100 +21,100 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
-import { useContextStyles } from '../../../providers/StyleProvider';
-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',
+const BaseSwitchWrapperElement = tasty({
+    qa: 'SwitchWrapper',
+});
+const SwitchWrapperElement = tasty({
+    qa: 'SwitchWrapper',
+    styles: {
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'row',
+        preset: 'input',
+        width: 'min-content',
+        cursor: 'pointer',
     },
-    color: '#white',
-    border: false,
-    width: '5.25x 5.25x',
-    height: '3x 3x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const SwitchElement = tasty({
+    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',
+        marginTop: {
+            '': null,
+            'inside-form & side-label': '-3px',
+        },
+        placeSelf: {
+            '': null,
+            'inside-form & side-label': 'start',
+        },
     },
-    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',
+});
+const SwitchThumbElement = tasty({
+    'aria-hidden': 'true',
+    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',
     },
-    transition: 'left',
-    cursor: 'pointer',
-};
+});
 function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, isDisabled = false, autoFocus, children, label, extra, 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 = {
+    const SwitchWrapperElementToUse = insideForm
+        ? BaseSwitchWrapperElement
+        : SwitchWrapperElement;
+    let styles = extractStyles(props, OUTER_STYLES);
+    inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+    labelStyles = useMemo(() => ({
         ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
-        ...labelContextStyles,
         ...labelStyles,
-    };
+    }), [insideForm, 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: {
+    const switchField = (_jsxs(SwitchWrapperElement, { qa: qa || 'Switch', children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { mods: {
+                    'inside-form': insideForm,
+                    'side-label': labelPosition === 'side',
                     checked: inputProps.checked,
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: _jsx(Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
+                }, styles: inputStyles, children: _jsx(SwitchThumbElement, { styles: thumbStyles, mods: {
                         checked: inputProps.checked,
                     } }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
@@ -137,7 +136,7 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(Base, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Base, { styles: labelStyles, mods: {
+    return (_jsxs(Element, { as: "label", styles: styles, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label && (_jsxs(Element, { 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));
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -12,8 +12,7 @@ import { cloneElement, forwardRef, useImperativeHandle, useRef, useState, } from
 import { useFormProps } from '../Form/Form';
 import { useHover } from '@react-aria/interactions';
 import { useProviderProps } from '../../../provider';
-import { Base } from '../../Base';
-import { extractStyles, BLOCK_STYLES, DIMENSION_STYLES, POSITION_STYLES, } from '../../../tasty';
+import { BLOCK_STYLES, DIMENSION_STYLES, extractStyles, POSITION_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { Prefix } from '../../layout/Prefix';
 import { Suffix } from '../../layout/Suffix';
@@ -21,11 +20,21 @@ import { FieldWrapper } from '../FieldWrapper';
 import { Space } from '../../layout/Space';
 import { Block } from '../../Block';
 import { mergeProps } from '../../../utils/react';
-import { useContextStyles } from '../../../providers/StyleProvider';
-const WRAPPER_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
+const InputWrapperElement = tasty({
+    styles: {
+        display: 'grid',
+        position: 'relative',
+        Prefix: {
+            padding: {
+                '': '0 1x 0 1.5x',
+                'text-prefix': '0 1x 0 2.5x',
+            },
+        },
+        Suffix: {
+            padding: '.5x left',
+        },
+    },
+});
 const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
 export const DEFAULT_INPUT_STYLES = {
@@ -69,6 +78,9 @@ export const DEFAULT_INPUT_STYLES = {
     margin: 0,
     resize: 'none',
 };
+const InputElement = tasty({
+    styles: DEFAULT_INPUT_STYLES,
+});
 function TextInputBase(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -77,16 +89,7 @@ function TextInputBase(props, ref) {
     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,
-    };
+    inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
     if (prefix) {
         inputStyles.paddingLeft = `${prefixWidth}px`;
     }
@@ -123,12 +126,13 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = (_jsxs(Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
+    let textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', 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: {
+            'text-prefix': prefix === 'string',
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { qa: "Input", as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
@@ -136,7 +140,7 @@ function TextInputBase(props, ref) {
                     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));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), _jsx(Prefix, { onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: prefix }, void 0), _jsxs(Suffix, { 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,

package/es/components/forms/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/layout/Flex.js

@@ -1,21 +1,22 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
-const DEFAULT_STYLES = {
-    display: 'flex',
-    flow: 'row',
-};
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
+const FlexElement = tasty({
+    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));
+    const styles = extractStyles(props, CONTAINER_STYLES);
+    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Flow.js

@@ -1,22 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-};
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
+const FlowElement = tasty({
+    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));
+    const styles = extractStyles(props, STYLE_PROPS);
+    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Grid.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
-const DEFAULT_STYLES = {
-    display: 'grid',
-    flow: 'row',
-    gap: '@(column-gap, 0)',
-};
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
+const GridElement = tasty({
+    styles: {
+        display: 'grid',
+        flow: 'row',
+    },
+});
 const PROP_MAP = {
     template: 'gridTemplate',
     columns: 'gridColumns',
@@ -21,8 +21,8 @@ const PROP_MAP = {
     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));
+    const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
+    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Prefix.js

@@ -1,38 +1,40 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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, extractStyles, filterBaseProps, parseStyle, } from '../../tasty';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty';
 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))',
-};
+const PrefixElement = tasty({
+    element: 'Prefix',
+    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 styles = extractStyles(props, CONTAINER_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: {
+    return (_jsx(PrefixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
             // @ts-ignore
             '--prefix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));

package/es/components/layout/Space.js

@@ -1,30 +1,34 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../tasty';
-const DEFAULT_STYLES = {
-    display: 'flex',
-    gap: true,
-};
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
+const SpaceElement = tasty({
+    styles: {
+        display: 'flex',
+        gap: true,
+        flow: {
+            '': 'row',
+            vertical: 'column',
+        },
+        alignItems: {
+            '': 'center',
+            vertical: 'stretch',
+        },
+    },
+});
 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));
+    const { mods, direction, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    return (_jsx(SpaceElement, { ...filterBaseProps(otherProps, { eventProps: true }), mods: {
+            vertical: direction === 'vertical',
+            ...mods,
+        }, styles: styles, ref: ref }, void 0));
 });
 
         

package/es/components/layout/Suffix.js

@@ -1,38 +1,40 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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, extractStyles, filterBaseProps, parseStyle, } from '../../tasty';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, parseStyle, tasty, } from '../../tasty';
 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))',
-};
+const SuffixElement = tasty({
+    element: 'Suffix',
+    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 styles = extractStyles(props, CONTAINER_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: {
+    return (_jsx(SuffixElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, style: {
             '--suffix-gap': parseStyle(outerGap).value,
         }, children: children }, void 0));
 });

package/es/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/navigation/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/organisms/FileTabs/FileTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/es/components/organisms/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */