@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -11,42 +11,57 @@ exports.RadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
+const Label_1 = require("../Label");
 const provider_1 = require("../../../provider");
 const radio_1 = require("@react-aria/radio");
 const radio_2 = require("@react-stately/radio");
 const Form_1 = require("../Form/Form");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const RadioGroupElement = (0, tasty_1.tasty)({
-    qa: 'RadioGroup',
-    styles: {
-        display: 'flex',
-        placeItems: 'start',
-        placeContent: 'start',
-        flow: {
-            '': 'column',
-            horizontal: 'row wrap',
-        },
-        gap: {
-            '': '1x',
-            horizontal: '1x 2x',
-        },
-        padding: '(1x - 1bw) 0',
+const StyleProvider_1 = require("../../../providers/StyleProvider");
+const GROUP_STYLES = {
+    display: 'flex',
+    placeItems: 'start',
+    placeContent: 'start',
+    flow: {
+        '': 'column',
+        horizontal: 'row wrap',
     },
-});
+    gap: {
+        '': '1x',
+        horizontal: '1x 2x',
+    },
+    padding: '(1x - 1bw) 0',
+};
 function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, groupStyles);
+    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup_Wrapper', props);
+    let groupContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup', props);
+    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup_Label', props);
+    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
+        ...wrapperContextStyles,
+        ...styles,
+    });
+    groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
+        ...GROUP_STYLES,
+        ...groupContextStyles,
+        ...groupStyles,
+    });
+    labelStyles = {
+        ...Label_1.LABEL_STYLES,
+        ...labelContextStyles,
+        ...labelStyles,
+    };
     let state = (0, radio_2.useRadioGroupState)(props);
     let { radioGroupProps: fieldProps, labelProps } = (0, radio_1.useRadioGroup)(props, state);
-    let radioGroup = ((0, jsx_runtime_1.jsx)(RadioGroupElement, { styles: groupStyles, mods: {
+    let radioGroup = ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "RadioGroup", styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isRequired,

package/cjs/components/forms/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -16,6 +16,7 @@ const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const HiddenInput_1 = require("../../HiddenInput");
@@ -24,97 +25,100 @@ const icons_1 = require("@ant-design/icons");
 const Form_1 = require("../Form/Form");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const BaseSwitchWrapperElement = (0, tasty_1.tasty)({
-    qa: 'SwitchWrapper',
-});
-const SwitchWrapperElement = (0, tasty_1.tasty)({
-    qa: 'SwitchWrapper',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'row',
-        preset: 'input',
-        width: 'min-content',
-        cursor: 'pointer',
+const StyleProvider_1 = require("../../../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 SwitchElement = (0, tasty_1.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',
-        },
+    color: '#white',
+    border: false,
+    width: '5.25x 5.25x',
+    height: '3x 3x',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
     },
-});
-const SwitchThumbElement = (0, tasty_1.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: '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 = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.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 styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
-    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
-    labelStyles = (0, react_1.useMemo)(() => ({
+    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Wrapper', props);
+    let inputContextStyles = (0, StyleProvider_1.useContextStyles)('Switch', props);
+    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Label', props);
+    let thumbContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Thumb', props);
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES, {
+        ...(insideForm ? {} : STYLES),
+        ...wrapperContextStyles,
+    });
+    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...inputContextStyles,
+        ...(insideForm && labelPosition === 'side'
+            ? {
+                marginTop: '-3px',
+                placeSelf: 'start',
+            }
+            : null),
+        ...inputStyles,
+    });
+    thumbStyles = {
+        ...THUMB_STYLES,
+        ...thumbContextStyles,
+        ...thumbStyles,
+    };
+    labelStyles = {
         ...(insideForm ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
+        ...labelContextStyles,
         ...labelStyles,
-    }), [insideForm, labelStyles]);
+    };
     let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     let { inputProps } = (0, switch_1.useSwitch)(props, (0, toggle_1.useToggleState)(props), inputRef);
-    const switchField = ((0, jsx_runtime_1.jsxs)(BaseSwitchWrapperElement, { qa: qa || 'Switch', children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(SwitchElement, { mods: {
-                    'inside-form': insideForm,
-                    'side-label': labelPosition === 'side',
+    const switchField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: `${qa || 'Switch'}Wrapper`, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Switch', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
                     checked: inputProps.checked,
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: (0, jsx_runtime_1.jsx)(SwitchThumbElement, { styles: thumbStyles, mods: {
+                }, styles: inputStyles, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
                         checked: inputProps.checked,
                     } }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
@@ -136,7 +140,7 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { as: "label", styles: styles, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [switchField, label && ((0, jsx_runtime_1.jsxs)(tasty_1.Element, { styles: labelStyles, mods: {
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [switchField, label && ((0, jsx_runtime_1.jsxs)(Base_1.Base, { styles: labelStyles, mods: {
                     disabled: isDisabled,
                 }, ...(0, tasty_1.filterBaseProps)(labelProps), children: [label, isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }, void 0) : null, (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0))] }, void 0));
 }

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -15,6 +15,7 @@ const react_1 = require("react");
 const Form_1 = require("../Form/Form");
 const interactions_1 = require("@react-aria/interactions");
 const provider_1 = require("../../../provider");
+const Base_1 = require("../../Base");
 const tasty_1 = require("../../../tasty");
 const interactions_2 = require("../../../utils/react/interactions");
 const Prefix_1 = require("../../layout/Prefix");
@@ -23,21 +24,11 @@ const FieldWrapper_1 = require("../FieldWrapper");
 const Space_1 = require("../../layout/Space");
 const Block_1 = require("../../Block");
 const react_2 = require("../../../utils/react");
-const InputWrapperElement = (0, tasty_1.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 StyleProvider_1 = require("../../../providers/StyleProvider");
+const WRAPPER_STYLES = {
+    display: 'grid',
+    position: 'relative',
+};
 const STYLE_LIST = [...tasty_1.POSITION_STYLES, ...tasty_1.DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...tasty_1.BLOCK_STYLES, 'resize'];
 exports.DEFAULT_INPUT_STYLES = {
@@ -81,9 +72,6 @@ exports.DEFAULT_INPUT_STYLES = {
     margin: 0,
     resize: 'none',
 };
-const InputElement = (0, tasty_1.tasty)({
-    styles: exports.DEFAULT_INPUT_STYLES,
-});
 function TextInputBase(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
@@ -92,7 +80,16 @@ function TextInputBase(props, ref) {
     let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
     let styles = (0, tasty_1.extractStyles)(otherProps, STYLE_LIST);
     let type = otherProps.type;
-    inputStyles = (0, tasty_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
+    let contextStyles = (0, StyleProvider_1.useContextStyles)('Input', otherProps);
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, {
+        ...exports.DEFAULT_INPUT_STYLES,
+        ...contextStyles,
+        ...inputStyles,
+    });
+    wrapperStyles = {
+        ...WRAPPER_STYLES,
+        ...wrapperStyles,
+    };
     if (prefix) {
         inputStyles.paddingLeft = `${prefixWidth}px`;
     }
@@ -129,13 +126,12 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: {
+    let textField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
             invalid: isInvalid,
             valid: validationState === 'valid',
             loadable: !!loadingIndicator,
             multiline: multiLine,
-            'text-prefix': prefix === 'string',
-        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
+        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'TextInput', as: ElementType, ...(0, react_2.mergeProps)(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
@@ -143,7 +139,7 @@ function TextInputBase(props, ref) {
                     focused: isFocused,
                 }, style: {
                     WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), (0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: prefix }, void 0), (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles }, void 0), (0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { padding: "0 1x 0 1.5x", onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: typeof prefix === 'string' ? ((0, jsx_runtime_1.jsx)(Block_1.Block, { padding: "1x left", children: prefix }, void 0)) : (prefix) }, void 0), (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { padding: ".5x left", onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,

package/cjs/components/forms/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,16 +10,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
-const FlexElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'flex',
-        flow: 'row',
-    },
-});
+const DEFAULT_STYLES = {
+    display: 'flex',
+    flow: 'row',
+};
 exports.Flex = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(FlexElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,17 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
-const FlowElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'block',
-        flow: 'column',
-    },
-});
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+};
 const STYLE_PROPS = tasty_1.CONTAINER_STYLES;
 exports.Flow = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
-    return ((0, jsx_runtime_1.jsx)(FlowElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS, DEFAULT_STYLES);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,13 +10,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
-const GridElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'grid',
-        flow: 'row',
-    },
-});
+const DEFAULT_STYLES = {
+    display: 'grid',
+    flow: 'row',
+    gap: '@(column-gap, 0)',
+};
 const PROP_MAP = {
     template: 'gridTemplate',
     columns: 'gridColumns',
@@ -24,8 +24,8 @@ const PROP_MAP = {
     areas: 'gridAreas',
 };
 exports.Grid = (0, react_1.forwardRef)((props, ref) => {
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, undefined, PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES, PROP_MAP);
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 
         

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,34 +10,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Prefix = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
 const react_2 = require("../../utils/react");
-const PrefixElement = (0, tasty_1.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))',
-    },
-});
+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))',
+};
 exports.Prefix = (0, react_1.forwardRef)((allProps, outerRef) => {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
     (0, react_1.useEffect)(() => {
         if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(PrefixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
             // @ts-ignore
             '--prefix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));

package/cjs/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,28 +10,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Space = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Base_1 = require("../Base");
 const tasty_1 = require("../../tasty");
-const SpaceElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'flex',
-        gap: true,
-        flow: {
-            '': 'row',
-            vertical: 'column',
-        },
-        alignItems: {
-            '': 'center',
-            vertical: 'stretch',
-        },
-    },
-});
+const DEFAULT_STYLES = {
+    display: 'flex',
+    gap: true,
+};
 exports.Space = (0, react_1.forwardRef)(function Space(props, ref) {
-    const { mods, direction, ...otherProps } = props;
-    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(SpaceElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { eventProps: true }), mods: {
-            vertical: direction === 'vertical',
-            ...mods,
-        }, styles: styles, ref: ref }, void 0));
+    const flow = props.direction
+        ? props.direction === 'vertical'
+            ? 'column'
+            : 'row'
+        : props.flow || 'row';
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, {
+        ...DEFAULT_STYLES,
+        flow,
+        alignItems: flow === 'row' ? 'center' : 'stretch',
+    });
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });