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

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-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,6 @@ 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");
@@ -24,11 +23,21 @@ const FieldWrapper_1 = require("../FieldWrapper");
 const Space_1 = require("../../layout/Space");
 const Block_1 = require("../../Block");
 const react_2 = require("../../../utils/react");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
-const WRAPPER_STYLES = {
-    display: 'grid',
-    position: 'relative',
-};
+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 STYLE_LIST = [...tasty_1.POSITION_STYLES, ...tasty_1.DIMENSION_STYLES];
 const INPUT_STYLE_PROPS_LIST = [...tasty_1.BLOCK_STYLES, 'resize'];
 exports.DEFAULT_INPUT_STYLES = {
@@ -72,6 +81,9 @@ 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);
@@ -80,16 +92,7 @@ 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;
-    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,
-    };
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
     if (prefix) {
         inputStyles.paddingLeft = `${prefixWidth}px`;
     }
@@ -126,12 +129,13 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: wrapperRef, qa: `${qa || 'TextInput'}Wrapper`, mods: {
+    let textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: {
             invalid: isInvalid,
             valid: validationState === 'valid',
             loadable: !!loadingIndicator,
             multiline: multiLine,
-        }, "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: {
+            '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: {
                     invalid: isInvalid,
                     valid: validationState === 'valid',
                     disabled: isDisabled,
@@ -139,7 +143,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, { 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));
+                }, 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));
     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-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -10,15 +10,16 @@ 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 DEFAULT_STYLES = {
-    display: 'flex',
-    flow: 'row',
-};
+const FlexElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'flex',
+        flow: 'row',
+    },
+});
 exports.Flex = (0, react_1.forwardRef)((props, ref) => {
-    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));
+    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));
 });
 
         

package/cjs/components/layout/Flow.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.
  */
 
@@ -10,16 +10,17 @@ 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 DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-};
+const FlowElement = (0, tasty_1.tasty)({
+    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, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    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));
 });
 
         

package/cjs/components/layout/Grid.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.
  */
 
@@ -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 DEFAULT_STYLES = {
-    display: 'grid',
-    flow: 'row',
-    gap: '@(column-gap, 0)',
-};
+const GridElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'grid',
+        flow: 'row',
+    },
+});
 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, 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));
+    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));
 });
 
         

package/cjs/components/layout/Prefix.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.
  */
 
@@ -10,32 +10,34 @@ 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 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 = (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))',
+    },
+});
 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, DEFAULT_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_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)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(PrefixElement, { ...(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-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -10,24 +10,28 @@ 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 DEFAULT_STYLES = {
-    display: 'flex',
-    gap: true,
-};
+const SpaceElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'flex',
+        gap: true,
+        flow: {
+            '': 'row',
+            vertical: 'column',
+        },
+        alignItems: {
+            '': 'center',
+            vertical: 'stretch',
+        },
+    },
+});
 exports.Space = (0, react_1.forwardRef)(function Space(props, ref) {
-    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));
+    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));
 });
 
         

package/cjs/components/layout/Suffix.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.
  */
 
@@ -10,32 +10,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Suffix = 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 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 = (0, tasty_1.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))',
+    },
+});
 exports.Suffix = (0, react_1.forwardRef)((allProps, outerRef) => {
     let { onWidthChange, outerGap = '1bw', children, ...props } = allProps;
-    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
+    const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
     (0, react_1.useEffect)(() => {
         if (ref && ref.current && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
+    return ((0, jsx_runtime_1.jsx)(SuffixElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), styles: styles, ref: ref, style: {
             '--suffix-gap': (0, tasty_1.parseStyle)(outerGap).value,
         }, children: children }, void 0));
 });

package/cjs/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/cjs/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/cjs/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/cjs/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.
  */
 

package/cjs/components/organisms/StatsCard/StatsCard.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/cjs/components/other/Base64Upload/Base64Upload.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/cjs/components/other/CloudLogo/CloudLogo.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/cjs/components/overlays/AlertDialog/AlertDialog.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/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.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/cjs/components/overlays/AlertDialog/AlertDialogZone.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/cjs/components/overlays/AlertDialog/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/cjs/components/overlays/AlertDialog/types.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.
  */