@zuzjs/ui 0.3.2 → 0.3.4

package/dist/index.js

@@ -1,1868 +0,0 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement, Component as Component$1, Children as Children$1 } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import PropTypes from 'prop-types';
-import Children from 'react-children-utilities';
-import Cookies from 'js-cookie';
-import axios from 'axios';
-import { nanoid } from 'nanoid';
-import { ClassNames } from '@emotion/react';
-import ReactDOM from 'react-dom/client';
-export { Link } from 'react-router-dom';
-import styled from '@emotion/styled';
-
-const AppContext = createContext({});
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-var _AppTheme_mode, _AppTheme_listen, _AppTheme_lightTheme, _AppTheme_darkTheme;
-class AppTheme {
-    constructor(_conf) {
-        _AppTheme_mode.set(this, void 0);
-        _AppTheme_listen.set(this, void 0);
-        _AppTheme_lightTheme.set(this, void 0);
-        _AppTheme_darkTheme.set(this, void 0);
-        this.get = () => {
-            let self = this;
-            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                    __classPrivateFieldSet(self, _AppTheme_mode, event.matches ? "dark" : "light", "f");
-                    __classPrivateFieldGet(self, _AppTheme_listen, "f").call(self, __classPrivateFieldGet(self, _AppTheme_mode, "f"));
-                });
-                return window.matchMedia &&
-                    window.matchMedia('(prefers-color-scheme: dark)').matches ?
-                    __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
-            }
-            else {
-                if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
-                    return __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
-                }
-                else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "dark") {
-                    return __classPrivateFieldGet(self, _AppTheme_darkTheme, "f");
-                }
-            }
-        };
-        const conf = _conf || {};
-        __classPrivateFieldSet(this, _AppTheme_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); }, "f");
-        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || conf.theme.mode || "auto", "f");
-        __classPrivateFieldSet(this, _AppTheme_lightTheme, Object.assign({ 
-            //CORE
-            tag: "light", dark: false, primary: '#edeef5', secondary: '#f9f9f9', textColor: '#111111' }, ("theme" in conf && "light" in conf.theme ? Object.assign({}, conf.theme.light) : {})), "f");
-        __classPrivateFieldSet(this, _AppTheme_darkTheme, Object.assign({ 
-            //CORE
-            tag: "dark", dark: true, primary: '#21222d', secondary: '#282a37', textColor: '#f9f9f9' }, ("theme" in conf && "dark" in conf.theme ? Object.assign({}, conf.theme.dark) : {})), "f");
-    }
-}
-_AppTheme_mode = new WeakMap(), _AppTheme_listen = new WeakMap(), _AppTheme_lightTheme = new WeakMap(), _AppTheme_darkTheme = new WeakMap();
-
-var _AppLang_mode, _AppLang_listen, _AppLang_lang;
-class AppLang {
-    constructor(_conf) {
-        _AppLang_mode.set(this, void 0);
-        _AppLang_listen.set(this, void 0);
-        _AppLang_lang.set(this, void 0);
-        this.get = () => {
-            let self = this;
-            return __classPrivateFieldGet(self, _AppLang_lang, "f");
-        };
-        const conf = _conf || {};
-        __classPrivateFieldSet(this, _AppLang_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Lang switched to ${mod}`); }, "f");
-        __classPrivateFieldSet(this, _AppLang_mode, conf.mode || "en", "f");
-        __classPrivateFieldSet(this, _AppLang_lang, Object.assign({ 
-            //CORE
-            tag: "en" }, ("lang" in conf ? Object.assign({}, conf.lang) : {})), "f");
-    }
-}
-_AppLang_mode = new WeakMap(), _AppLang_listen = new WeakMap(), _AppLang_lang = new WeakMap();
-
-let isMounted = true;
-const STORE_KEY = `__zuzjs`;
-const STORE_FORM_KEY = `${STORE_KEY}forms`;
-const defaultState = {
-    [`${STORE_KEY}base`]: {
-        debug: true,
-        loading: false,
-        _tmp: Math.random()
-    },
-    [STORE_FORM_KEY]: {
-        forms: {}
-    }
-};
-const rootReducer = (state, action) => (Object.assign(Object.assign({}, state), action.payload));
-const AppProvider = ({ children, initialState = {}, theme = {}, lang = {} }) => {
-    useEffect(() => {
-        isMounted = true;
-        return () => {
-            isMounted = false;
-        };
-    }, []);
-    const rootState = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultState), initialState), { theme: new AppTheme({ theme }).get(), lang: new AppLang({ lang }).get() })), [initialState]);
-    const [state, _dispatch] = useReducer(rootReducer, rootState);
-    const dispatch = useCallback((args) => {
-        if (isMounted) {
-            _dispatch(Object.assign({}, args));
-        }
-    }, [_dispatch]);
-    // const dispatch = useCallback((payload = {}, _key = 'base') => {
-    //     if(isMounted){
-    //         const key = STORE_DEFAUTLS.indexOf(`${STORE_KEY}${_key}`) > -1 ? `${STORE_KEY}${_key}` : _key;
-    //         const _state = { ...state[key] }
-    //         console.log('key', key)
-    //         console.log('state', _state)
-    //         _dispatch({ 
-    //             type: 'any',
-    //             payload: {
-    //                 payload 
-    //             }
-    //         })
-    //     }
-    // }, [_dispatch]);
-    const providedValue = useMemo(() => (Object.assign(Object.assign({}, state), { dispatch })), [state]);
-    return jsx(AppContext.Provider, Object.assign({ value: providedValue }, { children: children }));
-};
-AppProvider.defaultProps = {
-    theme: {},
-    lang: {},
-    initialState: {},
-};
-AppProvider.propTypes = {
-    children: PropTypes.node.isRequired,
-    initialState: PropTypes.instanceOf(Object),
-    theme: PropTypes.instanceOf(Object),
-    lang: PropTypes.instanceOf(Object)
-};
-
-const createSlice = ({ name, initialState, reducers }) => {
-    // const _dynamiceReducers = {}
-    // Object.keys(reducers).map(k => {
-    //     _dynamiceReducers[reducers[k].name] = [reducers[k].reducer, initialState]
-    // })
-    // const _keys = Object.keys(reducers);
-    // const [reducer, state] = combineReducers(_dynamiceReducers);
-    return {
-        name,
-        reducer: reducers,
-        actions: reducers,
-        state: initialState
-    };
-};
-createSlice.defaultProps = {
-    name: `app`,
-    initialState: {},
-    reducers: {}
-};
-createSlice.propTypes = {
-    name: PropTypes.string.isRequired,
-    initialState: PropTypes.instanceOf(Object).isRequired,
-    reducers: PropTypes.instanceOf(Object).isRequired
-};
-
-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",
-    "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",
-    //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",
-    "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;",
-    '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;',
-};
-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 useDispatch = (key) => {
-    const state = useContext(AppContext);
-    const dispatch = state['dispatch'];
-    const prepareState = (prevState, nextState) => {
-        const nextKeys = Object.keys(nextState);
-        nextKeys.map(k => {
-            if (prevState[k] !== nextState[k]) {
-                prevState[k] = nextState[k];
-            }
-        });
-        return Object.assign(Object.assign({}, prevState), nextState);
-    };
-    if (key) {
-        return (payload = {}) => {
-            dispatch({
-                action: key,
-                payload: {
-                    [key]: prepareState(state[key], payload)
-                }
-            });
-        };
-    }
-    return dispatch;
-};
-
-const useStore = (callback, withFilter = true) => {
-    // if(withInititalState){
-    //     return useContext(AppContext)    
-    // }
-    let _state = useContext(AppContext);
-    let state = withFilter ? {} : _state;
-    if (withFilter) {
-        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`, `${STORE_KEY}forms`];
-        Object.keys(_state).map(k => {
-            if (filters.indexOf(k) == -1) {
-                state[k] = _state[k];
-            }
-        });
-    }
-    if ("function" == typeof callback) {
-        return callback(state);
-    }
-    return state;
-};
-
-const ADD_FORM = (name, fields, forms) => ({
-    forms: Object.assign(Object.assign({}, forms), { [name]: Object.assign({ touched: false, loading: false }, fields) })
-});
-const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
-    if (forms[formName]) {
-        let _forms = Object.assign({}, forms);
-        _forms[formName][field] = value;
-        return {
-            forms: _forms
-        };
-    }
-    return {};
-};
-
-!!document.documentElement.currentStyle;
-const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, onKeyUp, onClick, onBlur, onFocus, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref, autoComplete, elastic, minRows, maxRows } = props;
-    const dispatch = useDispatch(STORE_FORM_KEY);
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    let Tag = tag || 'input';
-    const El = Tag;
-    const _ref = fref || useRef();
-    const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
-    props.value !== undefined;
-    useRef();
-    useEffect(() => { }, []);
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, Object.assign({}, cleanProps(props), { type: type || `text`, placeholder: placeholder || undefined, autoComplete: autoComplete || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
-                let k = e['keyCode'] || ['which'];
-                if (form && onSubmit && El != 'textarea' && k == 13) {
-                    onSubmit(forms[form]);
-                }
-                else {
-                    if (onKeyUp)
-                        onKeyUp(e);
-                }
-            }, onChange: e => {
-                let val = type == 'file' ?
-                    e.currentTarget.files
-                    : e.currentTarget.value;
-                if (form)
-                    dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
-                // if(El == `textarea` && elastic) handleElastic()
-                onChange && onChange(val == "" ? null : val);
-            }, onClick: onClick ? onClick : () => { }, readOnly: readOnly || false, onBlur: e => {
-                if (onBlur)
-                    onBlur(e);
-            }, onFocus: e => {
-                if (touched == false)
-                    dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms));
-                if (onFocus)
-                    onFocus(e);
-            } })) }));
-});
-
-const Select = forwardRef((props, ref) => {
-    const { as, onChange, name, form, touched, options, defaultValue } = props;
-    const _ref = useRef();
-    const dispatch = useDispatch(STORE_FORM_KEY);
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
-    useEffect(() => {
-        var _a;
-        dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, defaultValue && defaultValue != null && defaultValue != "" && defaultValue != undefined ? defaultValue : ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.value) || '-1', forms)));
-    }, []);
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", Object.assign({ onChange: e => {
-                let val = e.currentTarget.value;
-                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val, forms)));
-                onChange && onChange(val);
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)), onBlur: e => {
-            }, name: name || nanoid(), className: `${as ? as : ``} ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`, ref: _ref }, { children: options === null || options === void 0 ? void 0 : options.map(o => jsx("option", Object.assign({ value: o.value }, { children: o.label }), `select-${name}-option-${o.value}`)) })) }));
-});
-
-const useTheme = (mod = 'auto') => {
-    const state = useContext(AppContext);
-    return state['theme'] || {};
-};
-
-const removeBlankArrayElements = (a) => a.filter((x) => x);
-const stringToArray = (x) => (Array.isArray(x) ? x : [x]);
-const cache = {};
-// sequential map.find for promises
-const promiseFind = (arr, promiseFactory) => {
-    let done = false;
-    return new Promise((resolve, reject) => {
-        const queueNext = (src) => {
-            return promiseFactory(src).then(() => {
-                done = true;
-                resolve(src);
-            });
-        };
-        arr
-            .reduce((p, src) => {
-            // ensure we aren't done before enqueuing the next source
-            return p.catch(() => {
-                if (!done)
-                    return queueNext(src);
-            });
-        }, queueNext(arr.shift()))
-            .catch(reject);
-    });
-};
-const useImage = ({ srcList, imgPromise = imgPromiseFactory({ decode: true }), useSuspense = true, }) => {
-    const [, setIsSettled] = useState(false);
-    const sourceList = removeBlankArrayElements(stringToArray(srcList));
-    const sourceKey = sourceList.join('');
-    if (!cache[sourceKey]) {
-        // create promise to loop through sources and try to load one
-        cache[sourceKey] = {
-            promise: promiseFind(sourceList, imgPromise),
-            cache: 'pending',
-            error: null,
-        };
-    }
-    // when promise resolves/reject, update cache & state
-    if (cache[sourceKey].cache === 'resolved') {
-        return { src: cache[sourceKey].src, isLoading: false, error: null };
-    }
-    if (cache[sourceKey].cache === 'rejected') {
-        if (useSuspense)
-            throw cache[sourceKey].error;
-        return { isLoading: false, error: cache[sourceKey].error, src: undefined };
-    }
-    cache[sourceKey].promise
-        // if a source was found, update cache
-        // when not using suspense, update state to force a rerender
-        .then((src) => {
-        cache[sourceKey] = Object.assign(Object.assign({}, cache[sourceKey]), { cache: 'resolved', src });
-        if (!useSuspense)
-            setIsSettled(sourceKey);
-    })
-        // if no source was found, or if another error occurred, update cache
-        // when not using suspense, update state to force a rerender
-        .catch((error) => {
-        cache[sourceKey] = Object.assign(Object.assign({}, cache[sourceKey]), { cache: 'rejected', error });
-        if (!useSuspense)
-            setIsSettled(sourceKey);
-    });
-    // cache[sourceKey].cache === 'pending')
-    if (useSuspense)
-        throw cache[sourceKey].promise;
-    return { isLoading: true, src: undefined, error: null };
-};
-
-/** External Dependencies */
-const useResizeObserver = (onResized) => {
-    const onResize = onResized ? onResized : () => { };
-    const onResizeCallback = useRef(onResize);
-    const resizeObserver = useRef();
-    const observerCallback = useCallback((entries) => {
-        entries.forEach((entry) => {
-            if (entry.contentRect) {
-                const { width, height } = entry.contentRect;
-                onResizeCallback.current({
-                    entry,
-                    width,
-                    height,
-                });
-            }
-        });
-    }, []);
-    const updateOnResizeCallback = useCallback((newOnResizeCallback) => {
-        onResizeCallback.current = newOnResizeCallback;
-    }, []);
-    const initObserver = useCallback(() => {
-        if (!resizeObserver.current) {
-            resizeObserver.current = new ResizeObserver(observerCallback);
-        }
-    }, []);
-    const observeElement = useCallback((element, newOnResizeCallback) => {
-        if (element) {
-            if (!resizeObserver.current) {
-                initObserver();
-            }
-            resizeObserver.current.observe(element);
-            if (newOnResizeCallback) {
-                onResizeCallback.current = newOnResizeCallback;
-            }
-        }
-    }, []);
-    const unobserveElement = useCallback((element, newOnResizeCallback) => {
-        if (resizeObserver.current && element) {
-            resizeObserver.current.unobserve(element);
-            if (newOnResizeCallback) {
-                onResizeCallback.current = newOnResizeCallback;
-            }
-        }
-    }, []);
-    const removeObserver = useCallback(() => {
-        if (resizeObserver.current) {
-            resizeObserver.current.disconnect();
-        }
-    }, []);
-    useEffect(() => {
-        initObserver();
-        return removeObserver;
-    }, []);
-    return useMemo(() => [observeElement, unobserveElement, updateOnResizeCallback], []);
-};
-
-const useChooseEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
-
-const EMPTY_BREAKPOINT = {
-    breakpoint: undefined,
-    minWidth: undefined,
-    maxWidth: undefined,
-};
-const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
-    const buildQueries = (breakpoints) => {
-        const sorted = Object.keys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
-        return sorted.map((breakpoint, index) => {
-            let query = '';
-            const minWidth = breakpoints[breakpoint];
-            const nextBreakpoint = sorted[index - 1];
-            const maxWidth = nextBreakpoint ? breakpoints[nextBreakpoint] : null;
-            if (minWidth >= 0) {
-                query = `(min-width: ${minWidth}px)`;
-            }
-            if (maxWidth !== null) {
-                if (query) {
-                    query += ' and ';
-                }
-                query += `(max-width: ${maxWidth - 1}px)`;
-            }
-            const mediaQuery = {
-                breakpoint,
-                maxWidth: maxWidth ? maxWidth - 1 : null,
-                minWidth,
-                query,
-            };
-            return mediaQuery;
-        });
-    };
-    /** Memoize list of calculated media queries from config */
-    const mediaQueries = useMemo(() => buildQueries(config), [config]);
-    /** Get initial breakpoint value */
-    const [currentBreakpoint, setCurrentBreakpoint] = useState(() => {
-        /** Loop through all media queries */
-        for (let _a of mediaQueries) {
-            const { query } = _a, breakpoint = __rest(_a, ["query"]);
-            /**
-             * If we're in the browser and there's no default value,
-             * try to match actual breakpoint. If the default value
-             * should not be hydrated, use the actual breakpoint.
-             */
-            if (typeof window !== 'undefined' &&
-                !(defaultBreakpoint && hydrateInitial)) {
-                const mediaQuery = window.matchMedia(query);
-                if (mediaQuery.matches) {
-                    return breakpoint;
-                }
-            }
-            else if (breakpoint.breakpoint === defaultBreakpoint) {
-                /** Otherwise, try to match default value */
-                return breakpoint;
-            }
-        }
-        return EMPTY_BREAKPOINT;
-    });
-    /** If there's a match, update the current breakpoint */
-    const updateBreakpoint = useCallback(({ matches }, breakpoint) => {
-        if (matches) {
-            setCurrentBreakpoint(breakpoint);
-        }
-    }, []);
-    /** On changes to mediaQueries, subscribe to changes using window.matchMedia */
-    useChooseEffect(() => {
-        const unsubscribers = mediaQueries.map((_a) => {
-            var { query } = _a, breakpoint = __rest(_a, ["query"]);
-            const list = window.matchMedia(query);
-            updateBreakpoint(list, breakpoint);
-            const handleChange = (event) => {
-                updateBreakpoint(event, breakpoint);
-            };
-            const supportsNewEventListeners = 'addEventListener' in list && 'removeEventListener' in list;
-            if (supportsNewEventListeners) {
-                list.addEventListener('change', handleChange);
-            }
-            else {
-                list.addListener(handleChange);
-            }
-            /** Map the unsubscribers array to a list of unsubscriber methods */
-            return () => {
-                if (supportsNewEventListeners) {
-                    list.removeEventListener('change', handleChange);
-                }
-                else {
-                    list.removeListener(handleChange);
-                }
-            };
-        });
-        /** Return a function that when called, will call all unsubscribers */
-        return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
-    }, [mediaQueries, updateBreakpoint]);
-    /** Print a nice debug value for React Devtools */
-    useDebugValue(currentBreakpoint, (c) => typeof c.breakpoint === 'string'
-        ? `${c.breakpoint} (${c.minWidth} ≤ x${c.maxWidth ? ` < ${c.maxWidth + 1}` : ''})`
-        : '');
-    return currentBreakpoint;
-};
-
-var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft, _Toaster_root;
-class Toaster {
-    constructor(config) {
-        _Toaster_container.set(this, void 0);
-        _Toaster_startTop.set(this, void 0);
-        _Toaster_tout.set(this, void 0);
-        _Toaster_defaultTimeLeft.set(this, void 0);
-        _Toaster_root.set(this, void 0);
-        this.show = (message, duration) => {
-            let self = this;
-            self.toast({
-                message: message,
-                duration: duration
-            });
-        };
-        __classPrivateFieldSet(this, _Toaster_startTop, 20, "f");
-        __classPrivateFieldSet(this, _Toaster_defaultTimeLeft, 4, "f");
-        const rootID = (config === null || config === void 0 ? void 0 : config.root) || `toast-container`;
-        __classPrivateFieldSet(this, _Toaster_root, rootID, "f");
-        if (window.document.querySelector(`#${rootID}`))
-            return;
-        var root = window.document.createElement('div');
-        root.id = rootID;
-        window.document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${rootID}`), "f");
-    }
-    dismiss(ID) {
-        let self = this;
-        __classPrivateFieldGet(self, _Toaster_tout, "f") && clearTimeout(__classPrivateFieldGet(self, _Toaster_tout, "f"));
-        setTimeout(() => {
-            let tost = document.querySelector(`#${ID}`);
-            tost && tost.classList.remove("visible");
-            // tost && tost.classList.add("hidden");			
-            setTimeout(() => {
-                try {
-                    document.getElementById(ID).parentNode.removeChild(document.getElementById(ID));
-                }
-                catch (e) { }
-                self.arrangeToasts();
-            }, 200);
-        }, 200);
-    }
-    toast(config) {
-        var self = this;
-        var ID = 'toast-' + nanoid(), toast = window.document.createElement('div'); window.document.createElement('div');
-        toast.id = ID;
-        toast.style.backgroundColor = `#111`;
-        toast.style.color = `#fff`;
-        toast.style.transform = `translate(-50%, -300px) scale(0.5)`;
-        toast.style.position = `fixed`;
-        toast.style.padding = `6px 12px`;
-        toast.style.fontSize = `14px`;
-        toast.style.left = `50%`;
-        toast.style.maxWidth = `95%`;
-        toast.style.zIndex = `2147483647`;
-        toast.classList.add('zuz-toast');
-        toast.classList.add('fixed');
-        toast.classList.add('f');
-        toast.innerHTML = config.message || `You haven't passed "message" in this toast`;
-        (__classPrivateFieldGet(self, _Toaster_container, "f") || window.document.querySelector(`#${__classPrivateFieldGet(self, _Toaster_root, "f")}`)).appendChild(toast);
-        self.arrangeToasts()
-            .then(() => {
-            setTimeout(() => {
-                let tost = document.querySelector("#" + ID);
-                tost.classList.add("showing");
-                setTimeout(() => self.dismiss(ID), ((config === null || config === void 0 ? void 0 : config.duration) == undefined ? __classPrivateFieldGet(self, _Toaster_defaultTimeLeft, "f") : (config === null || config === void 0 ? void 0 : config.duration) == -1 ? 86400 : config === null || config === void 0 ? void 0 : config.duration) * 1000);
-                setTimeout(() => {
-                    let tost = document.querySelector("#" + ID);
-                    tost.classList.remove("showing");
-                    tost.classList.add("visible");
-                }, 200);
-            }, 10);
-        });
-    }
-    arrangeToasts() {
-        var self = this, top = __classPrivateFieldGet(self, _Toaster_startTop, "f");
-        return new Promise((resolve, reject) => {
-            var toasts = document.querySelectorAll(".zuz-toast"), i = toasts.length;
-            while (i--) {
-                toasts[i]['style'].top = `${top}px`;
-                top += parseInt(getComputedStyle(toasts[i]).height.replace('px', '')) + 6;
-            }
-            resolve(null);
-        });
-    }
-}
-_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap(), _Toaster_root = new WeakMap();
-
-const useToast = () => {
-    const toaster = useMemo(() => new Toaster(), []);
-    return toaster;
-};
-
-const useLang = (mod = 'en') => {
-    const state = useContext(AppContext);
-    return state['lang'] || {};
-};
-
-const Box = forwardRef((props, ref) => {
-    const _noClick = () => { };
-    // console.log(props)
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onDoubleClick: props.onDoubleClick || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
-});
-
-const Menu = ({ ID, hide, e, items, width }) => {
-    const nodeRef = useRef(null);
-    const [p, setP] = useState(getMousePosition(e));
-    const [visible, setVisible] = useState(false);
-    const checkBoundaries = (x, y) => {
-        if (nodeRef.current) {
-            const { innerWidth, innerHeight } = window;
-            const { offsetWidth, offsetHeight } = nodeRef.current;
-            if (x + offsetWidth > innerWidth)
-                x -= offsetWidth; //x + offsetWidth - innerWidth;
-            if (y + offsetHeight > innerHeight)
-                y -= offsetHeight;
-        }
-        setP({ x, y });
-        setVisible(true);
-    };
-    useEffect(() => {
-        checkBoundaries(p.x, p.y);
-    }, [e]);
-    return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: p.y, left: p.x, w: width || 220, opacity: visible ? 1 : 0, as: `zuz-contextmenu ${ID}` }, { children: items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", Object.assign({ onClick: ev => {
-                if (m.onClick) {
-                    m.onClick(ev, m);
-                }
-                else {
-                    console.log(`No onClick eventFound`);
-                }
-                hide();
-            } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
-};
-const useContextMenu = (contextID, contextWidth, contextToken = `____uchides`) => {
-    const ID = `contextmenu-${contextID}`;
-    useState(false);
-    const [root, setRoot] = useState(null);
-    const el = (e) => window.document.createElement(e);
-    const createRoot = () => {
-        if (!window.document.querySelector(`#${ID}`)) {
-            let div = el(`div`);
-            div.id = ID;
-            window.document.body.appendChild(div);
-        }
-    };
-    const hideAll = () => {
-        if (window[contextToken]) {
-            window[contextToken].map((h) => h['ID'] != ID && h['fnc']());
-        }
-    };
-    const _hide = () => {
-        try {
-            root === null || root === void 0 ? void 0 : root.unmount();
-            document.querySelector(`#${ID}`).parentNode.removeChild(document.querySelector(`#${ID}`));
-            setRoot(null);
-        }
-        catch (e) { }
-    };
-    const hide = () => {
-        _hide();
-        hideAll();
-    };
-    const show = (e, items) => {
-        e.preventDefault();
-        e.stopPropagation();
-        hideAll();
-        root.render(jsx(Menu, { e: e, width: contextWidth || 220, items: items, ID: ID, hide: hide }));
-    };
-    useEffect(() => {
-        createRoot();
-        if (!root)
-            setRoot(ReactDOM.createRoot(document.getElementById(ID)));
-    }, [root]);
-    useEffect(() => {
-        if (contextToken in window == false) {
-            window[contextToken] = [];
-        }
-        if (window[contextToken].findIndex(x => x.ID == ID) == -1) {
-            window[contextToken].push({ ID: ID, fnc: _hide });
-            if (window[contextToken].length > document.querySelectorAll('div[id^="contextmenu-"]').length) {
-                window[contextToken].shift();
-            }
-        }
-    }, []);
-    return {
-        show,
-        hide,
-        hideAll
-    };
-};
-
-const useRender = (isMounted, delay) => {
-    const [canRender, setCanRender] = useState(false);
-    // console.log(
-    //     `isMounted:`, isMounted,
-    //     `canRender:`, canRender,
-    // )
-    useEffect(() => {
-        let outID;
-        if (isMounted && !canRender) {
-            setCanRender(true);
-        }
-        else if (isMounted && canRender) {
-            outID = setTimeout(() => setCanRender(false), delay * 1000);
-        }
-        return () => clearTimeout(outID);
-    }, [isMounted, delay]);
-    return canRender;
-};
-
-const Button = forwardRef((props, ref) => {
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    if (props.html) {
-        ({ __html: props.html });
-    }
-    return (jsx(ClassNames, { children: ({ css, cx }) => {
-            return (jsx("button", Object.assign({}, cleanProps(props), { title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
-                padding: 5px 10px;
-                border-radius: 2px;
-                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onDoubleClick: props.onDoubleClick || undefined, onClick: e => {
-                    if (props.form && props.type && props.type == 'submit') {
-                        props.onSubmit(forms[props.form]);
-                    }
-                    else {
-                        props.onClick ? props.onClick(e) : () => console.warn('onClick Missing');
-                    }
-                }, disabled: props.disabled || false }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })));
-        } }));
-});
-
-const patterns = {
-    route: [/^.*\/src\/pages\/|\.(jsx|tsx)$/g, ''],
-    splat: [/\[\.{3}\w+\]/g, '*'],
-    param: [/\[([^\]]+)\]/g, ':$1'],
-    slash: [/^index$|\./g, '/'],
-    optional: [/^-(:?[\w-]+)/, '$1?'],
-};
-const generatePreservedRoutes = (files) => {
-    return Object.keys(files).reduce((routes, key) => {
-        const path = key.replace(...patterns.route);
-        return Object.assign(Object.assign({}, routes), { [path]: files[key] });
-    }, {});
-};
-const generateRegularRoutes = (files, buildRoute) => {
-    const filteredRoutes = Object.keys(files).filter((key) => !key.includes('/_') || /_layout\.(jsx|tsx)$/.test(key));
-    return filteredRoutes.reduce((routes, key) => {
-        const module = files[key];
-        const route = Object.assign({ id: key.replace(...patterns.route) }, buildRoute(module, key));
-        const segments = key
-            .replace(...patterns.route)
-            .replace(...patterns.splat)
-            .replace(...patterns.param)
-            .split('/')
-            .filter(Boolean);
-        segments.reduce((parent, segment, index) => {
-            var _a, _b;
-            const path = segment.replace(...patterns.slash).replace(...patterns.optional);
-            const root = index === 0;
-            const leaf = index === segments.length - 1 && segments.length > 1;
-            const node = !root && !leaf;
-            const layout = segment === '_layout';
-            const group = /\(\w+\)/.test(path);
-            const insert = /^\w|\//.test(path) ? 'unshift' : 'push';
-            if (root) {
-                const last = segments.length === 1;
-                if (last) {
-                    routes.push(Object.assign({ path }, route));
-                    return parent;
-                }
-            }
-            if (root || node) {
-                const current = root ? routes : parent.children;
-                const found = current === null || current === void 0 ? void 0 : current.find((route) => { var _a, _b; return route.path === path || ((_b = (_a = route.id) === null || _a === void 0 ? void 0 : _a.split('@')) === null || _b === void 0 ? void 0 : _b[0]) === path; });
-                const props = group ? ((route === null || route === void 0 ? void 0 : route.component) ? { id: path, path: '/' } : { id: path }) : { path };
-                if (found)
-                    (_a = found.children) !== null && _a !== void 0 ? _a : (found.children = []);
-                else
-                    current === null || current === void 0 ? void 0 : current[insert](Object.assign(Object.assign({}, props), { children: [] }));
-                return found || (current === null || current === void 0 ? void 0 : current[insert === 'unshift' ? 0 : current.length - 1]);
-            }
-            if (layout) {
-                return Object.assign(parent, Object.assign(Object.assign({}, route), { id: `${parent.id || parent.path}@${route.id}` }));
-            }
-            if (leaf) {
-                (_b = parent === null || parent === void 0 ? void 0 : parent.children) === null || _b === void 0 ? void 0 : _b[insert]((route === null || route === void 0 ? void 0 : route.index) ? route : Object.assign({ path }, route));
-            }
-            return parent;
-        }, {});
-        return routes;
-    }, []);
-};
-const generateModalRoutes = (files) => {
-    return Object.keys(files).reduce((modals, key) => {
-        var _a;
-        const path = key
-            .replace(...patterns.route)
-            .replace(/\+|\(\w+\)\//g, '')
-            .replace(/(\/)?index/g, '')
-            .replace(/\./g, '/');
-        return Object.assign(Object.assign({}, modals), { [`/${path}`]: (_a = files[key]) === null || _a === void 0 ? void 0 : _a.default });
-    }, {});
-};
-
-const makeCSSValue = (k, v, o) => {
-    let ignore = cssPropsIgnore.indexOf(o) == -1;
-    if (k in cssPropsDirect && ignore == true) {
-        // return cssPropsDirect[k];
-        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) => {
-    let _props = Object.assign({}, props);
-    Object.keys(_props).map(k => {
-        if (k in cssProps) {
-            delete _props[k];
-        }
-    });
-    let _extras = [`as`, `hover`, `bref`, `tag`];
-    _extras.map(x => x in _props && delete _props[x]);
-    return _props;
-};
-const buildCSS = (props) => {
-    let css = ``;
-    Object.keys(props).map(k => {
-        css += k in cssProps ? makeCSSValue(cssProps[k], props[k], k) : '';
-    });
-    return css;
-};
-const setCSSVar = (key, val) => {
-    document.documentElement.style.setProperty(`--${key}`, val);
-};
-const isUrl = (u) => {
-    let url;
-    try {
-        url = new URL(u);
-    }
-    catch (_) {
-        return false;
-    }
-    return url.protocol === 'http:' || url.protocol === 'https:';
-};
-const isEmail = (e) => {
-    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
-    return reg.test(e);
-};
-const isIPv4 = (ipaddress) => {
-    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
-};
-const randstr = function (len) {
-    var text = "";
-    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    len = len || 10;
-    for (var i = 0; i < len; i++) {
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
-    }
-    return text;
-};
-const setCookie = (key, value, expiry, host) => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host });
-const getCookie = (key) => Cookies.get(key) || null;
-const removeCookie = (key) => Cookies.remove(key);
-const buildFormData = (data) => {
-    var formData = new FormData();
-    var _data = Cookies.get();
-    Object.keys(_data).map(k => formData.append(k, _data[k]));
-    Object.keys(data).filter(x => x != 'files').map(k => formData.append(k, data[k]));
-    if ('files' in data)
-        [data['files']].map((f) => formData.append('files[]', f));
-    return formData;
-};
-const grab = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
-    window['__grabToken'] = axios.CancelToken.source();
-    if (fd) {
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: window['__grabToken'].token,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress
-                    // if(progress) progress(ev.)
-                }
-            })
-                .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), { __ustmp: new Date().getTime() / 1000 }), {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${Bearer}`
-            },
-            cancelToken: window['__grabToken'].token
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => reject(err));
-    });
-};
-const el = (e) => document.querySelector(e);
-const byName = (e) => document.querySelector(`*[name="${e}"]`);
-const byId = (e) => document.getElementById(e);
-const addProps = (children, prop) => {
-    let form = {};
-    let allowedFields = [Input, Select, Button];
-    let child = Children.deepMap(children, c => {
-        if (allowedFields.indexOf(c['type']) > -1 && c['props'] && !form[c['props'].name]) {
-            form[c['props'].name] = c['props'].value || null;
-        }
-        let Clone = cloneElement(c, prop);
-        return Clone;
-    });
-    return {
-        children: child,
-        fields: form
-    };
-};
-const ucfirst = (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-};
-const filterStyleProps = (props) => {
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {};
-    css.filter(x => pks.includes(x));
-    // .map(k => filter[k] = props[k].toString());
-    return filter;
-    // const allowed = Object.keys(props);
-    // let allowed = Object.keys(cssProps);
-    // return Object.keys(props)
-    //         .filter( k => allowed.includes(k))
-    //         .reduce( (o, k) => {
-    //             // console.log(o)
-    //             console.log(k, props[k])
-    //             // o[k] = props[k].toString();
-    //             // return o;
-    //         })
-    // return [props].filter( row => (
-    //     Object.keys(row)
-    //         .map(key => css.includes(key))
-    // ));
-};
-const filterHTMLProps = (props) => {
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {};
-    pks.filter(x => {
-        if (x != `for` && !css.includes(x)) {
-            filter[x] = props[x];
-        }
-    });
-    return filter;
-};
-const uuid = (len = 21) => nanoid(len);
-const addScript = (src, callback) => {
-    var s = document.createElement('script');
-    s.setAttribute('src', src);
-    s.addEventListener('load', callback, false);
-    document.body.appendChild(s);
-};
-const shuffleArray = array => {
-    for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [array[i], array[j]] = [array[j], array[i]];
-    }
-    return array;
-};
-const getUriParams = () => {
-    var search = location.search.substring(1);
-    if (search == '')
-        return JSON.parse('{}');
-    var xny = {};
-    if ("URLSearchParams" in window) {
-        var items = new URLSearchParams(search);
-        for (const [k, v] of items) {
-            xny[k] = v || ``;
-        }
-    }
-    else {
-        try {
-            xny = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
-        }
-        catch (e) {
-            xny = {};
-        }
-    }
-    return xny;
-};
-const rgb2hex = rgb => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;
-const getHostname = url => {
-    if (window.URL) {
-        let u = new window.URL(url);
-        return u.hostname;
-    }
-    else {
-        var a = document.createElement(`a`);
-        a.href = url;
-        return a.hostname.replace("www.", "");
-    }
-};
-const imgPromiseFactory = ({ decode = true, crossOrigin = '' }) => (src) => {
-    return new Promise((resolve, reject) => {
-        const i = new Image();
-        if (crossOrigin)
-            i.crossOrigin = crossOrigin;
-        i.onload = () => {
-            decode && i.decode ? i.decode().then(resolve).catch(reject) : resolve();
-        };
-        i.onerror = reject;
-        i.src = src;
-    });
-};
-const parseFilename = nm => {
-    var re = /(?:\.([^.]+))?$/;
-    return {
-        name: nm.split('.').slice(0, -1).join('.'),
-        ext: re.exec(nm)[1]
-    };
-};
-const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-const getMousePosition = e => {
-    const pos = {
-        x: e.clientX,
-        y: e.clientY,
-    };
-    const touch = e.changedTouches;
-    if (touch) {
-        pos.x = touch[0].clientX;
-        pos.y = touch[0].clientY;
-    }
-    if (!pos.x || pos.x < 0)
-        pos.x = 0;
-    if (!pos.y || pos.y < 0)
-        pos.y = 0;
-    return pos;
-};
-const copyToClipboard = (str, callback) => {
-    const el = document.createElement('textarea');
-    let storeContentEditable = el.contentEditable;
-    let storeReadOnly = el.readOnly;
-    el.value = str;
-    el.contentEditable = `true`;
-    el.readOnly = false;
-    el.setAttribute('readonly', `false`);
-    el.setAttribute('contenteditable', `true`);
-    el.style.position = 'absolute';
-    el.style.left = '-999999999px';
-    document.body.appendChild(el);
-    const selected = document.getSelection().rangeCount > 0
-        ? document.getSelection().getRangeAt(0)
-        : false;
-    el.select();
-    el.setSelectionRange(0, 999999);
-    document.execCommand('copy');
-    document.body.removeChild(el);
-    if (selected) {
-        document.getSelection().removeAllRanges();
-        document.getSelection().addRange(selected);
-    }
-    el.contentEditable = storeContentEditable;
-    el.readOnly = storeReadOnly;
-    if (callback)
-        callback();
-};
-/**
- * Format bytes as human-readable text.
- *
- * @param bytes Number of bytes.
- * @param si True to use metric (SI) units, aka powers of 1000. False to use
- *           binary (IEC), aka powers of 1024.
- * @param dp Number of decimal places to display.
- *
- * @return Formatted string.
- */
-const formatSize = (bytes, si = false, dp = 1) => {
-    const thresh = si ? 1000 : 1024;
-    if (Math.abs(bytes) < thresh) {
-        return bytes + ' B';
-    }
-    const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    let u = -1;
-    const r = 10 ** dp;
-    do {
-        bytes /= thresh;
-        ++u;
-    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
-    return bytes.toFixed(dp) + ' ' + units[u];
-};
-const slugify = (...args) => {
-    const value = args.join(' ');
-    return value
-        .normalize('NFD') // split an accented letter in the base letter and the acent
-        .replace(/[\u0300-\u036f]/g, '') // remove all previously split accents
-        .toLowerCase()
-        .trim()
-        .replace(/[^a-z0-9 ]/g, '') // remove all chars not letters, numbers and spaces (to be replaced)
-        .replace(/\s+/g, '-'); // separator
-};
-
-const AppMain = forwardRef((props, ref) => {
-    // const { dispatch } = useStore()
-    // if("theme" in props && !theme){
-    //     dispatch(setTheme(props.theme));
-    // }
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("main", Object.assign({ className: `${props.as ? props.as : `zuz-app`} ${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}` }, { children: props.children })) }));
-});
-const App = forwardRef((props, ref) => {
-    return (jsx(AppProvider, { children: jsx(AppMain, {}) }));
-});
-
-// const CoreBlock = styled.section`display: block;`
-// const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
-const Component = forwardRef((props, ref) => {
-    const Tag = props.for;
-    const Block = (typeof props.for == 'string' ?
-        styled[props.for || `div`] : Tag) `${buildCSS(props)}`;
-    // const Block = styled.`${buildCSS(props)}`;
-    // const Block = CoreBlock.withComponent(props.for)`background: red`
-    // console.log(props)
-    // console.log(Styles)
-    // return <button>{props.children}</button>
-    return jsx(Block, Object.assign({ className: props.as || `` }, filterHTMLProps(props)));
-});
-
-function Checkbox(props) {
-    const { checked, as, name, form, touched, onChange } = props;
-    const [_checked, setChecked] = useState(checked || false);
-    const theme = useTheme();
-    const dispatch = useDispatch(STORE_FORM_KEY);
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    const switchCheck = useCallback(() => {
-        let nextVal = !_checked;
-        onChange && onChange(nextVal);
-        setChecked(nextVal);
-        dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, nextVal, forms)));
-    }, [_checked]);
-    const defaultCSS = `cursor: pointer;&:before {
-        background: ${!_checked ? `transparent` : theme.color} !important;
-    }`;
-    const _name = useMemo(() => name || nanoid(), [name]);
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsxs(Fragment, { children: [jsx("input", { onChange: switchCheck, id: `zuz${_name}`, 
-                    // className={`${_checked ? 'y' : 'n'} ${as ? ` ${as} ` : ``}f ${cx(css`opacity: 0;position: absolute;&:checked {${defaultCSSChecked}}`)}`} 
-                    className: `zuz-checkbox`, name: _name, type: `checkbox`, value: `checked` }), jsx("label", { className: `${as ? `${as} ` : ``}f ${cx(css `${defaultCSS}`)}`, htmlFor: `zuz${_name}` })] }) })
-    // <Button 
-    //     overflow={`hidden`}
-    //     name={name || nanoid()}
-    //     onClick={switchCheck} 
-    //     w={38} h={22} r={20} bg={`#ddd`} rel>
-    //     <Box w={38} h={22} anim={`0.2`} abs top={0} r={20} left={0} transform={`translateX(${_checked ? 0 : -16}px)`} bg={theme.color}>
-    //         <Box w={18} h={18} abs right={2} top={2} bg={`#fff`} r={20} boxShadow={`0px 0px 0px 5px ${_checked ? theme.color : `#ddd`}`} />
-    //     </Box>
-    // </Button>
-    );
-}
-
-const Spinner = (props) => {
-    return (jsxs(Box, Object.assign({ rel: true, w: props.size, h: props.size, zIndex: `1`, useSelect: `none` }, { children: [jsx(Box, { abs: true, as: `spinner rotating`, animationDirection: `reverse`, animationDuration: typeof props.s1 == `string` ? props.s1 : `${props.s1}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.2 }), jsx(Box, { abs: true, as: `spinner rotating`, animationDuration: typeof props.s2 == `string` ? props.s2 : `${props.s2}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.5 })] })));
-};
-Spinner.defaultProps = {
-    size: 30,
-    radius: 4,
-    color: `black`,
-    s1: `5s`,
-    s2: `1s`
-};
-Spinner.propTypes = {
-    size: PropTypes.number.isRequired,
-    color: PropTypes.string,
-    radius: PropTypes.number,
-    s1: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    s2: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-const Heading = forwardRef((props, ref) => {
-    const { children, as, h } = props;
-    let Tag = `h${h || 1}`;
-    const HeadingTag = Tag;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(HeadingTag, Object.assign({ className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children })) }));
-});
-
-const Cover = (props) => {
-    return (jsx(Box, Object.assign({ abs: true, fill: true, bgFilter: props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined, zIndex: `2`, bg: props.bg }, { children: jsxs(Box, Object.assign({ abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20 }, { children: [jsx(Spinner, {}, `cover-spinner`), props.label && jsx(Heading, Object.assign({ size: 16, as: `f`, opacity: 0.7 }, { children: props.label }), `cover-label`)] }), `cover-shadow`) }), `cover-cloud`));
-};
-Cover.defaultProps = {
-    bg: `rgba(0,0,0,0.5)`,
-    backdrop: { saturate: 80, blur: 10 },
-    label: null
-};
-Cover.propTypes = {
-    bg: PropTypes.string,
-    backdrop: PropTypes.object,
-    label: PropTypes.string,
-};
-
-const Form = forwardRef((props, ref) => {
-    var _a;
-    const { name, children, onSubmit, cover, debug } = props;
-    const [_html, setHTML] = useState(null);
-    const [_loading, setLoading] = useState((debug === null || debug === void 0 ? void 0 : debug.loading) || false);
-    const dispatch = useDispatch(STORE_FORM_KEY);
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    const buildFields = () => {
-        return addProps(children, { form: name, touched: undefined, loading: undefined, onSubmit: onSubmit ? onSubmit : () => console.log(`onSubmit Missing`) });
-    };
-    const update = (e) => Object.keys(e).map(k => {
-        dispatch(UPDATE_FORM_FIELD(name || 'orphan', k, e[k], forms));
-        if (k == 'loading')
-            setLoading(e[k]);
-    });
-    const get = (k) => forms[name][k] || null;
-    useImperativeHandle(ref, () => ({
-        update,
-        get
-    }));
-    useEffect(() => {
-        let f = buildFields();
-        setHTML(f.children);
-        if (!forms[name]) {
-            dispatch(ADD_FORM(name, f.fields, forms));
-        }
-    }, [children, (_a = forms[name]) === null || _a === void 0 ? void 0 : _a.loading]);
-    return createElement(Box, Object.assign(Object.assign({ rel: true }, props), { as: name }), [
-        _loading ? jsx(Cover, { backdrop: (cover === null || cover === void 0 ? void 0 : cover.filter) || { saturate: 80, blur: 10 }, bg: (cover === null || cover === void 0 ? void 0 : cover.bg) || `rgba(0,0,0,0.5)` }, `form-${name}-cover`) : null,
-        _html
-    ]);
-});
-Form.defaultProps = {
-    name: 'form1',
-    onSubmit: () => { console.log(`onSubmit not provided`); }
-};
-Form.propTypes = {
-    name: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-    onSubmit: PropTypes.func.isRequired
-};
-
-const Icon = forwardRef((props, ref) => {
-    const { as, path, size, color, hover } = props;
-    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, bref: ref, as: `icon-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: path && Array(path).fill(undefined).map((p, i) => jsx("span", { className: `path${i + 1}` }, `ico-${as}-${i}`)) })));
-});
-
-const Image$1 = forwardRef((props, ref) => {
-    const { src, isLoading, error } = useImage({ srcList: props.src, useSuspense: false });
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsxs(Fragment, { children: [isLoading && jsx(Box, { className: `${props.as ? `${props.as} ` : ``}${cx(css `background: #eee;${buildCSS(props)}`)}` }), !isLoading && jsx("img", { src: src, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref })] }) })
-    // <ClassNames>
-    //     {({ css, cx }) => <picture className={cx(css`${buildCSS({ flex: true })}`)}>
-    //         {status == 'loading' && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
-    //         {status == 'loaded' && <img src={props.src}
-    //         className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
-    //         ref={ref} />}
-    //     </picture>}
-    // </ClassNames>
-    );
-});
-
-const DEFAULT_COLUMNS = 2;
-class Masonry extends Component$1 {
-    constructor(props) {
-        super(props);
-        this._lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
-            this.reCalculateColumnCount();
-        });
-        // Correct scope for when methods are accessed externally
-        this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);
-        this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
-        // default state
-        let columnCount;
-        if (this.props && this.props.breakpointCols.default) {
-            columnCount = this.props.breakpointCols.default;
-        }
-        else {
-            columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS;
-        }
-        this.state = {
-            columnCount
-        };
-    }
-    componentDidMount() {
-        this.reCalculateColumnCount();
-        // window may not be available in some environments
-        if (window) {
-            window.addEventListener('resize', this.reCalculateColumnCountDebounce);
-        }
-    }
-    componentDidUpdate() {
-        this.reCalculateColumnCount();
-    }
-    componentWillUnmount() {
-        if (window) {
-            window.removeEventListener('resize', this.reCalculateColumnCountDebounce);
-        }
-    }
-    reCalculateColumnCountDebounce() {
-        if (!window || !window.requestAnimationFrame) { // IE10+
-            this.reCalculateColumnCount();
-            return;
-        }
-        if (window.cancelAnimationFrame) { // IE10+
-            window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);
-        }
-    }
-    reCalculateColumnCount() {
-        const windowWidth = window && window.innerWidth || Infinity;
-        let breakpointColsObject = this.props.breakpointCols;
-        // Allow passing a single number to `breakpointCols` instead of an object
-        if (typeof breakpointColsObject !== 'object') {
-            breakpointColsObject = {
-                default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS
-            };
-        }
-        let matchedBreakpoint = Infinity;
-        let columns = breakpointColsObject.default || DEFAULT_COLUMNS;
-        for (let breakpoint in breakpointColsObject) {
-            const optBreakpoint = parseInt(breakpoint);
-            const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
-            if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
-                matchedBreakpoint = optBreakpoint;
-                columns = breakpointColsObject[breakpoint];
-            }
-        }
-        columns = Math.max(1, parseInt(columns) || 1);
-        if (this.state.columnCount !== columns) {
-            this.setState({
-                columnCount: columns
-            });
-            this.props.onChange && this.props.onChange({ columns: columns });
-        }
-    }
-    itemsInColumns() {
-        const currentColumnCount = this.state.columnCount;
-        const itemsInColumns = new Array(currentColumnCount);
-        // Force children to be handled as an array
-        const items = Children$1.toArray(this.props.children);
-        for (let i = 0; i < items.length; i++) {
-            const columnIndex = i % currentColumnCount;
-            if (!itemsInColumns[columnIndex]) {
-                itemsInColumns[columnIndex] = [];
-            }
-            itemsInColumns[columnIndex].push(items[i]);
-        }
-        return itemsInColumns;
-    }
-    renderColumns() {
-        const { column, columnAttrs = {}, columnClassName } = this.props;
-        const childrenInColumns = this.itemsInColumns();
-        const columnWidth = `${100 / childrenInColumns.length}%`;
-        let className = columnClassName;
-        if (className && typeof className !== 'string') {
-            this.logDeprecated('The property "columnClassName" requires a string');
-            // This is a deprecated default and will be removed soon.
-            if (typeof className === 'undefined') {
-                className = 'my-masonry-grid_column';
-            }
-        }
-        const columnAttributes = Object.assign(Object.assign(Object.assign({}, column), columnAttrs), { style: Object.assign(Object.assign({}, columnAttrs.style), { width: columnWidth }), className });
-        return childrenInColumns.map((items, i) => {
-            return createElement("div", Object.assign({}, columnAttributes, { key: i }), items);
-        });
-    }
-    logDeprecated(message) {
-        console.error('[Masonry]', message);
-    }
-    render() {
-        const _a = this.props, { 
-        // ignored
-        children, breakpointCols, columnClassName, columnAttrs, column, 
-        // used
-        className } = _a, rest = __rest(_a, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]);
-        let classNameOutput = className;
-        if (typeof className !== 'string') {
-            this.logDeprecated('The property "className" requires a string');
-            // This is a deprecated default and will be removed soon.
-            if (typeof className === 'undefined') {
-                classNameOutput = 'my-masonry-grid';
-            }
-        }
-        return (jsx("div", Object.assign({}, rest, { className: classNameOutput }, { children: this.renderColumns() })));
-    }
-}
-
-const calcPlaceholderStyle = (width, height, duration = 1600) => ({
-    backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
-    animationDuration: `${(duration / 1000).toFixed(1)}s`,
-});
-const Placeholder = forwardRef(({ width, height, duration, bg, bgFrom, bgTo }, ref) => {
-    const placeholderStyle = calcPlaceholderStyle(width, height, duration);
-    return (jsx(Box, { as: `shimmer`, w: width, h: height, bg: bg || `#f6f7f8`, backgroundImage: `linear-gradient(to right, ${bgFrom || `rgb(238, 238, 238)`} 8%, ${bgTo || `rgb(203, 203, 203)`} 18%,  ${bgFrom || `rgb(238, 238, 238)`} 33%);`, backgroundSize: placeholderStyle.backgroundSize, animationDuration: placeholderStyle.animationDuration }));
-});
-Placeholder.propTypes = {
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    duration: PropTypes.number,
-    bg: PropTypes.string,
-    bgFrom: PropTypes.string,
-    bgTo: PropTypes.string
-};
-
-const Spacer = ({ w, h }) => {
-    return (jsx(Box, { as: `spacer`, w: w || 0, h: h || 0 }));
-};
-
-const Text = forwardRef((props, ref) => {
-    const { children, as } = props;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("p", Object.assign({ className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children })) }));
-});
-
-const Tweet = (props) => {
-    const [rand, setRand] = useState(Math.random());
-    const _tweet = useRef();
-    const renderTweet = () => {
-        const twttr = window['twttr'];
-        twttr.ready().then(({ widgets }) => {
-            const { options, onTweetLoadSuccess, onTweetLoadError } = props;
-            widgets
-                .createTweetEmbed(props.id, _tweet.current, options || {})
-                .then((twitterWidgetElement) => {
-                // this.setState({
-                // isLoading: false
-                // })
-                // onTweetLoadSuccess && onTweetLoadSuccess(twitterWidgetElement)
-            })
-                .catch(() => { });
-        });
-    };
-    useEffect(() => {
-        const twttr = window['twttr'];
-        if (!(twttr && twttr.ready)) {
-            addScript(`https://platform.twitter.com/widgets.js`, renderTweet);
-        }
-        else {
-            renderTweet();
-        }
-    }, []);
-    useEffect(() => {
-    }, [rand]);
-    return (jsx(Box, { as: `tweet`, weight: 1, bref: _tweet }));
-};
-
-const buildElement = (el) => {
-    switch (el.is) {
-        case "Box":
-            return jsx(Box, Object.assign({}, (el.props || {}), { children: el.children || null }), el.key || nanoid());
-    }
-};
-const buildComponent = (data) => {
-    return data.map(e => buildElement(e));
-};
-
-const Header = forwardRef((props, ref) => {
-    const data = [
-        { is: `Box` }
-    ];
-    return (jsx(Fragment, { children: buildComponent(data) }));
-});
-
-export { App, Component as Block, Box, Button, Checkbox, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, copyToClipboard, createSlice, el, filterHTMLProps, filterStyleProps, formatSize, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, slugify, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useRender, useResizeObserver, useStore, useTheme, useToast, uuid };