@zuzjs/ui 0.1.9 → 0.2.3

package/dist/index.js

@@ -1,4 +1,1330 @@
-import{createContext,useEffect,useMemo,useReducer,useCallback,cloneElement,useContext,useRef,useState,useLayoutEffect,forwardRef,useImperativeHandle,createElement}from"react";import{jsx,jsxs}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 styled from"@emotion/styled";import toast,{Toaster}from"react-hot-toast";const AppContext=createContext({});function __classPrivateFieldGet(e,t,r,o){if("a"===r&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e===t&&o:t.has(e))return"m"===r?o:"a"===r?o.call(e):o?o.value:t.get(e);throw new TypeError("Cannot read private member from an object whose class did not declare it")}function __classPrivateFieldSet(e,t,r,o,i){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e===t&&i:t.has(e))return"a"===o?i.call(e,r):i?i.value=r:t.set(e,r),r;throw new TypeError("Cannot write private member to an object whose class did not declare it")}var _AppTheme_mode,_AppTheme_listen,_AppTheme_lightTheme,_AppTheme_darkTheme;class AppTheme{constructor(e){_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 t=this;return"auto"===__classPrivateFieldGet(t,_AppTheme_mode,"f")?(window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{__classPrivateFieldSet(t,_AppTheme_mode,e.matches?"dark":"light","f"),__classPrivateFieldGet(t,_AppTheme_listen,"f").call(t,__classPrivateFieldGet(t,_AppTheme_mode,"f"))}),window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?__classPrivateFieldGet(t,_AppTheme_darkTheme,"f"):__classPrivateFieldGet(t,_AppTheme_lightTheme,"f")):"light"===__classPrivateFieldGet(t,_AppTheme_mode,"f")?__classPrivateFieldGet(t,_AppTheme_lightTheme,"f"):"dark"===__classPrivateFieldGet(t,_AppTheme_mode,"f")?__classPrivateFieldGet(t,_AppTheme_darkTheme,"f"):void 0};e=e||{};__classPrivateFieldSet(this,_AppTheme_listen,"listen"in e?e.listen:e=>{console.log("Theme switched to "+e)},"f"),__classPrivateFieldSet(this,_AppTheme_mode,e.mode||"auto","f"),__classPrivateFieldSet(this,_AppTheme_lightTheme,Object.assign({tag:"light",dark:!1,primary:"#edeef5",secondary:"#f9f9f9",textColor:"#111111"},"theme"in e&&"light"in e.theme?Object.assign({},e.theme.light):{}),"f"),__classPrivateFieldSet(this,_AppTheme_darkTheme,Object.assign({tag:"dark",dark:!0,primary:"#21222d",secondary:"#282a37",textColor:"#f9f9f9"},"theme"in e&&"dark"in e.theme?Object.assign({},e.theme.dark):{}),"f")}}_AppTheme_mode=new WeakMap,_AppTheme_listen=new WeakMap,_AppTheme_lightTheme=new WeakMap,_AppTheme_darkTheme=new WeakMap;let isMounted=!0;const STORE_KEY="__zuzjs",STORE_FORM_KEY=STORE_KEY+"forms",defaultState={[STORE_KEY+"base"]:{debug:!0,loading:!1,_tmp:Math.random()},[STORE_FORM_KEY]:{forms:{}}},rootReducer=(e,t)=>Object.assign(Object.assign({},e),t.payload),AppProvider=({children:e,initialState:t={},theme:r={}})=>{useEffect(()=>(isMounted=!0,()=>{isMounted=!1}),[]);var o=useMemo(()=>Object.assign(Object.assign(Object.assign({},defaultState),t),{theme:new AppTheme({theme:r}).get()}),[t]);const[i,a]=useReducer(rootReducer,o),n=useCallback(e=>{isMounted&&a(Object.assign({},e))},[a]);o=useMemo(()=>Object.assign(Object.assign({},i),{dispatch:n}),[i]);return jsx(AppContext.Provider,Object.assign({value:o},{children:e}))},createSlice=(AppProvider.defaultProps={theme:{},initialState:{}},AppProvider.propTypes={children:PropTypes.node.isRequired,initialState:PropTypes.instanceOf(Object),theme:PropTypes.instanceOf(Object)},({name:e,initialState:t,reducers:r})=>({name:e,reducer:r,actions:r,state:t})),cssProps=(createSlice.defaultProps={name:"app",initialState:{},reducers:{}},createSlice.propTypes={name:PropTypes.string.isRequired,initialState:PropTypes.instanceOf(Object).isRequired,reducers:PropTypes.instanceOf(Object).isRequired},{ac:"align-content",alignContent:"align-content",aic:"aic",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",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",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",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",h:"height",height:"height",minH:"min-height",minHeight:"min-height",maxH:"max-height",maxHeight:"max-height",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",wordWrap:"word-wrap",writingMode:"writing-mode",zIndex:"z-index",backdropFilter:"backdrop-filter",bgFilter:"backdrop-filter",anim:"anim",fill:"fill",abc:"abc",fb:"fb",ph:"ph",pv:"pv",mv:"mv",mh:"mh"}),cssPropsVals={primary:"var(--primary-color)",c:"center",cols:"column",rows:"row",rel:"relative",abs:"absolute"},cssPropsDirect={rel:"position: relative;",fixed:"position: fixed;",abs:"position: absolute;",sticky:"position: sticky;",flex:"display: flex;",aic:"align-items: center;",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%;",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;"},cssPropsIgnore=["weight","opacity"],_cssColors=["white","black","gray","red","orange","yellow","green","teal","blue","cyan","purple","pink","linkedin","facebook","messenger","whatsapp","twitter","telegram"],_cssColorsRange=["50","100","200","300","400","500","600","700","800","900"];let cssColors=[];0==cssColors.length&&_cssColors.map(t=>{_cssColorsRange.map(e=>cssColors.push(t+"."+e))});const makeCSSValue=(e,t,r)=>{r=-1==cssPropsIgnore.indexOf(r);if(e in cssPropsDirect&&1==r)return-1<cssPropsDirect[e].indexOf("__VALUE__")?cssPropsDirect[e].replaceAll("__VALUE__",t+("number"==typeof t?"px":"")):cssPropsDirect[e];let o="number"==typeof t&&r?"px":"";return-1<cssColors.indexOf(t)?(t=`var(--colors-${t.replaceAll(".","-")})`,o=""):t in cssPropsVals&&(t=cssPropsVals[t]),`${e}:${t}${o};`},buildCSS=t=>{let r="";return Object.keys(t).map(e=>{r+=e in cssProps?makeCSSValue(cssProps[e],t[e],e):""}),r},setCSSVar=(e,t)=>{document.documentElement.style.setProperty("--"+e,t)},isUrl=e=>{let t;try{t=new URL(e)}catch(e){return!1}return"http:"===t.protocol||"https:"===t.protocol},isEmail=e=>{return/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(e)},isIPv4=e=>/^(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(e),randstr=function(e){var t="",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";e=e||10;for(var o=0;o<e;o++)t+=r.charAt(Math.floor(Math.random()*r.length));return t},setCookie=(e,t,r)=>Cookies.set(e,t,{expires:r||7}),getCookie=e=>Cookies.get(e)||null,removeCookie=e=>Cookies.remove(e),buildFormData=t=>{var r=new FormData,o=Cookies.get();return Object.keys(o).map(e=>r.append(e,o[e])),Object.keys(t).filter(e=>"files"!=e).map(e=>r.append(e,t[e])),"files"in t&&[t.files].map(e=>r.append("files[]",e)),r},grab=async(e,o,i=60,t=null,r,a="__ha")=>{var n=getCookie(a)||randstr(8)+"^"+randstr(8);return window.__grabToken=axios.CancelToken.source(),t?new Promise((t,r)=>{axios({method:"post",url:e,data:buildFormData(o),timeout:1e3*i,cancelToken:window.__grabToken.token,headers:{"Content-Type":"multipart/form-data",Authorization:"Bearer "+n},onUploadProgress:e=>{}}).then(e=>{(e.data&&"kind"in e.data?t:r)(e.data)}).catch(e=>r(e))}):new Promise((t,r)=>{axios.post(e,Object.assign(Object.assign(Object.assign({},Cookies.get()),o),{__ustmp:(new Date).getTime()/1e3}),{timeout:1e3*i,headers:{"Content-Type":"application/json",Authorization:"Bearer "+n},cancelToken:window.__grabToken.token}).then(e=>{(e.data&&"kind"in e.data?t:r)(e.data)}).catch(e=>r(e))})},el=e=>document.querySelector(e),byName=e=>document.querySelector(`*[name="${e}"]`),byId=e=>document.getElementById(e),addProps=(e,t)=>{let r={};return{children:Children.deepMap(e,e=>(e.props&&!r[e.props.name]&&(r[e.props.name]=e.props.value||null),cloneElement(e,t))),fields:r}},ucfirst=e=>e.charAt(0).toUpperCase()+e.slice(1),filterStyleProps=e=>{const t=Object.keys(e);return Object.keys(cssProps).filter(e=>t.includes(e)),{}},filterHTMLProps=t=>{var e=Object.keys(t);const r=Object.keys(cssProps);let o={};return e.filter(e=>{"for"==e||r.includes(e)||(o[e]=t[e])}),o},uuid=()=>nanoid(),useTheme=(e=0)=>{return useContext(AppContext).theme||{}},useImage=(o,i,a)=>{const n=useRef("loading"),s=useRef(),[,l]=useState(0);var e=useRef(),t=useRef(),r=useRef();return e.current===o&&t.current===i&&r.current===a||(n.current="loading",s.current=void 0,e.current=o,t.current=i,r.current=a),useLayoutEffect(function(){var e;if(o)return(e=document.createElement("img")).addEventListener("load",t),e.addEventListener("error",r),i&&(e.crossOrigin=i),a&&(e.referrerPolicy=a),e.src=o,function(){e.removeEventListener("load",t),e.removeEventListener("error",r)};function t(){n.current="loaded",s.current=e,l(Math.random())}function r(){n.current="failed",s.current=void 0,l(Math.random())}},[o,i,a]),[s.current,n.current]},useStore=(e,t=!0)=>{let r=useContext(AppContext),o=t?{}:r;if(t){const i=["defaultState","theme","dispatch",STORE_KEY+"base",STORE_KEY+"forms"];Object.keys(r).map(e=>{-1==i.indexOf(e)&&(o[e]=r[e])})}return"function"==typeof e?e(o):o},useDispatch=o=>{const i=useContext(AppContext),a=i.dispatch;return o?(e={})=>{var t,r;a({action:o,payload:{[o]:(t=i[o],r=e,Object.keys(r).map(e=>{t[e]!==r[e]&&(t[e]=r[e])}),Object.assign(Object.assign({},t),r))}})}:a},AppMain=forwardRef((r,e)=>jsx(ClassNames,{children:({css:e,cx:t})=>jsx("main",Object.assign({className:`${r.as||"zuz-app"} `+t(e`${buildCSS(r)} &:hover {${buildCSS(r.hover||{})}} &:active {${buildCSS(r.active||{})}}`)},{children:r.children}))})),App=forwardRef((e,t)=>jsx(AppProvider,{children:jsx(AppMain,{})})),Box=forwardRef((r,o)=>{const i=()=>{};return jsx(ClassNames,{children:({css:e,cx:t})=>jsx("div",Object.assign({id:r.id||void 0,onClick:r.onClick||i,className:(r.as?r.as+" ":"")+t(e`${buildCSS(r)} &:hover {${buildCSS(r.hover||{})}} &:active {${buildCSS(r.active||{})}}`),ref:r.bref||o},{children:r.html?jsx("span",{dangerouslySetInnerHTML:{__html:r.html}}):r.children}))})}),Button=forwardRef((r,o)=>{const i=useStore(e=>e[STORE_FORM_KEY],!1)["forms"];return r.html&&r.html,jsx(ClassNames,{children:({css:e,cx:t})=>jsx("button",Object.assign({title:"title"in r?r.title:void 0,type:r.type,className:`button${r.as?" "+r.as:""} `+t(e`
+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';
+import axios from 'axios';
+import { nanoid } from 'nanoid';
+import { ClassNames } from '@emotion/react';
+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 || "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();
+
+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 = {} }) => {
+    useEffect(() => {
+        isMounted = true;
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    const rootState = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultState), initialState), { theme: new AppTheme({ theme }).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: {},
+    initialState: {},
+};
+AppProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+    initialState: PropTypes.instanceOf(Object),
+    theme: 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",
+    "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",
+    "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",
+    "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;',
+    '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%;",
+    '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;'
+};
+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 {};
+};
+
+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(r)} &:hover {${buildCSS(r.hover||{})}} &:active {${buildCSS(r.active||{})}}`),ref:o,onClick:e=>{r.form&&r.type&&"submit"==r.type?r.onSubmit(i[r.form]):r.onClick&&r.onClick(e)},disabled:r.disabled||!1},{children:r.html?jsx("span",{dangerouslySetInnerHTML:{__html:r.html}}):r.children}))})}),Component=forwardRef((e,t)=>{var r=e.for,r=("string"==typeof e.for?styled[e.for||"div"]:r)`${buildCSS(e)}`;return jsx(r,Object.assign({className:e.as||""},filterHTMLProps(e)))}),Spinner=e=>jsxs(Box,Object.assign({rel:!0,w:e.size,h:e.size,zIndex:"1",useSelect:"none"},{children:[jsx(Box,{abs:!0,as:"spinner rotating",animationDirection:"reverse",animationDuration:"string"==typeof e.s1?e.s1:e.s1+"s",w:e.size,r:e.radius,h:e.size,bg:e.color,opacity:.2}),jsx(Box,{abs:!0,as:"spinner rotating",animationDuration:"string"==typeof e.s2?e.s2:e.s2+"s",w:e.size,r:e.radius,h:e.size,bg:e.color,opacity:.5})]})),Heading=(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])},forwardRef((r,o)=>{const{children:i,as:a,h:e}=r;const n="h"+(e||1);return jsx(ClassNames,{children:({css:e,cx:t})=>jsx(n,Object.assign({className:(a?a+" ":"")+t(e`${buildCSS(r)}`),ref:o},{children:r.html?jsx("span",{dangerouslySetInnerHTML:{__html:r.html}}):i}))})}));function Cover(e){return jsx(Box,Object.assign({abs:!0,fill:!0,bgFilter:"saturate(80%) blur(10px)",zIndex:2,bg:e.bg||"rgba(0,0,0,0.5)"},{children:jsxs(Box,Object.assign({abs:!0,abc:!0,aic:!0,jcc:!0,flex:!0,dir:"cols",gap:20},{children:[jsx(Spinner,{}),e.label&&jsx(Heading,Object.assign({size:16,as:"f",opacity:.7},{children:e.label}))]}))}))}const ADD_FORM=(e,t,r)=>({forms:Object.assign(Object.assign({},r),{[e]:Object.assign({touched:!1,loading:!1},t)})}),UPDATE_FORM_FIELD=(e,t,r,o)=>{return o[e]?((o=Object.assign({},o))[e][t]=r,{forms:o}):{}},Form=forwardRef((e,t)=>{const{name:r,children:o,onSubmit:i}=e,[a,n]=useState(null),[s,l]=useState(!1),d=useDispatch(STORE_FORM_KEY),c=useStore(e=>e[STORE_FORM_KEY],!1)["forms"];return useImperativeHandle(t,()=>({update:t=>Object.keys(t).map(e=>{d(UPDATE_FORM_FIELD(r||"orphan",e,t[e],c)),"loading"==e&&l(t[e])}),get:e=>c[r][e]||null})),useEffect(()=>{var e;c[r]||(e=addProps(o,{form:r,touched:!1,loading:!1,onSubmit:i||(()=>console.log("onSubmit Missing"))}),n(e.children),d(ADD_FORM(r,e.fields,c)))},[o]),createElement(Box,Object.assign(Object.assign({},e),{as:r}),[s?jsx(Cover,{}):null,a])}),Icon=(Form.defaultProps={name:"form1",onSubmit:()=>{console.log("onSubmit not provided")}},Form.propTypes={name:PropTypes.string.isRequired,children:PropTypes.node.isRequired,onSubmit:PropTypes.func.isRequired},forwardRef((e,t)=>{const{as:r,path:o,size:i,color:a,hover:n}=e;return jsx(Box,Object.assign({hover:n||{},flex:!0,bref:t,as:"icon-"+r,ai:"c",jc:"c",size:i||24,color:a||"#111111"},{children:o&&Array(o).fill(void 0).map((e,t)=>jsx("span",{className:"path"+(t+1)},`ico-${r}-`+t))}))})),Input=forwardRef((r,e)=>{const{as:o,accept:i,multiple:a,onChange:n,type:s,tag:t,placeholder:l,name:d,form:c,touched:p,onSubmit:m,defaultValue:u}=r,g=useDispatch(STORE_FORM_KEY),h=useStore(e=>e[STORE_FORM_KEY],!1)["forms"];const b=t||"input",f=useRef();return jsx(ClassNames,{children:({css:e,cx:t})=>jsx(b,{type:s||"text",placeholder:l||void 0,name:d||nanoid(),multiple:"file"==s?a:void 0,accept:i||"*",className:`${o?o+" ":""}f `+t(e`${"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);"}${buildCSS(r)}&:hover {${buildCSS(r.hover||{})}}`),ref:f,defaultValue:u||"",onKeyUp:e=>{13==(e.keyCode||["which"])&&c&&m&&m()},onChange:e=>{var t="file"==s?e.currentTarget.files:e.currentTarget.value;g(g(UPDATE_FORM_FIELD(c||"orphan",d,""==t?null:t,h))),n&&n(""==e.target.value?null:e.target.value)},onBlur:e=>{},onFocus:e=>0==p&&g(UPDATE_FORM_FIELD(c||"orphan","touched",!0,h))})})}),Image=forwardRef((r,o)=>{const[,i]=useImage(r.src,"anonymous","origin");return jsx(ClassNames,{children:({css:e,cx:t})=>jsxs("picture",Object.assign({className:t(e`${buildCSS({flex:!0})}`)},{children:["loading"==i&&jsx(Box,{className:(r.as?r.as+" ":"")+t(e`background: #eee;${buildCSS(r)}`)}),"loaded"==i&&jsx("img",{src:r.src,className:(r.as?r.as+" ":"")+t(e`${buildCSS(r)}`),ref:o})]}))})}),calcPlaceholderStyle=(e,t,r=1600)=>({backgroundSize:10*e+`px ${t}px`,animationDuration:(r/1e3).toFixed(1)+"s"}),Placeholder=forwardRef(({width:e,height:t,duration:r,bg:o,bgFrom:i,bgTo:a},n)=>{r=calcPlaceholderStyle(e,t,r);return jsx(Box,{as:"shimmer",w:e,h:t,bg:o||"#f6f7f8",backgroundImage:`linear-gradient(to right, ${i||"rgb(238, 238, 238)"} 8%, ${a||"rgb(203, 203, 203)"} 18%,  ${i||"rgb(238, 238, 238)"} 33%);`,backgroundSize:r.backgroundSize,animationDuration:r.animationDuration})}),Shouter=(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},forwardRef((t,e)=>{return useImperativeHandle(e,()=>({shout:e=>{toast(e||"Good Job! add a message sparky :)",{style:{background:t.background,color:t.color,padding:t.padding}})}})),jsx(Toaster,{})})),Spacer=(Shouter.defaultProps={background:"#222",color:"#fff",padding:"5px"},Shouter.propTypes={background:PropTypes.string,color:PropTypes.string,padding:PropTypes.string},({w:e,h:t})=>jsx(Box,{as:"spacer",w:e||0,h:t||0}));export{App,Component as Block,Box,Button,Cover,Form,Heading,Icon,Image,Input,Placeholder,AppProvider as Provider,Shouter,Spacer,Spinner,addProps,buildCSS,buildFormData,byId,byName,createSlice,el,filterHTMLProps,filterStyleProps,getCookie,grab,isEmail,isIPv4,isUrl,randstr,removeCookie,setCSSVar,setCookie,ucfirst,useDispatch,useImage,useStore,useTheme,uuid};
+                ${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) {
+        // 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 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) => Cookies.set(key, value, { expires: expiry || 7 });
+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 = () => 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]];
+    }
+    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 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 Box = forwardRef((props, ref) => {
+    const _noClick = () => { };
+    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 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(() => {
+        if (!forms[name]) {
+            let f = buildFields();
+            setHTML(f.children);
+            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 = 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: `${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 }));
+};
+
+export { App, Component as Block, Box, Button, Checkbox, Cover, Form, 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 };