@zuzjs/ui 0.3.2 → 0.3.4

package/dist/ui.js

@@ -0,0 +1,665 @@
+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 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])))}`;
+            // 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 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 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 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 }));
+});
+
+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, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };