@cube-dev/ui-kit 0.73.2 → 0.74.0

package/es/tasty/styles/dimension.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/display.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fade.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fill.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/font.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/fontStyle.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/gap.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/groupRadius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/height.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/inset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/justify.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/list.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/margin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/marginBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/marginInline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/outline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/padding.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/paddingBlock.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/paddingInline.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/place.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/predefined.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/preset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/radius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/reset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/scrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/shadow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/styledScrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/transition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/width.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/tasty.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useMemo } from 'react';
+import { createElement, forwardRef, useContext, useMemo, } from 'react';
 import { isValidElementType } from 'react-is';
 import styledComponents, { createGlobalStyle } from 'styled-components';
 import { BreakpointsContext } from './providers/BreakpointsProvider';
@@ -18,56 +18,71 @@ import { modAttrs } from './utils/modAttrs';
 import { renderStyles } from './utils/renderStyles';
 import { pointsToZones } from './utils/responsive';
 // Implementation
-function tasty(Component, options) {
+export function tasty(Component, options) {
     if (typeof Component === 'string') {
-        let selector = Component;
-        let styles = options;
-        let Element = createGlobalStyle `${({ $css }) => $css}`;
-        const _StyleDeclarationComponent = ({ breakpoints, }) => {
-            let contextBreakpoints = useContext(BreakpointsContext);
-            breakpoints = breakpoints ?? contextBreakpoints;
-            const breakpointsHash = breakpoints.join(',');
-            let css = useMemo(() => styles
-                ? `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpoints || [980]))}}`
-                : '', [breakpointsHash]);
-            return _jsx(Element, { "$css": css });
-        };
-        _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${Component})`;
-        return _StyleDeclarationComponent;
+        return tastyGlobal(Component, options);
     }
     if (isValidElementType(Component)) {
-        let { as: extendTag, element: extendElement, ...defaultProps } = options ?? {};
-        let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
-        let _WrappedComponent = forwardRef((props, ref) => {
-            const { as, element, ...restProps } = props;
-            const propsWithStylesValues = propsWithStyles.map((prop) => props[prop]);
-            const mergedStylesMap = useMemo(() => {
-                return propsWithStyles.reduce((map, prop) => {
-                    if (restProps[prop] != null && defaultProps[prop] != null) {
-                        map[prop] = mergeStyles(defaultProps[prop], restProps[prop]);
-                    }
-                    else {
-                        map[prop] = restProps[prop] || defaultProps[prop];
-                    }
-                    return map;
-                }, {});
-            }, [propsWithStylesValues]);
-            return (_jsx(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as ?? extendTag, element: element || extendElement }));
-        });
-        _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? 'Anonymous')})`;
-        return _WrappedComponent;
+        return tastyWrap(Component, options);
     }
-    const tastyOptions = Component;
+    return tastyElement(Component);
+}
+// Internal specialized implementations
+function tastyGlobal(selector, styles) {
+    let Element = createGlobalStyle `${({ $css }) => $css}`;
+    const _StyleDeclarationComponent = ({ breakpoints, }) => {
+        let contextBreakpoints = useContext(BreakpointsContext);
+        const breakpointsList = (breakpoints ?? contextBreakpoints) || [980];
+        const breakpointsHash = breakpointsList.join(',');
+        let css = useMemo(() => {
+            if (!styles)
+                return '';
+            return `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpointsList))}}`;
+        }, [breakpointsHash]);
+        return _jsx(Element, { "$css": css });
+    };
+    _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${selector})`;
+    return _StyleDeclarationComponent;
+}
+function tastyWrap(Component, options) {
+    let { as: extendTag, element: extendElement, ...defaultProps } = (options ?? {});
+    let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
+    const _WrappedComponent = forwardRef((props, ref) => {
+        const { as, element, ...restProps } = props;
+        const propsWithStylesValues = propsWithStyles.map((prop) => props[prop]);
+        const mergedStylesMap = useMemo(() => {
+            return propsWithStyles.reduce((map, prop) => {
+                const restValue = restProps[prop];
+                const defaultValue = defaultProps[prop];
+                if (restValue != null && defaultValue != null) {
+                    map[prop] = mergeStyles(defaultValue, restValue);
+                }
+                else {
+                    map[prop] = restValue ?? defaultValue;
+                }
+                return map;
+            }, {});
+        }, [propsWithStylesValues]);
+        const elementProps = {
+            ...defaultProps,
+            ...restProps,
+            ...mergedStylesMap,
+            as: as ?? extendTag,
+            element: element || extendElement,
+            ref,
+        };
+        return createElement(Component, elementProps);
+    });
+    _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(Component, defaultProps.qa ?? extendTag ?? 'Anonymous')})`;
+    return _WrappedComponent;
+}
+function tastyElement(tastyOptions) {
     let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, variants, ...defaultProps } = tastyOptions;
     let _TastyComponent;
     if (variants) {
-        /**
-         * Create a tasty component for each variant.
-         * Then return a component that receives a `variant` and chooses the right component.
-         */
-        const variantComponents = Object.keys(variants).reduce((map, variant) => {
-            const variantStyles = variants?.[variant];
-            map[variant] = tasty({
+        const variantEntries = Object.entries(variants);
+        const variantComponents = variantEntries.reduce((map, [variant, variantStyles]) => {
+            map[variant] = tastyElement({
                 as: originalAs,
                 styles: mergeStyles(defaultStyles, variantStyles),
                 styleProps,
@@ -76,7 +91,7 @@ function tasty(Component, options) {
             return map;
         }, {});
         if (!variantComponents['default']) {
-            variantComponents['default'] = tasty({
+            variantComponents['default'] = tastyElement({
                 as: originalAs,
                 styles: defaultStyles,
                 styleProps,
@@ -86,13 +101,14 @@ function tasty(Component, options) {
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
             const { variant, ...restProps } = allProps;
-            const Component = (variantComponents[variant] ||
-                variantComponents['default']);
-            return (_jsx(Component
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                ref: ref, ...restProps }));
+            const Component = variantComponents[variant || 'default'] ??
+                variantComponents['default'];
+            const componentProps = restProps;
+            const elementProps = {
+                ...componentProps,
+                ref,
+            };
+            return createElement(Component, elementProps);
         });
     }
     else {
@@ -101,56 +117,62 @@ function tasty(Component, options) {
          * An additional optimization that allows to avoid rendering styles across various instances
          * of the same element if no custom styles are provided via `styles` prop or direct style props.
          */
-        const renderDefaultStyles = cacheWrapper((breakpoints) => {
-            return renderStyles(defaultStyles || {}, pointsToZones(breakpoints));
-        });
+        const renderDefaultStyles = cacheWrapper((breakpoints) => renderStyles(defaultStyles || {}, pointsToZones(breakpoints)));
         let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
         // eslint-disable-next-line react/display-name
         _TastyComponent = forwardRef((allProps, ref) => {
-            let { as, styles, variant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
+            let { as, styles, variant: _omitVariant, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
             let propStyles = (styleProps
                 ? styleProps.concat(BASE_STYLES)
                 : BASE_STYLES).reduce((map, prop) => {
-                if (prop in otherProps) {
-                    map[prop] = otherProps[prop];
-                    delete otherProps[prop];
+                const key = prop;
+                if (Object.prototype.hasOwnProperty.call(otherProps, key)) {
+                    map[key] = otherProps[key];
+                    delete otherProps[key];
                 }
                 return map;
             }, {});
             if (Object.keys(propStyles).length === 0) {
                 propStyles = null;
             }
-            if (!styles || (styles && Object.keys(styles).length === 0)) {
+            if (!styles ||
+                (styles && Object.keys(styles).length === 0)) {
                 styles = undefined;
             }
             const propStylesCacheKey = JSON.stringify(propStyles);
-            const stylesCacheKey = useMemo(() => {
-                return JSON.stringify(styles);
-            }, [styles]);
+            const stylesCacheKey = useMemo(() => JSON.stringify(styles), [styles]);
             const useDefaultStyles = !propStyles && !styles;
-            const styleCacheKey = useMemo(() => {
-                return `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`;
-            }, [propStylesCacheKey, stylesCacheKey]);
+            const styleCacheKey = useMemo(() => `${styles ? JSON.stringify(styles) : ''}.${propStyles ? JSON.stringify(propStyles) : ''}`, [propStylesCacheKey, stylesCacheKey]);
             let allStyles = useMemo(() => useDefaultStyles
                 ? defaultStyles
                 : mergeStyles(defaultStyles, styles, propStyles), [styleCacheKey]);
             let contextBreakpoints = useContext(BreakpointsContext);
             breakpoints = breakpoints ?? contextBreakpoints;
-            let renderedStyles = useMemo(() => {
-                return useDefaultStyles
-                    ? renderDefaultStyles(breakpoints)
-                    : renderStyles(allStyles, pointsToZones(breakpoints));
-            }, [allStyles, breakpoints]);
+            let renderedStyles = useMemo(() => useDefaultStyles
+                ? renderDefaultStyles(breakpoints)
+                : renderStyles(allStyles, pointsToZones(breakpoints)), [allStyles, breakpoints?.join(',')]);
+            let modProps;
             if (mods) {
-                Object.assign(otherProps, modAttrs(mods));
+                const modsObject = mods;
+                modProps = modAttrs(modsObject);
             }
-            return (_jsx(Element, { as: as ?? originalAs, "data-element": element || defaultElement, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, "$css": renderedStyles }));
+            const elementProps = {
+                as: as ?? originalAs,
+                'data-element': element || defaultElement,
+                'data-qa': qa || defaultQa,
+                'data-qaval': qaVal || defaultQaVal,
+                ...otherDefaultProps,
+                ...otherProps,
+                ...(modProps || {}),
+                ref,
+                $css: renderedStyles,
+            };
+            return createElement(Element, elementProps);
         });
     }
     _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
     return _TastyComponent;
 }
-const Element = tasty({});
-export { tasty, Element };
+export const Element = tasty({});
 
         

package/es/tasty/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/cache-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/case-converter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/colors.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/dotize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/filterBaseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getDisplayName.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getModCombinations.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.73.2
+ * @cube-dev/ui-kit v0.74.0
  * Released under the MIT license.
  */