@zuzjs/ui 0.3.2 → 0.3.3

package/dist/index.js

@@ -7,7 +7,6 @@ import axios from 'axios';
 import { nanoid } from 'nanoid';
 import { ClassNames } from '@emotion/react';
 import ReactDOM from 'react-dom/client';
-export { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 const AppContext = createContext({});
@@ -50,7 +49,12 @@ function __classPrivateFieldSet(receiver, state, value, kind, f) {
     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;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var _AppTheme_mode, _AppTheme_listen, _AppTheme_lightTheme, _AppTheme_darkTheme;
 class AppTheme {
@@ -62,11 +66,11 @@ class AppTheme {
         this.get = () => {
             let self = this;
             if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                typeof window !== 'undefined' && 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 &&
+                return typeof window !== 'undefined' && window.matchMedia &&
                     window.matchMedia('(prefers-color-scheme: dark)').matches ?
                     __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
             }
@@ -155,7 +159,7 @@ const AppProvider = ({ children, initialState = {}, theme = {}, lang = {} }) =>
     //     }
     // }, [_dispatch]);
     const providedValue = useMemo(() => (Object.assign(Object.assign({}, state), { dispatch })), [state]);
-    return jsx(AppContext.Provider, Object.assign({ value: providedValue }, { children: children }));
+    return jsx(AppContext.Provider, { value: providedValue, children: children });
 };
 AppProvider.defaultProps = {
     theme: {},
@@ -592,7 +596,7 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
     return {};
 };
 
-!!document.documentElement.currentStyle;
+typeof window !== "undefined" && !!document.documentElement.currentStyle;
 const Input = forwardRef((props, ref) => {
     const { as, accept, multiple, onChange, onKeyUp, onClick, onBlur, onFocus, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref, autoComplete, elastic, minRows, maxRows } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
@@ -642,12 +646,12 @@ const Select = forwardRef((props, ref) => {
         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 => {
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", { 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}`)) })) }));
+            }, 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", { value: o.value, children: o.label }, `select-${name}-option-${o.value}`)) }) }));
 });
 
 const useTheme = (mod = 'auto') => {
@@ -784,6 +788,7 @@ const EMPTY_BREAKPOINT = {
     minWidth: undefined,
     maxWidth: undefined,
 };
+const isBrowser = typeof window !== 'undefined';
 const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
     const buildQueries = (breakpoints) => {
         const sorted = Object.keys(breakpoints).sort((a, b) => breakpoints[b] - breakpoints[a]);
@@ -824,7 +829,7 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
              */
             if (typeof window !== 'undefined' &&
                 !(defaultBreakpoint && hydrateInitial)) {
-                const mediaQuery = window.matchMedia(query);
+                const mediaQuery = window === null || window === void 0 ? void 0 : window.matchMedia(query);
                 if (mediaQuery.matches) {
                     return breakpoint;
                 }
@@ -844,32 +849,34 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
     }, []);
     /** 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 (isBrowser) {
+            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.removeEventListener('change', handleChange);
+                    list.addEventListener('change', handleChange);
                 }
                 else {
-                    list.removeListener(handleChange);
+                    list.addListener(handleChange);
                 }
-            };
-        });
-        /** Return a function that when called, will call all unsubscribers */
-        return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+                /** 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'
@@ -897,12 +904,15 @@ class Toaster {
         __classPrivateFieldSet(this, _Toaster_defaultTimeLeft, 4, "f");
         const rootID = (config === null || config === void 0 ? void 0 : config.root) || `toast-container`;
         __classPrivateFieldSet(this, _Toaster_root, rootID, "f");
-        if (window.document.querySelector(`#${rootID}`))
+        this.addRoot();
+    }
+    addRoot() {
+        if (window.document.querySelector(`#${__classPrivateFieldGet(this, _Toaster_root, "f")}`))
             return;
         var root = window.document.createElement('div');
-        root.id = rootID;
+        root.id = __classPrivateFieldGet(this, _Toaster_root, "f");
         window.document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${rootID}`), "f");
+        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${__classPrivateFieldGet(this, _Toaster_root, "f")}`), "f");
     }
     dismiss(ID) {
         let self = this;
@@ -922,6 +932,7 @@ class Toaster {
     }
     toast(config) {
         var self = this;
+        self.addRoot();
         var ID = 'toast-' + nanoid(), toast = window.document.createElement('div'); window.document.createElement('div');
         toast.id = ID;
         toast.style.backgroundColor = `#111`;
@@ -979,7 +990,7 @@ const useLang = (mod = 'en') => {
 const Box = forwardRef((props, ref) => {
     const _noClick = () => { };
     // console.log(props)
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onDoubleClick: props.onDoubleClick || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onDoubleClick: props.onDoubleClick || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
 });
 
 const Menu = ({ ID, hide, e, items, width }) => {
@@ -1001,7 +1012,7 @@ const Menu = ({ ID, hide, e, items, width }) => {
     useEffect(() => {
         checkBoundaries(p.x, p.y);
     }, [e]);
-    return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: p.y, left: p.x, w: width || 220, opacity: visible ? 1 : 0, as: `zuz-contextmenu ${ID}` }, { children: items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", Object.assign({ onClick: ev => {
+    return (jsx(Box, { bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: p.y, left: p.x, w: width || 220, opacity: visible ? 1 : 0, as: `zuz-contextmenu ${ID}`, children: items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", { onClick: ev => {
                 if (m.onClick) {
                     m.onClick(ev, m);
                 }
@@ -1009,7 +1020,7 @@ const Menu = ({ ID, hide, e, items, width }) => {
                     console.log(`No onClick eventFound`);
                 }
                 hide();
-            } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+            }, children: m.label }, `cm-${i}-${m.id}`)) }));
 };
 const useContextMenu = (contextID, contextWidth, contextToken = `____uchides`) => {
     const ID = `contextmenu-${contextID}`;
@@ -1104,7 +1115,7 @@ const Button = forwardRef((props, ref) => {
                     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 })));
+                }, disabled: props.disabled || false, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })));
         } }));
 });
 
@@ -1258,7 +1269,7 @@ const buildFormData = (data) => {
         [data['files']].map((f) => formData.append('files[]', f));
     return formData;
 };
-const grab = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
+const withRest = 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) {
@@ -1514,7 +1525,7 @@ const AppMain = forwardRef((props, ref) => {
     // 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 })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("main", { 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, {}) }));
@@ -1566,7 +1577,7 @@ function Checkbox(props) {
 }
 
 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 })] })));
+    return (jsxs(Box, { 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,
@@ -1587,11 +1598,11 @@ 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 })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(HeadingTag, { 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`));
+    return (jsx(Box, { 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, { abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20, children: [jsx(Spinner, {}, `cover-spinner`), props.label && jsx(Heading, { 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)`,
@@ -1648,7 +1659,7 @@ Form.propTypes = {
 
 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}`)) })));
+    return (jsx(Box, { hover: hover || {}, flex: true, bref: ref, as: `icon-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111`, children: path && Array(path).fill(undefined).map((p, i) => jsx("span", { className: `path${i + 1}` }, `ico-${as}-${i}`)) }));
 });
 
 const Image$1 = forwardRef((props, ref) => {
@@ -1786,7 +1797,7 @@ class Masonry extends Component$1 {
                 classNameOutput = 'my-masonry-grid';
             }
         }
-        return (jsx("div", Object.assign({}, rest, { className: classNameOutput }, { children: this.renderColumns() })));
+        return (jsx("div", Object.assign({}, rest, { className: classNameOutput, children: this.renderColumns() })));
     }
 }
 
@@ -1813,7 +1824,7 @@ const Spacer = ({ w, h }) => {
 
 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 })) }));
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("p", { className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref, children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children }) }));
 });
 
 const Tweet = (props) => {
@@ -1865,4 +1876,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, copyToClipboard, createSlice, el, filterHTMLProps, filterStyleProps, formatSize, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, slugify, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useRender, useResizeObserver, useStore, useTheme, useToast, uuid };
+export { App, Component as Block, Box, Button, Checkbox, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, copyToClipboard, createSlice, el, filterHTMLProps, filterStyleProps, formatSize, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, slugify, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useRender, useResizeObserver, useStore, useTheme, useToast, uuid, withRest };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/src/comps/input.tsx

@@ -67,7 +67,7 @@ export type SizingData = {
     borderSize: number;
 };
 
-const isIE = !!(document.documentElement as any).currentStyle
+const isIE = typeof window !== "undefined" && !!(document.documentElement as any).currentStyle
 
 const getSizingData = (node: HTMLElement): SizingData | null => {
     

package/src/comps/toaster.tsx

@@ -16,12 +16,17 @@ class Toaster {
         this.#defaultTimeLeft = 4
         const rootID = config?.root || `toast-container`;
         this.#root = rootID;
-        if(window.document.querySelector(`#${rootID}`)) return;
-        var self = this;
+
+        this.addRoot();
+        
+    }
+
+    addRoot(){
+        if(window.document.querySelector(`#${this.#root}`)) return;
         var root = window.document.createElement('div');
-		root.id = rootID;
-		window.document.body.appendChild(root);
-        this.#container = window.document.querySelector(`#${rootID}`)       
+		root.id = this.#root;
+        window.document.body.appendChild(root);
+        this.#container = window.document.querySelector(`#${this.#root}`)       
     }
 
     show = (
@@ -57,6 +62,7 @@ class Toaster {
     }){
         
         var self = this;
+        self.addRoot();
         var tout = null,
         ID = 'toast-' + nanoid(),
         toast = window.document.createElement('div'),

package/src/context/store/theme.tsx

@@ -32,11 +32,11 @@ class AppTheme {
     get = () => {
         let self = this;
         if(self.#mode === "auto"){
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
                 self.#mode = event.matches ? "dark" : "light";
                 self.#listen(self.#mode);
             });
-            return window.matchMedia && 
+            return typeof window !== 'undefined' && window.matchMedia && 
                 window.matchMedia('(prefers-color-scheme: dark)').matches ? 
                 self.#darkTheme : self.#lightTheme;
         }else{ 

package/src/core/index.ts

@@ -105,7 +105,7 @@ const buildFormData = (data : object) : FormData => {
     return formData;
 }
 
-const grab = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
+const withRest = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
     var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
 	window['__grabToken'] = axios.CancelToken.source();
     if(fd){
@@ -400,7 +400,7 @@ export {
     byName,
     byId,
     el,    
-    grab,
+    withRest,
     isEmail,
     isIPv4,
     isUrl,

package/src/hooks/useDevice.tsx

@@ -30,6 +30,8 @@ type Return<C extends Config, D> = D extends undefined
   ? Breakpoint<C>
   : never
 
+const isBrowser = typeof window !== 'undefined'
+
 const useDevice = <C extends Config, D extends keyof C | undefined>(
   config: C,
   defaultBreakpoint?: D,
@@ -89,7 +91,7 @@ const useDevice = <C extends Config, D extends keyof C | undefined>(
         typeof window !== 'undefined' &&
         !(defaultBreakpoint && hydrateInitial)
       ) {
-        const mediaQuery = window.matchMedia(query)
+        const mediaQuery = window?.matchMedia(query)
         if (mediaQuery.matches) {
           return breakpoint as Breakpoint<C>
         }
@@ -117,35 +119,37 @@ const useDevice = <C extends Config, D extends keyof C | undefined>(
 
   /** On changes to mediaQueries, subscribe to changes using window.matchMedia */
   useChooseEffect(() => {
-    const unsubscribers = mediaQueries.map(({ query, ...breakpoint }) => {
-      const list = window.matchMedia(query)
-      updateBreakpoint(list, breakpoint as Breakpoint<C>)
-
-      const handleChange = (event: MediaQueryListEvent) => {
-        updateBreakpoint(event, breakpoint as Breakpoint<C>)
-      }
+    if (isBrowser) {
+      const unsubscribers = mediaQueries.map(({ query, ...breakpoint }) => {
+        const list = window.matchMedia(query)
+        updateBreakpoint(list, breakpoint as Breakpoint<C>)
 
-      const supportsNewEventListeners =
-        'addEventListener' in list && 'removeEventListener' in list
+        const handleChange = (event: MediaQueryListEvent) => {
+          updateBreakpoint(event, breakpoint as Breakpoint<C>)
+        }
 
-      if (supportsNewEventListeners) {
-        list.addEventListener('change', handleChange)
-      } else {
-        ;(list as MediaQueryList).addListener(handleChange)
-      }
+        const supportsNewEventListeners =
+          'addEventListener' in list && 'removeEventListener' in list
 
-      /** Map the unsubscribers array to a list of unsubscriber methods */
-      return () => {
         if (supportsNewEventListeners) {
-          list.removeEventListener('change', handleChange)
+          list.addEventListener('change', handleChange)
         } else {
-          ;(list as MediaQueryList).removeListener(handleChange)
+          ;(list as MediaQueryList).addListener(handleChange)
         }
-      }
-    })
 
-    /** Return a function that when called, will call all unsubscribers */
-    return () => unsubscribers.forEach((unsubscriber) => unsubscriber())
+        /** Map the unsubscribers array to a list of unsubscriber methods */
+        return () => {
+          if (supportsNewEventListeners) {
+            list.removeEventListener('change', handleChange)
+          } else {
+            ;(list as MediaQueryList).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 */

package/src/index.tsx

@@ -4,8 +4,6 @@ import { Provider, createSlice } from './context'
 export * from './core/index';
 export * from './hooks/index';
 
-export { Link } from "react-router-dom"
-
 export { default as App } from './comps/app'
 export { default as Box } from './comps/box'
 export { default as Button } from './comps/button'

package/src/core/defaultTheme.ts

@@ -1,90 +0,0 @@
-class AppTheme {
-
-    #mode;
-    #listen;
-    #lightTheme;
-    #darkTheme;
-
-    constructor(_conf){
-        const conf = _conf || {}
-        this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); };
-        this.#mode = conf.mode || "auto";
-        this.#lightTheme = {
-            //CORE
-            tag: "light",
-            dark: false,
-            color: "#3a43ac",
-            primary: '#edeef5',
-            secondary: '#e8e9f0',
-            textColor: '#111111',
-            borderColor: '#dcdce1',
-            //APP
-            app: {
-                action: 'rgba(0,0,0,0.1)',
-                actionHover: 'rgba(255,255,255,0.1)',
-                actionActive: 'rgba(0,0,0,0.8)',
-                actionDisabled: 'rgba(255,255,255,0.01)',
-                shimmerBG: '#383a48',
-                shimmerFrom: '#383a48',
-                shimmerTo: '#4a4c5b',
-                iconBG: '#4a4c5b',
-                icon: '#111111',
-                sidebarHover: 'rgba(255,255,255,0.2)',
-                sidebarActive: 'rgba(255,255,255,1)',
-                toolbar: '#d5d6dc',
-                tool: 'transparent',
-                toolActive: 'rgba(255,255,255,0.75)',
-                toolHover: 'rgba(255,255,255,0.5)',
-            }
-        };
-        this.#darkTheme = {
-            //CORE
-            tag: "dark",
-            dark: true,
-            color: "#3a43ac",
-            primary: '#21222d',
-            secondary: '#282a37',
-            textColor: '#f9f9f9',
-            borderColor: '#353640',
-            //APP
-            app: {
-                action: 'rgba(255,255,255,0.05)',
-                actionHover: 'rgba(255,255,255,0.1)',
-                actionActive: 'rgba(255,255,255,0.2)',
-                actionDisabled: 'rgba(255,255,255,0.01)',
-                shimmerBG: '#383a48',
-                shimmerFrom: '#383a48',
-                shimmerTo: '#4a4c5b',
-                iconBG: '#4a4c5b',
-                icon: '#ffffff',
-                toolbar: '#21222d',
-                tool: 'transparent',
-                toolHover: '#2f3144',
-                toolActive: '#2f3144',                
-            }
-        };
-    }
-
-    get = () => {
-        let self = this;
-        if(self.#mode === "auto"){
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                self.#mode = event.matches ? "dark" : "light";
-                self.#listen(self.#mode);
-            });
-            return window.matchMedia && 
-                window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-                self.#darkTheme : self.#lightTheme;
-        }else{ 
-            if(self.#mode === "light"){
-                return self.#lightTheme;
-            }else if(self.#mode === "dark"){
-                return self.#darkTheme;
-            }
-        }
-    }
-
-
-}
-
-export default AppTheme

package/src/redux/slices/app.js

@@ -1,26 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const appSlice = createSlice({
-    name: `app`,
-    initialState: {
-        debug: true,
-        loading: true,
-        theme: null,
-        _tmp: Math.random()
-    },
-    reducers: {
-        setLoading: (state, action) => {
-            state.loading = action.payload || false;
-        },
-        setTheme: (state, action) => { state.theme = action.payload },
-        forceUpdate: (state, action) => { state._tmp = Math.random() }
-    }
-});
-
-export const {
-    setLoading,
-    setTheme,
-    forceUpdate
-} = appSlice.actions;
-
-export default appSlice.reducer;

package/src/redux/slices/form.js

@@ -1,46 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export const formSlice = createSlice({
-    name: `form`,
-    initialState: {
-        forms: {}
-    },
-    reducers: {
-        addForm: (state, action) => {
-            state.forms[action.payload] = { touched: false, loading: false }
-        },
-        updateForm: (state, action) => {
-            // console.log(action.payload)
-            const { name, k, v } = action.payload;
-            if(state.forms[name]) state.forms[name][k] = v;
-        },
-        addFields: (state, action) => {
-            const { form, fields } = action.payload;
-            if(state.forms[form]) state.forms[form] = { ...state.forms[form], ...fields };
-        },
-        addField: (state, action) => {
-            // console.log('addField', action.payload)
-            // state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // if(
-            //     state.forms[action.payload.form] &&
-            //     !state.forms[action.payload.form][action.payload.name]
-            // ){
-            //     state.forms[action.payload.form][action.payload.name] = action.payload.value
-            // }
-        },
-        updateField: (state, action) => {
-            const { form, name, value } = action.payload;
-            // console.log(`updatingField: ${form} = ${name} => ${value}`, state.forms[form])
-            state.forms[form][name] = value;
-        }
-    }
-});
-
-export const { 
-    addForm,
-    updateForm,
-    addField,
-    addFields,
-    updateField 
-} = formSlice.actions;
-export default formSlice.reducer;

package/src/redux/store.js

@@ -1,33 +0,0 @@
-import { 
-    configureStore, 
-    combineReducers
-} from '@reduxjs/toolkit'
-import appReducer from './slices/app'
-import formReducer from './slices/form'
-
-const staticReducers = {
-    app: appReducer,
-    form: formReducer
-}
-
-const appstore = configureStore({
-    reducer: staticReducers,
-    middleware: getDefaultMiddleware => getDefaultMiddleware({
-        serializableCheck: false
-    })
-})
-
-appstore.asyncReducers = {}
-appstore.injectReducer = (k, asyncReducer) => {
-    appstore.asyncReducers[k] = asyncReducer;
-    appstore.replaceReducer(createReducer(appstore.asyncReducers))
-}
-
-const createReducer = asyncReducers => {
-    return combineReducers({
-        ...staticReducers,
-        ...asyncReducers
-    })
-}
-
-export default appstore;