@cube-dev/ui-kit 0.0.0-canary-00505d5 → 0.0.0-canary-70220b3

package/types/styled/index.d.ts

@@ -0,0 +1 @@
+export * from './styled';

package/types/styled/styled.d.ts

@@ -1,20 +1,7 @@
 import { ComponentType } from 'react';
-import { AllBaseProps, BaseStyleProps } from '../tasty/types';
-import { Styles, StylesInterface } from '../tasty/styles/types';
-import { ResponsiveStyleValue } from '../tasty/utils/styles';
-export declare type StyledProps<K extends (keyof StylesInterface)[], DefaultProps> = {
-    /** The name of the element. It can be used to override styles in context. */
-    name?: string;
-    /** The tag name of the element. */
-    tag?: string;
-    /** Default styles of the element. */
-    styles?: Styles;
-    /** Default css of the element. */
-    css?: string;
-    props?: DefaultProps;
-    /** The list of styles that can be provided by props */
-    styleProps?: K;
-};
+import { AllBaseProps, BaseStyleProps, StyledProps } from '../components/types';
+import { Styles, StylesInterface } from '../styles/types';
+import { ResponsiveStyleValue } from '../utils/styles';
 export declare type AllBasePropsWithMods<K extends (keyof StylesInterface)[]> = AllBaseProps & {
     [key in K[number]]?: ResponsiveStyleValue<StylesInterface[key]>;
 } & BaseStyleProps;
@@ -35,18 +22,10 @@ declare type EitherLegacyPropsOrInlined<K extends (keyof StylesInterface)[], Def
 }) | ({
     props?: 'You Should use either legacy props field or inline props';
 } & DefaultProps);
-/**
- * @deprecated Use `tasty()` helper instead.
- */
 declare function styled<K extends (keyof StylesInterface)[], Props, DefaultProps extends Partial<Props> = Partial<Props>>(options: StyledProps<K, DefaultProps>, secondArg?: never): any;
-/**
- * @deprecated Use `tasty()` helper instead.
- */
 declare function styled(selector: string, styles?: Styles): any;
-/**
- * @deprecated Use `tasty()` helper instead.
- */
 declare function styled<K extends (keyof StylesInterface)[], Props extends {
     styles?: Styles;
 }, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: EitherLegacyPropsOrInlined<K, DefaultProps>): ComponentType<StyledPropsWithDefaults<Props, DefaultProps>>;
-export { styled };
+declare const tasty: typeof styled;
+export { styled, tasty };

package/types/{tasty/styles → styles}/types.d.ts

@@ -13,7 +13,7 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * fill="#dark.30" // the dark color with 30% opacity
      * ```
      */
-    fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | string;
+    fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
     /** Set the text (current) color of the element
      * ```
      * color="#{name_of_the_color}"

package/types/tokens.d.ts

@@ -94,10 +94,6 @@ declare const TOKENS: {
     't3m-line-height': string;
     't3m-letter-spacing': string;
     't3m-font-weight': string;
-    't3s-font-size': string;
-    't3s-line-height': string;
-    't3s-letter-spacing': string;
-    't3s-font-weight': string;
     't4-font-size': string;
     't4-line-height': string;
     't4-letter-spacing': string;

package/types/utils/escape-string.d.ts

@@ -0,0 +1 @@
+export default function escapeStringRegexp(string: any): string;

package/types/utils/react/index.d.ts

@@ -1,7 +1,7 @@
 export { chain } from './chain';
 export { isTextOnly } from './isTextOnly';
 export { mergeProps } from './mergeProps';
-export { modAttrs } from '../../tasty/utils/modAttrs';
+export { modAttrs } from './modAttrs';
 export { useSlotProps, SlotProvider, ClearSlots } from './Slots';
 export { useLayoutEffect } from './useLayoutEffect';
 export { useCombinedRefs } from './useCombinedRefs';

package/types/utils/react/mergeProps.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../../tasty/types';
+import { Props } from '../../components/types';
 /**
  * Merges multiple props objects together. Event handlers are chained,
  * classNames are combined, and ids are deduplicated - different ids

package/types/utils/react/nullableValue.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../../tasty/types';
+import { Props } from '../../components/types';
 export declare function castNullableStringValue<T>(props: T): T;
 export declare function castNullableNumberValue<T>(props: T): T;
 export declare function castNullableArrayValue<T>(props: T): T;

package/types/utils/warnings.d.ts

@@ -1,3 +1,9 @@
 export declare function propDeprecationWarning(name: any, props: any, propList: any): void;
 export declare function accessibilityWarning(...args: any[]): void;
 export declare function warn(...args: any[]): void;
+export declare function deprecationWarning(condition: any, { property, name, betterAlternative, reason, }: {
+    property: string;
+    name: string;
+    betterAlternative: (() => string) | string;
+    reason?: (() => string) | string;
+}): void;

package/cjs/components/organisms/DirectoryTree/DirectoryTree.js

@@ -1,166 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-00505d5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DirectoryTree = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const icons_1 = require("@ant-design/icons");
-const Flex_1 = require("../../layout/Flex");
-const Action_1 = require("../../actions/Action");
-const actions_1 = require("../../actions");
-const Space_1 = require("../../layout/Space");
-const Block_1 = require("../../Block");
-const IMAGES = {
-    created: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.572h2.714v2.715c0 .078.065.142.143.142h.857a.143.143 0 00.143-.143V8.572h2.715a.143.143 0 00.142-.143v-.857a.143.143 0 00-.142-.143H8.57V4.715a.143.143 0 00-.143-.143h-.857a.143.143 0 00-.143.143V7.43H4.714a.143.143 0 00-.143.143v.857c0 .079.065.143.143.143z", fill: "#67C082" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#67C082" }, void 0)] }, void 0)),
-    deleted: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4.714 8.57h6.572a.143.143 0 00.142-.142V7.57a.143.143 0 00-.142-.143H4.714a.143.143 0 00-.143.143v.857c0 .078.065.143.143.143z", fill: "#FF646D" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FF646D" }, void 0)] }, void 0)),
-    modified: ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.572.857H1.429a.57.57 0 00-.572.572v13.143a.57.57 0 00.572.571h13.143a.57.57 0 00.571-.571V1.429a.57.57 0 00-.571-.572zm-.715 13H2.143V2.143h11.714v11.714z", fill: "#FBBC05" }, void 0), (0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "2.222", fill: "#FBBC05" }, void 0)] }, void 0)),
-};
-const TEXT_OVERFLOW_STYLES = {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    maxWidth: '100%',
-    overflow: 'hidden',
-};
-function calcPadding(indent) {
-    return `.75x .5x .75x ${1.5 * indent + 0.5}x`;
-}
-function extractLeafKeys(subTreeData, dirsOnly = false) {
-    return subTreeData.reduce((list, item) => {
-        if (!item.isLeaf) {
-            list.push(item.key);
-            list.push(...extractLeafKeys(item.children || []));
-        }
-        else if (!dirsOnly) {
-            list.push(item.key);
-        }
-        return list;
-    }, []);
-}
-const MODE_BG = {
-    created: {
-        '': '#success.10',
-        hovered: '#success.15',
-    },
-    deleted: {
-        '': '#danger.08',
-        hovered: '#danger.13',
-    },
-};
-const MODE_COLOR = {
-    created: '#success',
-    deleted: '#danger',
-};
-function getItemStyles({ isSelected, mode, indent }) {
-    return {
-        width: 'max 100%',
-        radius: true,
-        textAlign: 'left',
-        fill: isSelected
-            ? '#purple.05'
-            : MODE_BG[mode] || {
-                '': '#clear',
-                hovered: '#dark.04',
-            },
-        color: isSelected ? '#purple-text' : MODE_COLOR[mode] || '#dark.75',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
-        fontWeight: isSelected ? 500 : 400,
-        padding: calcPadding(indent),
-    };
-}
-function Item(props) {
-    let { children, mode, indent, onPress, isSelected } = props;
-    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onPress, styles: getItemStyles({ isSelected, mode, indent }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
-}
-function sortTreeData(filesTree) {
-    filesTree = filesTree.map((item) => {
-        return {
-            ...item,
-            children: item.children ? sortTreeData(item.children) : undefined,
-        };
-    });
-    return filesTree.sort((a, b) => {
-        if (!a.isLeaf && b.isLeaf) {
-            return -1;
-        }
-        else if (!b.isLeaf && a.isLeaf) {
-            return 1;
-        }
-        else if (a.title && b.title) {
-            return a.title.localeCompare(b.title, 'en', { sensitivity: 'base' });
-        }
-        else {
-            return 0;
-        }
-    });
-}
-const HOVER_CSS = `
-  &:hover .actions {
-    opacity: 1;
-  }
-  &:not(:hover) .actions {
-    opacity: 0;
-  }
-`;
-function DirectoryTree(props) {
-    let { onSelect, treeData, selectedKey, defaultExpandAll, rootTitle, actionsPanel, onlyDirs, ...otherProps } = props;
-    treeData = sortTreeData(treeData);
-    const [expanded, setExpanded] = (0, react_1.useState)(['/']);
-    const [selected, setSelected] = (0, react_1.useState)(selectedKey);
-    const fullTreeData = [
-        {
-            key: '/',
-            title: rootTitle || '/',
-            children: treeData,
-        },
-    ];
-    (0, react_1.useEffect)(() => {
-        setSelected(selectedKey);
-    }, [selectedKey]);
-    (0, react_1.useEffect)(() => {
-        if (defaultExpandAll) {
-            setExpanded(extractLeafKeys(fullTreeData, true));
-        }
-    }, []);
-    function toggle(item) {
-        if (expanded.includes(item.key)) {
-            setExpanded(expanded.filter((key) => key !== item.key));
-        }
-        else {
-            setExpanded([...expanded, item.key]);
-        }
-    }
-    function select(item) {
-        onSelect && onSelect(item.key);
-        setSelected(item.key);
-    }
-    function recursiveRender(subTreeData, indent = 0) {
-        return subTreeData.reduce((list, item) => {
-            if (!item.isLeaf) {
-                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent, isSelected: selected === item.key, onPress: () => select(item), children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", css: HOVER_CSS, children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
-                                    '': '#dark.60',
-                                    hovered: '#purple',
-                                }, onPress: () => toggle(item), label: expanded.includes(item.key) ? 'Collapse' : 'Expand', children: expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0)) }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", flexGrow: 1, color: selected === item.key ? '#purple' : '#dark.50', children: [expanded.includes(item.key) ? ((0, jsx_runtime_1.jsx)(icons_1.FolderOpenFilled, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.FolderFilled, {}, void 0)), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0)] }, void 0), actionsPanel && actionsPanel(item)] }, void 0) }, item.key));
-                if (expanded.includes(item.key)) {
-                    list.push(...recursiveRender(item.children || [], indent + 1));
-                }
-            }
-            else if (!onlyDirs) {
-                list.push((0, jsx_runtime_1.jsx)(Item, { indent: indent + 1.7, isSelected: selected === item.key, onPress: () => select(item), mode: item.mode, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", css: HOVER_CSS, color: selected === item.key ? '#purple' : '#dark.50', children: [(0, jsx_runtime_1.jsx)(icons_1.FileOutlined, {}, void 0), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: selected === item.key ? '#purple-text' : '#dark.75', children: item.title }, void 0), actionsPanel && actionsPanel(item), item.mode && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { padding: "0 .5x", placeItems: "center", children: IMAGES[item.mode] }, void 0))] }, void 0) }, item.key));
-            }
-            return list;
-        }, []);
-    }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { styles: { flow: 'column', fontWeight: 500, width: '100%', gap: '1bw' }, ...otherProps, children: recursiveRender(fullTreeData) }, void 0));
-}
-exports.DirectoryTree = DirectoryTree;
-
-        

package/cjs/components/organisms/SearchResults/SearchResults.js

@@ -1,108 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-00505d5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchResults = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const icons_1 = require("@ant-design/icons");
-const Flex_1 = require("../../layout/Flex");
-const Action_1 = require("../../actions/Action");
-const actions_1 = require("../../actions");
-const Space_1 = require("../../layout/Space");
-const Block_1 = require("../../Block");
-const Paragraph_1 = require("../../content/Paragraph");
-const Text_1 = require("../../content/Text");
-const TEXT_OVERFLOW_STYLES = {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    maxWidth: '100%',
-    overflow: 'hidden',
-};
-function getItemStyles({ indent, isSelected, }) {
-    return {
-        width: 'max 100%',
-        radius: true,
-        textAlign: 'left',
-        fill: isSelected
-            ? '#purple.05'
-            : {
-                '': '#clear',
-                hovered: '#dark.04',
-            },
-        color: isSelected ? '#purple-text' : '#dark.75',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
-        fontWeight: 400,
-        padding: `.75x .5x .75x ${indent || 0.5}x`,
-    };
-}
-function Item({ children, indent, onPress, isSelected, }) {
-    return ((0, jsx_runtime_1.jsx)(Action_1.Action, { onPress: onPress, styles: getItemStyles({ indent, isSelected }), style: { whiteSpace: 'nowrap' }, children: children }, void 0));
-}
-const HOVER_CSS = `
-  &:hover .actions {
-    opacity: 1;
-  }
-  &:not(:hover) .actions {
-    opacity: 0;
-  }
-`;
-function SearchResults({ onSelect, files, selectedKey, defaultExpandAll, ...otherProps }) {
-    const [expanded, setExpanded] = (0, react_1.useState)([]);
-    const [selected, setSelected] = (0, react_1.useState)(selectedKey);
-    (0, react_1.useEffect)(() => {
-        setSelected(selectedKey);
-    }, [selectedKey]);
-    (0, react_1.useEffect)(() => {
-        if (defaultExpandAll) {
-            setExpanded(files.map((file) => file.key));
-        }
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (defaultExpandAll) {
-            setExpanded(files.map((file) => file.key));
-        }
-    }, [files]);
-    function toggle(item) {
-        if (expanded.includes(item.key)) {
-            setExpanded(expanded.filter((key) => key !== item.key));
-        }
-        else {
-            setExpanded([...expanded, item.key]);
-        }
-    }
-    function select(item, position) {
-        const key = typeof item === 'string' ? item : item.key;
-        onSelect && onSelect(key.split('|')[0], position);
-        setSelected(key);
-    }
-    const resultsNumber = files.reduce((sum, file) => sum + file.items.length, 0);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { styles: {
-            flow: 'column',
-            width: '100%',
-            gap: '1bw',
-            padding: '2x bottom',
-        }, ...otherProps, children: [(0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { color: "#dark.50", padding: "1x 0", children: resultsNumber
-                    ? `${resultsNumber} result${resultsNumber > 1 ? 's' : ''} in ${files.length} file${files.length > 1 ? 's' : ''}`
-                    : 'No results found' }, void 0), files.map((file) => {
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Item, { isSelected: selected === file.key, onPress: () => select(file), indent: file.items.length ? null : 2.25, children: (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: ".5x", css: HOVER_CSS, children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { type: "clear", margin: "-.5x", padding: ".25x", color: {
-                                            '': '#dark.60',
-                                            hovered: '#purple',
-                                        }, onPress: () => toggle(file), label: expanded.includes(file.key) ? 'Collapse' : 'Expand', children: file.items.length ? (expanded.includes(file.key) ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}, void 0))) : null }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", flexGrow: 1, color: selected === file.key ? '#purple' : '#dark.50', children: [expanded.includes(file.key) ? ((0, jsx_runtime_1.jsx)(icons_1.FileOutlined, {}, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.FileOutlined, {}, void 0)), (0, jsx_runtime_1.jsx)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, color: selected === file.key ? '#purple-text' : '#dark.75', children: file.entry ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [file.before || '', (0, jsx_runtime_1.jsx)(Text_1.Text.Selection, { children: file.entry }, void 0), file.after || ''] }, void 0)) : (file.title) }, void 0)] }, void 0)] }, void 0) }, file.key), (expanded.includes(file.key) ? file.items || [] : []).map((item, i) => {
-                            const key = `${file.key}|${i}`;
-                            const isSelected = selected === key;
-                            return ((0, jsx_runtime_1.jsx)(Item, { indent: 3.5, isSelected: isSelected, onPress: () => select(key, [item.row, item.column]), children: (0, jsx_runtime_1.jsx)(Space_1.Space, { gap: "1x", css: HOVER_CSS, color: isSelected ? '#purple' : '#dark.50', children: (0, jsx_runtime_1.jsxs)(Block_1.Block, { style: TEXT_OVERFLOW_STYLES, flexGrow: 1, color: isSelected ? '#purple-text' : '#dark.75', children: [item.before || '', (0, jsx_runtime_1.jsx)(Text_1.Text.Selection, { children: item.entry }, void 0), item.after || ''] }, void 0) }, void 0) }, key));
-                        })] }, file.key));
-            })] }, void 0));
-}
-exports.SearchResults = SearchResults;
-
-        

package/cjs/components/organisms/TopBar/TopBar.js

@@ -1,33 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-00505d5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Base_1 = require("../../Base");
-const CloudLogo_1 = require("../../other/CloudLogo/CloudLogo");
-const Space_1 = require("../../layout/Space");
-const list_1 = require("../../../tasty/styles/list");
-const styles_1 = require("../../../tasty/utils/styles");
-const filterBaseProps_1 = require("../../../tasty/utils/filterBaseProps");
-const DEFAULT_STYLES = {
-    display: 'flex',
-    flow: 'row',
-    gap: '1x',
-    placeContent: 'space-between',
-    placeItems: 'center',
-    padding: '1x 1.5x',
-    fill: '#white',
-};
-function TopBar({ children, onLogoPress, ...props }) {
-    const styles = (0, styles_1.extractStyles)(props, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { role: "banner", styles: styles, ...(0, filterBaseProps_1.filterBaseProps)(props), children: [(0, jsx_runtime_1.jsx)(CloudLogo_1.CloudLogo, { onPress: onLogoPress }, void 0), (0, jsx_runtime_1.jsx)(Space_1.Space, { flexGrow: 1, placeContent: "space-between", children: children }, void 0)] }, void 0));
-}
-exports.TopBar = TopBar;
-
-        

package/cjs/tasty/tasty.js

@@ -1,108 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-00505d5
- * Released under the MIT license.
- */
-
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tasty = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importStar(require("styled-components"));
-const react_1 = require("react");
-const react_is_1 = require("react-is");
-const BreakpointsProvider_1 = require("./providers/BreakpointsProvider");
-const modAttrs_1 = require("./utils/modAttrs");
-const renderStyles_1 = require("./utils/renderStyles");
-const responsive_1 = require("./utils/responsive");
-const list_1 = require("./styles/list");
-const mergeStyles_1 = require("./utils/mergeStyles");
-// Implementation
-function tasty(Component, options) {
-    var _a, _b, _c, _d;
-    if (typeof Component === 'string') {
-        let selector = Component;
-        let styles = options;
-        let Element = (0, styled_components_1.createGlobalStyle) `${(css) => css}`;
-        const _StyleDeclarationComponent = ({ breakpoints, }) => {
-            let contextBreakpoints = (0, react_1.useContext)(BreakpointsProvider_1.BreakpointsContext);
-            breakpoints = breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints;
-            let css = (0, react_1.useMemo)(() => styles
-                ? `\n{}${selector}{${(0, renderStyles_1.renderStyles)(styles, (0, responsive_1.pointsToZones)(breakpoints || contextBreakpoints))}}`
-                : '', [breakpoints.join(',')]);
-            return (0, jsx_runtime_1.jsx)(Element, { css: css }, void 0);
-        };
-        _StyleDeclarationComponent.displayName = `TastyStyleDeclaration(${Component})`;
-        return _StyleDeclarationComponent;
-    }
-    if ((0, react_is_1.isValidElementType)(Component)) {
-        let { as: extendTag, ...defaultProps } = options !== null && options !== void 0 ? options : {};
-        let propsWithStyles = ['styles'].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')));
-        let _WrappedComponent = (0, react_1.forwardRef)((props, ref) => {
-            const { as, ...restProps } = props;
-            const propsWithStylesValues = propsWithStyles.map((prop) => props[prop]);
-            const mergedStylesMap = (0, react_1.useMemo)(() => {
-                return propsWithStylesValues.reduce((map, prop) => {
-                    if (restProps[prop] != null && defaultProps[prop] != null) {
-                        map[prop] = (0, mergeStyles_1.mergeStyles)(restProps[prop], defaultProps[prop]);
-                    }
-                    return map;
-                }, {});
-            }, propsWithStylesValues);
-            return ((0, jsx_runtime_1.jsx)(Component, { ref: ref, ...defaultProps, ...restProps, ...mergedStylesMap, as: as !== null && as !== void 0 ? as : extendTag }, 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', styles: defaultStyles, styleProps, ...defaultProps } = options;
-    let Element = styled_components_1.default[originalAs](({ css }) => css);
-    let _TastyComponent = (0, react_1.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(list_1.BASE_STYLES)
-            : list_1.BASE_STYLES).reduce((map, prop) => {
-            if (prop in otherProps) {
-                map[prop] = otherProps[prop];
-                delete otherProps[prop];
-            }
-            return map;
-        }, {});
-        let allStyles = (0, react_1.useMemo)(() => (0, mergeStyles_1.mergeStyles)(defaultStyles, styles, propStyles), [styles, propStyles]);
-        let contextBreakpoints = (0, react_1.useContext)(BreakpointsProvider_1.BreakpointsContext);
-        breakpoints = breakpoints !== null && breakpoints !== void 0 ? breakpoints : contextBreakpoints;
-        let renderedStyles = (0, react_1.useMemo)(() => allStyles
-            ? (0, renderStyles_1.renderStyles)(allStyles, (0, responsive_1.pointsToZones)(breakpoints))
-            : '', [allStyles, breakpoints]);
-        if (mods) {
-            Object.assign(otherProps, (0, modAttrs_1.modAttrs)(mods));
-        }
-        return ((0, jsx_runtime_1.jsx)(Element, { as: as !== null && as !== void 0 ? as : originalAs, "data-element": element, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...otherProps, ref: ref, css: renderedStyles }, void 0));
-    });
-    _TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
-    return _TastyComponent;
-}
-exports.tasty = tasty;
-
-