@zuzjs/ui 0.3.7 → 0.3.8

package/dist/ui.js

@@ -1,688 +0,0 @@
-import Hashids from 'hashids';
-import { nanoid } from 'nanoid';
-import Cookies from 'js-cookie';
-import axios from 'axios';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import Link from 'next/link';
-import Children from 'react-children-utilities';
-import PropTypes from 'prop-types';
-
-var StyleCache = {};
-
-const cssProps = {
-    "ac": "align-content",
-    "alignContent": "align-content",
-    "aic": "aic",
-    "ais": "ais",
-    "aie": "aie",
-    "nous": "nous",
-    "nope": "nope",
-    "ai": "align-items",
-    "alignItems": "align-items",
-    "ass": "ass",
-    "asc": "asc",
-    "ase": "ase",
-    "alignSelf": "align-self",
-    "all": "all",
-    "animation": "animation",
-    "animationDelay": "animation-delay",
-    "animationDirection": "animation-direction",
-    "animationDuration": "animation-duration",
-    "animationFillMode": "animation-fill-mode",
-    "animationIterationCount": "animation-iteration-count",
-    "animationName": "animation-name",
-    "animationPlayState": "animation-play-state",
-    "animationTimingFunction": "animation-timing-function",
-    "backfaceVisibility": "backface-visibility",
-    "backgroundAttachment": "background-attachment",
-    "backgroundBlendMode": "background-blend-mode",
-    "backgroundClip": "background-clip",
-    "bg": "background",
-    "background": "background",
-    "bgc": "background-color",
-    "bgColor": "background-color",
-    "backgroundColor": "background-color",
-    "backgroundImage": "background-image",
-    "backgroundOrigin": "background-origin",
-    "backgroundPosition": "background-position",
-    "backgroundRepeat": "background-repeat",
-    "backgroundSize": "background-size",
-    "border": "border",
-    "borderBottom": "border-bottom",
-    "borderBottomColor": "border-bottom-color",
-    "borderBottomStyle": "border-bottom-style",
-    "borderBottomWidth": "border-bottom-width",
-    "borderCollapse": "border-collapse",
-    "borderColor": "border-color",
-    "borderImage": "border-image",
-    "borderImageOutset": "border-image-outset",
-    "borderImageRepeat": "border-image-repeat",
-    "borderImageSlice": "border-image-slice",
-    "borderImageSource": "border-image-source",
-    "borderImageWidth": "border-image-width",
-    "borderLeft": "border-left",
-    "borderLeftColor": "border-left-color",
-    "borderLeftStyle": "border-left-style",
-    "borderLeftWidth": "border-left-width",
-    //Radius
-    "r": "border-radius",
-    "br": "border-radius",
-    "borderRadius": "border-radius",
-    "brtl": "border-top-left-radius",
-    "borderTopLeftRadius": "border-top-left-radius",
-    "brtr": "border-top-right-radius",
-    "borderTopRightRadius": "border-top-right-radius",
-    "brbl": "border-bottom-left-radius",
-    "borderBottomLeftRadius": "border-bottom-left-radius",
-    "brbr": "border-bottom-right-radius",
-    "borderBottomRightRadius": "border-bottom-right-radius",
-    "borderRight": "border-right",
-    "borderRightColor": "border-right-color",
-    "borderRightStyle": "border-right-style",
-    "borderRightWidth": "border-right-width",
-    "borderSpacing": "border-spacing",
-    "borderStyle": "border-style",
-    "borderTop": "border-top",
-    "borderTopColor": "border-top-color",
-    "borderTopStyle": "border-top-style",
-    "borderTopWidth": "border-top-width",
-    "borderWidth": "border-width",
-    "bottom": "bottom",
-    "boxDecorationBreak": "box-decoration-break",
-    "boxShadow": "box-shadow",
-    "boxSizing": "box-sizing",
-    "captionSide": "caption-side",
-    "caretColor": "caret-color",
-    "@charset": "@charset",
-    "clear": "clear",
-    "clip": "clip",
-    "clipPath": "clip-path",
-    "color": "color",
-    "columnCount": "column-count",
-    "columnFill": "column-fill",
-    "columnGap": "column-gap",
-    "colGap": "column-gap",
-    "columnRule": "column-rule",
-    "columnRuleColor": "column-rule-color",
-    "columnRuleStyle": "column-rule-style",
-    "columnRuleWidth": "column-rule-width",
-    "columnSpan": "column-span",
-    "columnWidth": "column-width",
-    "colW": "column-width",
-    "columns": "columns",
-    "content": "content",
-    "counterIncrement": "counter-increment",
-    "counterReset": "counter-reset",
-    "cursor": "cursor",
-    "pointer": "pointer",
-    "direction": "direction",
-    "display": "display",
-    "emptyCells": "empty-cells",
-    "filter": "filter",
-    "flex": "flex",
-    "flexBasis": "flex-basis",
-    "dir": "flex-direction",
-    "flexDirection": "flex-direction",
-    "flexFlow": "flex-flow",
-    "flexGrow": "flex-grow",
-    "flexShrink": "flex-shrink",
-    "flexWrap": "flex-wrap",
-    "float": "float",
-    "font": "font",
-    "fontFamily": "font-family",
-    "fontKerning": "font-kerning",
-    "size": "font-size",
-    "fontSize": "font-size",
-    "fontSizeAdjust": "font-size-adjust",
-    "fontStretch": "font-stretch",
-    "fontStyle": "font-style",
-    "fontVariant": "font-variant",
-    "bold": "bold",
-    "b900": "b900",
-    "b800": "b800",
-    "b700": "b700",
-    "fontWeight": "font-weight",
-    "gap": "gap",
-    "grid": "grid",
-    "gridArea": "grid-area",
-    "gridAutoColumns": "grid-auto-columns",
-    "gridAutoFlow": "grid-auto-flow",
-    "gridAutoRows": "grid-auto-rows",
-    "gridColumn": "grid-column",
-    "gridColumnEnd": "grid-column-end",
-    "gridColumnGap": "grid-column-gap",
-    "gridColumnStart": "grid-column-start",
-    "gridGap": "grid-gap",
-    "gridRow": "grid-row",
-    "gridRowEnd": "grid-row-end",
-    "gridRowGap": "grid-row-gap",
-    "gridRowStart": "grid-row-start",
-    "gridTemplate": "grid-template",
-    "gridTemplateAreas": "grid-template-areas",
-    "gridTemplateColumns": "grid-template-columns",
-    "gridTemplateRows": "grid-template-rows",
-    "hangingPunctuation": "hanging-punctuation",
-    "hyphens": "hyphens",
-    "isolation": "isolation",
-    "jcc": "jcc",
-    "jcs": "jcs",
-    "jce": "jce",
-    "jc": "justify-content",
-    "justifyContent": "justify-content",
-    "left": "left",
-    "letterSpacing": "letter-spacing",
-    "lineHeight": "line-height",
-    "listStyle": "list-style",
-    "listStyleImage": "list-style-image",
-    "listStylePosition": "list-style-position",
-    "listStyleType": "list-style-type",
-    "aspectRatio": "aspect-ratio",
-    //Margin
-    "m": "margin",
-    "margin": "margin",
-    "mb": "margin-bottom",
-    "marginBottom": "margin-bottom",
-    "ml": "margin-left",
-    "marginLeft": "margin-left",
-    "mr": "margin-right",
-    "marginRight": "margin-right",
-    "mt": "margin-top",
-    "marginTop": "margin-top",
-    //Height
-    "h": "height",
-    "height": "height",
-    "minH": "min-height",
-    "minHeight": "min-height",
-    "maxH": "max-height",
-    "maxHeight": "max-height",
-    //Width
-    "w": "width",
-    "width": "width",
-    "minW": "min-width",
-    "minWidth": "min-width",
-    "maxW": "max-width",
-    "maxWidth": "max-width",
-    "mixBlendMode": "mix-blend-mode",
-    "objectFit": "object-fit",
-    "objectPosition": "object-position",
-    "opacity": "opacity",
-    "order": "order",
-    "outline": "outline",
-    "outlineColor": "outline-color",
-    "outlineOffset": "outline-offset",
-    "outlineStyle": "outline-style",
-    "outlineWidth": "outline-width",
-    "overflow": "overflow",
-    "overflowX": "overflow-x",
-    "overflowY": "overflow-y",
-    "p": "padding",
-    "padding": "padding",
-    "pb": "padding-bottom",
-    "paddingBottom": "padding-bottom",
-    "pl": "padding-left",
-    "paddingLeft": "padding-left",
-    "pr": "padding-right",
-    "paddingRight": "padding-right",
-    "pt": "padding-top",
-    "paddingTop": "padding-top",
-    "pageBreakAfter": "page-break-after",
-    "pageBreakBefore": "page-break-before",
-    "pageBreakInside": "page-break-inside",
-    "perspective": "perspective",
-    "perspectiveOrigin": "perspective-origin",
-    "pointerEvents": "pointer-events",
-    "rel": "rel",
-    "abs": "abs",
-    "fixed": "fixed",
-    "sticky": "sticky",
-    "pos": "position",
-    "position": "position",
-    "quotes": "quotes",
-    "resize": "resize",
-    "right": "right",
-    "scrollBehavior": "scroll-behavior",
-    "tabSize": "tab-size",
-    "tableLayout": "table-layout",
-    "align": "text-align",
-    "textAlign": "text-align",
-    "textAlignLast": "text-align-last",
-    "tdh": "tdh", //text-decoration: underline on hover
-    "td": "text-decoration",
-    "textDecoration": "text-decoration",
-    "textDecorationColor": "text-decoration-color",
-    "textDecorationLine": "text-decoration-line",
-    "textDecorationStyle": "text-decoration-style",
-    "textIndent": "text-indent",
-    "textJustify": "text-justify",
-    "textOverflow": "text-overflow",
-    "textShadow": "text-shadow",
-    "textTransform": "text-transform",
-    "top": "top",
-    "transform": "transform",
-    "transform(2D)": "transform(2D)",
-    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
-    "transformStyle": "transform-style",
-    "transition": "transition",
-    "transitionDelay": "transition-delay",
-    "transitionDuration": "transition-duration",
-    "transitionProperty": "transition-property",
-    "transitionTimingFunction": "transition-timing-function",
-    "unicodeBidi": "unicode-bidi",
-    "userSelect": "user-select",
-    "verticalAlign": "vertical-align",
-    "visibility": "visibility",
-    "weight": "flex",
-    "whiteSpace": "white-space",
-    "ws": "white-space",
-    "wordBreak": "word-break",
-    "wordSpacing": "word-spacing",
-    "wrap": "wrap",
-    "textWrap": "textWrap",
-    "wordWrap": "word-wrap",
-    "writingMode": "writing-mode",
-    "zIndex": "z-index",
-    "backdropFilter": "backdrop-filter",
-    "bgFilter": "backdrop-filter",
-    //Custom
-    "anim": "anim",
-    "fill": "fill",
-    "abc": "abc",
-    "fb": "fb",
-    "ph": "ph",
-    "pv": "pv",
-    "mv": "mv",
-    "mh": "mh"
-};
-const cssPropsVals = {
-    //Colors
-    "primary": 'var(--primary-color)',
-    "c": "center",
-    //Flex Directions
-    "cols": "column",
-    "colsr": "column-reverse",
-    "rows": "row",
-    "rowsr": "row-reverse",
-    //Positions
-    "rel": "relative",
-    "abs": "absolute",
-};
-const cssPropsDirect = {
-    'rel': 'position: relative;',
-    'fixed': 'position: fixed;',
-    'abs': 'position: absolute;',
-    'sticky': 'position: sticky;',
-    'flex': 'display: flex;',
-    'fwrap': 'flex-wrap: wrap;',
-    'aic': 'align-items: center;',
-    'ais': 'align-items: flex-start;',
-    'aie': 'align-items: flex-end;',
-    'ass': 'align-self: flex-start;',
-    'asc': 'align-self: center;',
-    'ase': 'align-self: flex-end;',
-    'jcc': 'justify-content: center;',
-    'jcs': 'justify-content: flex-start;',
-    'jce': 'justify-content: flex-end;',
-    'grid': 'display: grid;',
-    'fill': 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
-    'abc': 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
-    'block': 'display: block;',
-    'bold': "font-weight: bold;",
-    'b900': "font-weight: 900;",
-    'b800': "font-weight: 800;",
-    'b700': "font-weight: 700;",
-    'wrap': "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'textWrap': "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'pointer': "cursor: pointer;",
-    'fb': 'font-family: var(--primary-font-bold);',
-    'ph': 'padding-left: __VALUE__;padding-right: __VALUE__;',
-    'pv': 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
-    'mv': 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
-    'mh': 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim': 'transition:all __VALUE__s linear 0s;',
-    'nous': 'user-select: none;',
-    'nope': 'pointer-events: none;',
-    'tdn': 'text-decoration: none;',
-    'aspectRatio': 'aspect-ratio: __VALUE__;'
-};
-const cssPropsIgnore = [
-    'weight', `opacity`
-];
-const _cssColors = [`white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`];
-const _cssColorsRange = [`50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`];
-let cssColors = [];
-if (cssColors.length == 0) {
-    _cssColors.map(c => {
-        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
-    });
-}
-
-const _Hashids = new Hashids('', 4);
-const _Alphabets = "#abcdefghijklmnopqrstuvwxyz0123456789";
-const setCookie = (key, value, expiry, host) => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host });
-const getCookie = (key) => key == `` ? Cookies.get() : Cookies.get(key) || null;
-const removeCookie = (key) => Cookies.remove(key);
-const uuid = (len = 11) => nanoid(len);
-const makeCSSValue = (k, v, o) => {
-    let ignore = cssPropsIgnore.indexOf(o) == -1;
-    if (k in cssPropsDirect && ignore == true) {
-        return cssPropsDirect[k].indexOf(`__VALUE__`) > -1 ?
-            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`)
-            : cssPropsDirect[k];
-    }
-    let unit = "number" == typeof v && ignore ? `px` : ``;
-    if (cssColors.indexOf(v) > -1) {
-        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
-        unit = ``;
-    }
-    else if (v in cssPropsVals) {
-        v = cssPropsVals[v];
-    }
-    return `${k}:${v}${unit};`;
-};
-const cleanProps = (props, del = true) => {
-    const ignore = [`as`, `hover`, `bref`, `tag`, `onSubmit`, `method`, `should`, `options`, `required`];
-    let items = Object.assign({}, props);
-    Object.keys(props).map(k => {
-        if (k in cssProps || ignore.indexOf(k) > -1) {
-            if (del)
-                delete items[k];
-            else
-                items[k] = undefined;
-        }
-    });
-    return items;
-};
-const buildCSS = (k, v) => {
-    if (k in cssProps) {
-        return makeCSSValue(cssProps[k], v, k);
-    }
-    return ``;
-};
-const _withStyle = (props, pseudo = ``) => {
-    if (!props)
-        return ``;
-    let cx = [props.className || props.as || ``];
-    Object.keys(props).map(k => {
-        if (k != 'children' && k in cssProps) {
-            const _css = buildCSS(k, props[k]).toString().replace(/;|:|\s/g, "");
-            let _indices = 0;
-            for (let i = 0; i < _css.length; i++) {
-                _indices += _Alphabets.indexOf(_css.charAt(i));
-            }
-            let _cp = k.substring(0, 1);
-            if (cssProps[k].indexOf("-") > -1) {
-                _cp = "";
-                cssProps[k].split("-").map(c => _cp += c.substring(0, 1));
-            }
-            if (props[k].toString().indexOf("-") > -1) {
-                props[k].toString().split("-").map(c => _cp += c.substring(0, 1));
-            }
-            const _id = `${_cp}${_Hashids.encode(cssProps[k].length + _indices + (isNaN(parseInt(props[k])) ? 0 : parseInt(props[k])))}`.replace(/\s/g, '-');
-            // const _id = `${_cp}${cssProps[k]}-${props[k]}`   
-            cx.push(_id);
-            StyleCache[_id + pseudo] = buildCSS(k, props[k]);
-        }
-    });
-    return cx.join(" ").trim();
-};
-const withStyle = (props) => {
-    const style = [_withStyle(props)];
-    if ("hover" in props) {
-        style.push(_withStyle(props.hover, `:hover`));
-    }
-    if ("before" in props) {
-        style.push(_withStyle(props.hover, `:before`));
-    }
-    if ("after" in props) {
-        style.push(_withStyle(props.hover, `:after`));
-    }
-    return style.join(style.length > 1 ? " " : "");
-};
-const getStylesheet = () => Object.keys(StyleCache).map(ck => StyleCache[ck] != "" ? `.${ck}{${StyleCache[ck]}}` : `__`).filter(x => x != `__`);
-const isEmail = (e) => {
-    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
-    return reg.test(e);
-};
-const buildFormData = form => {
-    if (!form || form.nodeName !== "FORM") {
-        return;
-    }
-    var i, j, q = [];
-    for (i = form.elements.length - 1; i >= 0; i = i - 1) {
-        if (form.elements[i].name === "") {
-            continue;
-        }
-        switch (form.elements[i].nodeName) {
-            case 'INPUT':
-                switch (form.elements[i].type) {
-                    case 'text':
-                    case 'hidden':
-                    case 'password':
-                    case 'button':
-                    case 'reset':
-                    case 'submit':
-                        q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].value) });
-                        break;
-                    case 'checkbox':
-                    case 'radio':
-                        if (form.elements[i].checked) {
-                            q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].value) });
-                        }
-                        break;
-                }
-                break;
-            case 'TEXTAREA':
-                q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].value) });
-                break;
-            case 'SELECT':
-                switch (form.elements[i].type) {
-                    case 'select-one':
-                        q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].value) });
-                        break;
-                    case 'select-multiple':
-                        for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
-                            if (form.elements[i].options[j].selected) {
-                                q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].options[j].value) });
-                            }
-                        }
-                        break;
-                }
-                break;
-            case 'BUTTON':
-                switch (form.elements[i].type) {
-                    case 'reset':
-                    case 'submit':
-                    case 'button':
-                        q.push({ [form.elements[i].name]: encodeURIComponent(form.elements[i].value) });
-                        break;
-                }
-                break;
-        }
-    }
-    return q; //return q.join("&");
-};
-const withRest = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${uuid(8)}^${uuid(8)}`;
-    var isWindow = typeof window !== 'undefined';
-    var cancelToken = null;
-    if (isWindow) {
-        window['__grabToken'] = axios.CancelToken.source();
-        cancelToken = window['__grabToken'].token;
-    }
-    if (fd) {
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: cancelToken,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress                    
-                }
-            })
-                .then(resp => {
-                if (resp.data && "kind" in resp.data) {
-                    resolve(resp.data);
-                }
-                else {
-                    reject(resp.data);
-                }
-            })
-                .catch(err => reject(err));
-        });
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(uri, Object.assign(Object.assign(Object.assign({}, Cookies.get()), data), { __poken: new Date().getTime() / 1000 }), {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${Bearer}`
-            },
-            cancelToken: cancelToken
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => reject(err));
-    });
-};
-const formatBytes = bytes => {
-    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    if (bytes == 0)
-        return '0 Byte';
-    var i = Math.floor(Math.log(bytes) / Math.log(1024)), nx = bytes / Math.pow(1024, i);
-    return nx.toFixed(2) + ' ' + sizes[i];
-};
-const formatSeconds = (n) => {
-    let d = new Date(n * 1000).toISOString().slice(11, 19);
-    return d.indexOf("00:") > -1 ? d.replace("00:", "") : d;
-};
-const formatTime = time => {
-    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
-    if (time.length > 1) { // If time format correct
-        time = time.slice(1); // Remove full string match value
-        time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
-        time[0] = +time[0] % 12 || 12;
-    }
-    return time.join('');
-};
-
-const Stylesheet = (props) => jsx("style", { className: props.id || undefined, children: getStylesheet().join("") });
-
-const Box = forwardRef((props, ref) => {
-    const _styles = withStyle(props);
-    return jsx("div", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
-const Heading = forwardRef((props, ref) => {
-    const _styles = withStyle(props);
-    const Tag = `h${props.h || 1}`;
-    const HeadingTag = Tag;
-    return jsx(HeadingTag, Object.assign({ className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
-const Icon = forwardRef((props, ref) => {
-    const _styles = withStyle(Object.assign(Object.assign({}, props), { as: `icon-${props.as}`, size: props.size || 16 }));
-    return jsx("span", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
-function Crumb({ items, size }) {
-    const list = [];
-    {
-        items.map((n, i) => {
-            const h = jsx(Heading, { flex: true, size: size || 24, children: n.label }, `hc-${i}-${n.label.replace(/\s/g, '-')}`);
-            list.push(n.href ? jsx(Link, { href: n.href, className: `tdn tdnh`, children: h }, `crumb-${i}-${n.label.replace(/\s/g, '-')}`) : h);
-            if (i < items.length - 1)
-                list.push(jsx(Icon, { as: `chevron_right`, size: size || 24 }, `chev-${i}-${n.label.replace(/\s/g, '-')}`));
-        });
-    }
-    return (jsx(Box, { flex: true, aic: true, gap: 15, children: list }));
-}
-
-const Input = forwardRef((props, ref) => {
-    let Tag = props.tag || 'input';
-    const El = Tag;
-    const _styles = withStyle(props);
-    return jsx(El, Object.assign({ className: _styles, onChange: e => { props.onChange && props.onChange(e); } }, cleanProps(props)));
-});
-
-const Button = forwardRef((props, ref) => {
-    const _styles = withStyle(props);
-    return jsx("button", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
-const Form = (props) => {
-    const _props = Object.assign({}, props);
-    delete _props['children'];
-    const formName = `form-${props.name}`;
-    const fields = [];
-    const validateForm = () => {
-        const _data = buildFormData(document.querySelector(`form[name="${formName}"]`));
-        const data = [];
-        _data.map(f => {
-            const id = Object.keys(f)[0];
-            const field = fields.find(x => x.name == id);
-            if (field) {
-                const value = decodeURIComponent(f[id]);
-                let valid = 'should' in field ? field.value != "" : true;
-                if ('should' in field) {
-                    switch (field.should) {
-                        case "email":
-                            valid = isEmail(value);
-                            break;
-                    }
-                }
-                data.push({ name: field.name, value: value, valid: valid });
-            }
-        });
-        if (props.onSubmit) {
-            props.onSubmit({ validation: !data.find(x => x.valid == false), data: data });
-        }
-    };
-    Children.deepMap(props.children, c => {
-        if (c['props'].name && !fields.find(x => x.name == c['props'].name)) {
-            let xyz = { name: c['props'].name, touched: false };
-            if ('should' in c['props']) {
-                xyz['should'] = c['props'].should;
-            }
-            fields.push(xyz);
-        }
-        return null;
-    });
-    return jsx("form", { name: formName, method: props.method || undefined, onSubmit: e => {
-            e.preventDefault();
-            e.stopPropagation();
-            validateForm();
-        }, children: jsx(Box, Object.assign({}, _props, { children: props.children })) });
-};
-
-const Spinner = (props) => {
-    const { size, w, h, color, radius, anim } = props;
-    return jsx(Box, { w: size || 50, rel: true, zIndex: `1`, userSelect: `none`, h: size || 50, as: `zuz-spinner`, anim: (anim || 2).toString(), flex: true, aic: true, jcc: true, children: jsx(Box, { as: `zuz-loader`, r: radius || 4, w: w || 30, h: h || 6, bg: color || `#111` }) });
-};
-Spinner.propTypes = {
-    size: PropTypes.number,
-    w: PropTypes.number,
-    h: PropTypes.number,
-    radius: PropTypes.number,
-    color: PropTypes.string,
-    anim: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-const Select = forwardRef((props, ref) => {
-    const _styles = withStyle(props);
-    return jsx("select", Object.assign({ className: _styles }, cleanProps(props), { onChange: e => { props.onChange && props.onChange(e); }, children: props.options && props.options.map(o => jsx("option", { value: o.value, children: o.label }, `${props.id || props.as || props.name}-option-${o.value}`)) }));
-});
-
-export { Box, Button, Crumb, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, formatTime, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };