@cube-dev/ui-kit 0.9.10 → 0.10.1

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { DialogForm, Field, Paragraph, Input, Text, } from '../../index';
-export const ConfirmDeletionDialogForm = forwardRef((props, ref) => {
+export function ConfirmDeletionDialogForm(props) {
     let { name, onSubmit, onDismiss } = props;
-    return (_jsxs(DialogForm, { ref: ref, title: "Delete Deployment", onSubmit: onSubmit, onDismiss: onDismiss, submitProps: {
+    return (_jsxs(DialogForm, { title: "Delete Deployment", onSubmit: onSubmit, onDismiss: onDismiss, submitProps: {
             label: 'Delete',
             theme: 'danger',
         }, cancelProps: {
@@ -28,6 +27,6 @@ export const ConfirmDeletionDialogForm = forwardRef((props, ref) => {
                         },
                     },
                 ], children: _jsx(Input.Text, { placeholder: "Enter the name of the instance" }, void 0) }, void 0)] }, void 0));
-});
+}
 
         

package/es/stories/components/DialogFormApp.js

@@ -1,23 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Button } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogTrigger } from '../../index';
 import { ConfirmDeletionDialogForm } from './ConfirmDeletionDialogForm';
 export function DialogFormApp() {
-    const ConfirmDeletionDialogFormRef = useRef(null);
-    function onConfirm() {
-        console.log('Deletion is confirmed');
-    }
-    function onDismiss() {
-        console.log('Deletion is cancelled');
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onPress: () => { var _a; return (_a = ConfirmDeletionDialogFormRef === null || ConfirmDeletionDialogFormRef === void 0 ? void 0 : ConfirmDeletionDialogFormRef.current) === null || _a === void 0 ? void 0 : _a.open(); }, children: "Delete the instance" }, void 0), _jsx(ConfirmDeletionDialogForm, { ref: ConfirmDeletionDialogFormRef, name: "instanceName", onSubmit: onConfirm, onDismiss: onDismiss }, void 0)] }, void 0));
+    return (_jsxs(DialogTrigger, { children: [_jsx(Button, { children: "Delete the instance" }, void 0), _jsx(ConfirmDeletionDialogForm, { name: "instanceName" }, void 0)] }, void 0));
 }
 
         

package/es/stories/components/StyledButton.js

@@ -1,20 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled } from '../../styled';
+import { tasty } from '../../tasty';
 import { Button } from '../../components/actions';
-export const StyledButton = styled(Button, {
+export const StyledButton = tasty(Button, {
     styles: {
         padding: '3x 6x',
         preset: 't1',
     },
 });
-export const GlobalStyledHeading = styled('div.myButton', {
+export const GlobalStyledHeading = tasty('div.myButton', {
     display: 'inline-block',
     padding: '1x 2x',
     preset: 't2',

package/es/stories/lists/baseProps.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
-import { BASE_STYLES, CONTAINER_STYLES, BLOCK_STYLES, COLOR_STYLES, FLOW_STYLES, OUTER_STYLES, DIMENSION_STYLES, TEXT_STYLES, POSITION_STYLES, } from '../../styles/list';
+import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES, } from '../../tasty';
 const allStyles = Array.from(new Set([
     ...BASE_STYLES,
     ...POSITION_STYLES,

package/es/styled/index.js

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

package/es/styled/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -9,14 +9,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styledComponents, { createGlobalStyle } from 'styled-components';
 import { forwardRef, useContext, useMemo } from 'react';
 import { isValidElementType } from 'react-is';
-import { BreakpointsContext } from '../providers/BreakpointsProvider';
-import { modAttrs } from '../utils/react';
-import { useContextStyles } from '../providers/StylesProvider';
-import { renderStyles } from '../utils/renderStyles';
-import { pointsToZones } from '../utils/responsive';
-import { BASE_STYLES } from '../styles/list';
-import { mergeStyles } from '../utils/mergeStyles';
-import { deprecationWarning } from '../utils/warnings';
+import { BASE_STYLES, BreakpointsContext, modAttrs, pointsToZones, renderStyles, } from '../tasty';
+import { mergeStyles } from '../tasty';
+import { deprecationWarning } from '../tasty';
+import { useContextStyles } from '../providers/StyleProvider';
 // Implementation
 function styled(Component, options) {
     var _a, _b, _c, _d, _e, _f;
@@ -72,7 +68,8 @@ function styled(Component, options) {
         let allStyles = useMemo(() => mergeStyles(defaultStyles, contextStyles, styles, propStyles), [contextStyles, styles, propStyles]);
         let contextBreakpoints = useContext(BreakpointsContext);
         let zones = pointsToZones(breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints);
-        css = `${typeof defaultCSS === 'function' ? defaultCSS(props) : defaultCSS !== null && defaultCSS !== void 0 ? defaultCSS : ''}${typeof css === 'function' ? css(props) : css !== null && css !== void 0 ? css : ''}${allStyles ? renderStyles(allStyles, zones) : ''}`;
+        let renderedStyles = useMemo(() => renderStyles(allStyles, zones), [allStyles, zones]);
+        css = `${defaultCSS !== null && defaultCSS !== void 0 ? defaultCSS : ''}${css !== null && css !== void 0 ? css : ''}${allStyles ? renderedStyles : ''}`;
         if (mods) {
             Object.assign(props, modAttrs(mods));
         }
@@ -81,7 +78,6 @@ function styled(Component, options) {
     _StyledComponent.displayName = `CubeStyled(${(_f = (_e = Element.displayName) !== null && _e !== void 0 ? _e : Element.name) !== null && _f !== void 0 ? _f : tag})`;
     return _StyledComponent;
 }
-const tasty = styled;
-export { styled, tasty };
+export { styled };
 
         

package/es/tasty/index.js

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+export { tasty, Element } from './tasty';
+export * from './utils/filterBaseProps';
+export * from './utils/colors';
+export * from './utils/styles';
+export * from './utils/modAttrs';
+export * from './utils/responsive';
+export * from './utils/renderStyles';
+export * from './utils/dotize';
+export * from './styles/list';
+export * from './providers/BreakpointsProvider';
+export * from './utils/mergeStyles';
+export * from './utils/warnings';
+
+        

package/es/{providers → tasty/providers}/BreakpointsProvider.js

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

package/es/{styles → tasty/styles}/align.js

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

package/es/{styles → tasty/styles}/border.js

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

package/es/{styles → tasty/styles}/boxShadow.combinator.js

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

package/es/{styles → tasty/styles}/color.js

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

package/es/{styles → tasty/styles}/createStyle.js

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

package/es/{styles → tasty/styles}/dimension.js

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

package/es/{styles → tasty/styles}/display.js

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

package/es/{styles → tasty/styles}/fill.js

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

package/es/{styles → tasty/styles}/flow.js

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

package/es/{styles → tasty/styles}/font.js

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

package/es/{styles → tasty/styles}/fontStyle.js

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

package/es/{styles → tasty/styles}/gap.js

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

package/es/{styles → tasty/styles}/groupRadius.js

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

package/es/{styles → tasty/styles}/height.js

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

package/es/{styles → tasty/styles}/index.js

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

package/es/{styles → tasty/styles}/justify.js

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

package/es/{styles → tasty/styles}/list.js

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

package/es/{styles → tasty/styles}/margin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -25,9 +25,9 @@ export function marginStyle({ margin, marginBlock, marginInline, marginTop, marg
     const marginDirs = [marginTop, marginRight, marginBottom, marginLeft];
     return directions.reduce((styles, dir) => {
         const index = DIRECTIONS.indexOf(dir);
-        if (((!!(index % 2) && marginInline == null)
-            || (!(index % 2) && marginBlock == null))
-            && marginDirs[index] == null) {
+        if (((!!(index % 2) && marginInline == null) ||
+            (!(index % 2) && marginBlock == null)) &&
+            marginDirs[index] == null) {
             styles[`margin-${dir}`] = values[index] || values[index % 2] || values[0];
         }
         return styles;

package/es/{styles → tasty/styles}/marginBlock.js

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

package/es/{styles → tasty/styles}/marginInline.js

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

package/es/{styles → tasty/styles}/outline.js

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

package/es/{styles → tasty/styles}/padding.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -25,11 +25,11 @@ export function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop,
     const paddingDirs = [paddingTop, paddingRight, paddingBottom, paddingLeft];
     return directions.reduce((styles, dir) => {
         const index = DIRECTIONS.indexOf(dir);
-        if (((!!(index % 2) && paddingInline == null)
-            || (!(index % 2) && paddingBlock == null))
-            && paddingDirs[index] == null) {
-            styles[`padding-${dir}`]
-                = values[index] || values[index % 2] || values[0];
+        if (((!!(index % 2) && paddingInline == null) ||
+            (!(index % 2) && paddingBlock == null)) &&
+            paddingDirs[index] == null) {
+            styles[`padding-${dir}`] =
+                values[index] || values[index % 2] || values[0];
         }
         return styles;
     }, {});

package/es/{styles → tasty/styles}/paddingBlock.js

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

package/es/{styles → tasty/styles}/paddingInline.js

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

package/es/{styles → tasty/styles}/predefined.js

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

package/es/{styles → tasty/styles}/preset.js

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

package/es/{styles → tasty/styles}/radius.js

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

package/es/{styles → tasty/styles}/reset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -43,8 +43,6 @@ line-height: inherit;
         {
             $: '[disabled]',
             css: `
-color: inherit;
-background: transparent;
 -webkit-opacity: 1;
 `,
         },

package/es/{styles → tasty/styles}/shadow.js

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

package/es/{styles → tasty/styles}/styledScrollbar.js

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

package/es/{styles → tasty/styles}/transition.js

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

package/es/{styles → tasty/styles}/types.js

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

package/es/{styles → tasty/styles}/width.js

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

package/es/tasty/tasty.js

@@ -0,0 +1,90 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import styledComponents, { createGlobalStyle } from 'styled-components';
+import { forwardRef, useContext, useMemo } from 'react';
+import { isValidElementType } from 'react-is';
+import { BreakpointsContext } from './providers/BreakpointsProvider';
+import { modAttrs } from './utils/modAttrs';
+import { renderStyles } from './utils/renderStyles';
+import { pointsToZones } from './utils/responsive';
+import { BASE_STYLES } from './styles/list';
+import { mergeStyles } from './utils/mergeStyles';
+// Implementation
+function tasty(Component, options) {
+    var _a, _b, _c, _d;
+    if (typeof Component === 'string') {
+        let selector = Component;
+        let styles = options;
+        let Element = createGlobalStyle `${(css) => css}`;
+        const _StyleDeclarationComponent = ({ breakpoints, }) => {
+            let contextBreakpoints = useContext(BreakpointsContext);
+            breakpoints = breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints;
+            let css = useMemo(() => styles
+                ? `\n{}${selector}{${renderStyles(styles, pointsToZones(breakpoints || contextBreakpoints))}}`
+                : '', [breakpoints.join(',')]);
+            return _jsx(Element, { css: css }, void 0);
+        };
+        _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${Component})`;
+        return _StyleDeclarationComponent;
+    }
+    if (isValidElementType(Component)) {
+        let { as: extendTag, element: extendElement, ...defaultProps } = options !== null && options !== void 0 ? 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(restProps[prop], defaultProps[prop]);
+                    }
+                    else {
+                        map[prop] = restProps[prop] || defaultProps[prop];
+                    }
+                    return map;
+                }, {});
+            }, propsWithStylesValues);
+            return (_jsx(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as !== null && as !== void 0 ? as : extendTag, element: element || extendElement }, void 0));
+        });
+        _WrappedComponent.displayName = `TastyWrappedComponent(${(_d = (_c = (_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : defaultProps.qa) !== null && _c !== void 0 ? _c : extendTag) !== null && _d !== void 0 ? _d : 'Anonymous'})`;
+        return _WrappedComponent;
+    }
+    options = Component;
+    let { as: originalAs = 'div', element: defaultElement, styles: defaultStyles, styleProps, ...defaultProps } = options;
+    let Element = styledComponents[originalAs](({ css }) => css);
+    let _TastyComponent = forwardRef((allProps, ref) => {
+        let { as, styles, breakpoints, mods, element, qa, qaVal, ...otherProps } = allProps;
+        let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps !== null && defaultProps !== void 0 ? defaultProps : {};
+        let propStyles = (styleProps
+            ? styleProps.concat(BASE_STYLES)
+            : BASE_STYLES).reduce((map, prop) => {
+            if (prop in otherProps) {
+                map[prop] = otherProps[prop];
+                delete otherProps[prop];
+            }
+            return map;
+        }, {});
+        let allStyles = useMemo(() => mergeStyles(defaultStyles, styles, propStyles), [styles, propStyles]);
+        let contextBreakpoints = useContext(BreakpointsContext);
+        breakpoints = breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints;
+        let renderedStyles = useMemo(() => allStyles
+            ? renderStyles(allStyles, pointsToZones(breakpoints))
+            : '', [allStyles, breakpoints]);
+        if (mods) {
+            Object.assign(otherProps, modAttrs(mods));
+        }
+        return (_jsx(Element, { as: as !== null && as !== void 0 ? as : originalAs, "data-element": element || defaultElement, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, css: renderedStyles }, void 0));
+    });
+    _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
+    return _TastyComponent;
+}
+const Element = tasty({});
+export { tasty, Element };
+
+