@zuzjs/ui 0.2.0 → 0.2.4

package/dist/index.js

@@ -1,5 +1,5 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, cloneElement, useContext, useRef, useState, useLayoutEffect, useDebugValue, forwardRef, useImperativeHandle, createElement } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement } 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';
@@ -448,7 +448,9 @@ const cssPropsVals = {
     "c": "center",
     //Flex Directions
     "cols": "column",
+    "colsr": "column-reverse",
     "rows": "row",
+    "rowsr": "row-reverse",
     //Positions
     "rel": "relative",
     "abs": "absolute",
@@ -459,6 +461,7 @@ const cssPropsDirect = {
     'abs': 'position: absolute;',
     'sticky': 'position: sticky;',
     'flex': 'display: flex;',
+    'fwrap': 'flex-wrap: wrap;',
     'aic': 'align-items: center;',
     'ass': 'align-self: flex-start;',
     'asc': 'align-self: center;',
@@ -492,6 +495,420 @@ if (cssColors.length == 0) {
     });
 }
 
+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 {};
+};
+
+const Input = forwardRef((props, ref) => {
+    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue } = 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 = 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);`;
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || 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, defaultValue: defaultValue || ``, onKeyUp: (e) => {
+                let k = e['keyCode'] || ['which'];
+                if (El != 'textarea' && k == 13 && form && onSubmit) {
+                    onSubmit(forms[form]);
+                }
+            }, onChange: e => {
+                let val = type == 'file' ?
+                    e.currentTarget.files
+                    : e.currentTarget.value;
+                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
+                onChange && onChange(e.target.value == "" ? null : e.target.value);
+            }, onBlur: e => {
+            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
+});
+
+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 useImage = (url, crossOrigin, referrerpolicy) => {
+    const statusRef = useRef('loading');
+    const imageRef = useRef();
+    const [_, setStateToken] = useState(0);
+    const oldUrl = useRef();
+    const oldCrossOrigin = useRef();
+    const oldReferrerPolicy = useRef();
+    if (oldUrl.current !== url || oldCrossOrigin.current !== crossOrigin || oldReferrerPolicy.current !== referrerpolicy) {
+        statusRef.current = 'loading';
+        imageRef.current = undefined;
+        oldUrl.current = url;
+        oldCrossOrigin.current = crossOrigin;
+        oldReferrerPolicy.current = referrerpolicy;
+    }
+    useLayoutEffect(function () {
+        if (!url)
+            return;
+        var img = document.createElement('img');
+        function onload() {
+            statusRef.current = 'loaded';
+            imageRef.current = img;
+            setStateToken(Math.random());
+        }
+        function onerror() {
+            statusRef.current = 'failed';
+            imageRef.current = undefined;
+            setStateToken(Math.random());
+        }
+        img.addEventListener('load', onload);
+        img.addEventListener('error', onerror);
+        crossOrigin && (img.crossOrigin = crossOrigin);
+        referrerpolicy && (img.referrerPolicy = referrerpolicy);
+        img.src = url;
+        return function cleanup() {
+            img.removeEventListener('load', onload);
+            img.removeEventListener('error', onerror);
+        };
+    }, [url, crossOrigin, referrerpolicy]);
+    return [imageRef.current, statusRef.current];
+};
+
+/** 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;
+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);
+        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`;
+        if (document.querySelector(`#${rootID}`))
+            return;
+        var root = document.createElement('div');
+        root.id = rootID;
+        document.body.appendChild(root);
+        __classPrivateFieldSet(this, _Toaster_container, 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 = document.createElement('div'); 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").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();
+
+const useToast = () => {
+    const toaster = useMemo(() => new Toaster(), []);
+    return toaster;
+};
+
+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({ 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, 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 makeCSSValue = (k, v, o) => {
     let ignore = cssPropsIgnore.indexOf(o) == -1;
     if (k in cssPropsDirect && ignore == true) {
@@ -614,11 +1031,13 @@ 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 (c['props'] && !form[c['props'].name]) {
+        if (allowedFields.indexOf(c['type']) > -1 && c['props'] && !form[c['props'].name]) {
             form[c['props'].name] = c['props'].value || null;
         }
-        return cloneElement(c, prop);
+        let Clone = cloneElement(c, prop);
+        return Clone;
     });
     return {
         children: child,
@@ -629,379 +1048,74 @@ 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 = () => nanoid();
-
-const useTheme = (mod = 'auto') => {
-    const state = useContext(AppContext);
-    return state['theme'] || {};
-};
-
-const useImage = (url, crossOrigin, referrerpolicy) => {
-    const statusRef = useRef('loading');
-    const imageRef = useRef();
-    const [_, setStateToken] = useState(0);
-    const oldUrl = useRef();
-    const oldCrossOrigin = useRef();
-    const oldReferrerPolicy = useRef();
-    if (oldUrl.current !== url || oldCrossOrigin.current !== crossOrigin || oldReferrerPolicy.current !== referrerpolicy) {
-        statusRef.current = 'loading';
-        imageRef.current = undefined;
-        oldUrl.current = url;
-        oldCrossOrigin.current = crossOrigin;
-        oldReferrerPolicy.current = referrerpolicy;
-    }
-    useLayoutEffect(function () {
-        if (!url)
-            return;
-        var img = document.createElement('img');
-        function onload() {
-            statusRef.current = 'loaded';
-            imageRef.current = img;
-            setStateToken(Math.random());
-        }
-        function onerror() {
-            statusRef.current = 'failed';
-            imageRef.current = undefined;
-            setStateToken(Math.random());
-        }
-        img.addEventListener('load', onload);
-        img.addEventListener('error', onerror);
-        crossOrigin && (img.crossOrigin = crossOrigin);
-        referrerpolicy && (img.referrerPolicy = referrerpolicy);
-        img.src = url;
-        return function cleanup() {
-            img.removeEventListener('load', onload);
-            img.removeEventListener('error', onerror);
-        };
-    }, [url, crossOrigin, referrerpolicy]);
-    return [imageRef.current, statusRef.current];
-};
-
-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 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;
-};
-
-/** 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;
-            }
+    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 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;
+    return filter;
 };
-
-var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft;
-class Toaster {
-    // #toast: Function;
-    // show : Function;
-    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);
-        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`;
-        if (document.querySelector(`#${rootID}`))
-            return;
-        var root = document.createElement('div');
-        root.id = rootID;
-        document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, 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);
+const uuid = () => nanoid();
+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]];
     }
-    toast(config) {
-        var self = this;
-        var ID = 'toast-' + nanoid(), toast = document.createElement('div'); 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 = `16px`;
-        toast.style.left = `50%`;
-        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").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);
-        });
+    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 || ``;
+        }
     }
-    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);
-        });
+    else {
+        try {
+            xny = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
+        }
+        catch (e) {
+            xny = {};
+        }
     }
-}
-_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap();
-
-const useToast = () => {
-    const toaster = useMemo(() => new Toaster(), []);
-    return toaster;
+    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 AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1019,26 +1133,6 @@ const Box = forwardRef((props, ref) => {
     return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({ id: props.id || 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 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({ 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, 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 CoreBlock = styled.section`display: block;`
 // const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
 const Component = forwardRef((props, ref) => {
@@ -1053,6 +1147,37 @@ const Component = forwardRef((props, ref) => {
     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 })] })));
 };
@@ -1079,7 +1204,7 @@ const Heading = forwardRef((props, ref) => {
 });
 
 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, {}), props.label && jsx(Heading, Object.assign({ size: 16, as: `f`, opacity: 0.7 }, { children: props.label }))] })) })));
+    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)`,
@@ -1092,21 +1217,8 @@ Cover.propTypes = {
     label: PropTypes.string,
 };
 
-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 {};
-};
-
 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);
@@ -1126,14 +1238,14 @@ const Form = forwardRef((props, ref) => {
         get
     }));
     useEffect(() => {
+        let f = buildFields();
+        setHTML(f.children);
         if (!forms[name]) {
-            let f = buildFields();
-            setHTML(f.children);
             dispatch(ADD_FORM(name, f.fields, forms));
         }
-    }, [children]);
+    }, [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)` }) : null,
+        _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
     ]);
 });
@@ -1152,36 +1264,13 @@ const Icon = forwardRef((props, ref) => {
     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 Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue } = 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 = 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);`;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || 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, defaultValue: defaultValue || ``, onKeyUp: (e) => {
-                let k = e['keyCode'] || ['which'];
-                if (k == 13 && form && onSubmit) {
-                    onSubmit();
-                }
-            }, onChange: e => {
-                let val = type == 'file' ?
-                    e.currentTarget.files
-                    : e.currentTarget.value;
-                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
-                onChange && onChange(e.target.value == "" ? null : e.target.value);
-            }, onBlur: e => {
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
-});
-
 const Image = forwardRef((props, ref) => {
     const [photo, status] = useImage(props.src, 'anonymous', 'origin');
     return (jsx(ClassNames, { children: ({ css, cx }) => jsxs("picture", Object.assign({ className: cx(css `${buildCSS({ flex: true })}`) }, { children: [status == 'loading' && jsx(Box, { className: `${props.as ? `${props.as} ` : ``}${cx(css `background: #eee;${buildCSS(props)}`)}` }), status == 'loaded' && jsx("img", { src: props.src, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref })] })) }));
 });
 
 const calcPlaceholderStyle = (width, height, duration = 1600) => ({
-    backgroundSize: `${width * 10}px ${height}px`,
+    backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
     animationDuration: `${(duration / 1000).toFixed(1)}s`,
 });
 const Placeholder = forwardRef(({ width, height, duration, bg, bgFrom, bgTo }, ref) => {
@@ -1197,24 +1286,6 @@ Placeholder.propTypes = {
     bgTo: PropTypes.string
 };
 
-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 Spacer = ({ w, h }) => {
     return (jsx(Box, { as: `spacer`, w: w || 0, h: h || 0 }));
 };
@@ -1224,4 +1295,58 @@ const Text = forwardRef((props, ref) => {
     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 })) }));
 });
 
-export { App, Component as Block, Box, Button, Cover, Form, Heading, Icon, Image, Input, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, addProps, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, getCookie, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, setCSSVar, setCookie, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };
+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 ContextMenu = forwardRef((props, ref) => {
+    const { as, size, color, hover, pos, items } = props;
+    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+});
+
+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, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };