@zuzjs/ui 0.4.9 → 0.5.0

package/dist/comps/checkbox.d.ts

@@ -1,6 +1,18 @@
 import { animationProps } from "./base";
-declare const CheckBox: import("react").ForwardRefExoticComponent<{
+import { CHECKBOX } from "../types/enums";
+export interface CheckboxProps {
     as?: string;
+    type?: CHECKBOX;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    onChange?: (checked: boolean, value: string | string[]) => void;
     animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+}
+export interface CheckboxHandler {
+    setChecked: (mode: boolean, triggerChange?: boolean) => void;
+    toggle: (triggerChange?: boolean) => void;
+}
+declare const CheckBox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<CheckboxHandler>>;
 export default CheckBox;

package/dist/comps/checkbox.js

@@ -1,10 +1,32 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
+import { CHECKBOX } from "../types/enums";
 const CheckBox = forwardRef((props, ref) => {
-    const { as, name, required, ...rest } = props;
-    const [checked, setChecked] = useState(props.checked || false);
-    return _jsx(With, { tag: `label`, className: `zuz-checkbox${checked ? ` is-checked` : ``} rel`, as: as, ...rest, children: _jsx(With, { tag: `input`, ref: ref, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => setChecked(e.target.checked) }) });
+    const { as, name, required, type, value, onChange, ...rest } = props;
+    const [checked, _setChecked] = useState(props.checked || false);
+    const bRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setChecked(mod, triggerChange = true) {
+            _setChecked(mod);
+            if (bRef.current) {
+                bRef.current.checked = mod;
+            }
+            if (triggerChange && onChange)
+                onChange(mod, value || `cb`);
+        },
+        toggle(triggerChange = true) {
+            if (bRef.current)
+                bRef.current.checked = !checked;
+            if (triggerChange && onChange)
+                onChange && onChange(!checked, value || `cb`);
+            _setChecked(!checked);
+        }
+    }));
+    return _jsx(With, { tag: `label`, className: `${type == CHECKBOX.Default ? `checkbox icon-check` : `zuz-checkbox`} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), as: as, ...rest, children: _jsx(With, { tag: `input`, ref: bRef, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+                onChange && onChange(e.target.checked, value || `cb`);
+                _setChecked(e.target.checked);
+            } }) });
 });
 export default CheckBox;

package/dist/comps/cover.d.ts

@@ -9,6 +9,7 @@ export interface CoverProps extends ComponentPropsWithoutRef<`div`> {
     as?: string;
     animate?: animationProps;
     when?: boolean;
+    hideMessage?: boolean;
 }
 declare const Cover: import("react").ForwardRefExoticComponent<CoverProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Cover;

package/dist/comps/cover.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import With from "./base";
 import Spinner from "./spinner";
 const Cover = forwardRef((props, ref) => {
-    const { spinner, message, color, as, when, ...rest } = props;
+    const { spinner, message, color, as, when, hideMessage, ...rest } = props;
     if (`when` in props && props.when == false) {
         return null;
     }
@@ -11,6 +11,6 @@ const Cover = forwardRef((props, ref) => {
             backgroundColor: `var(--cover-bg)`
         }, as: as, ...rest, children: [_jsx(Spinner, { ...{
                     ...spinner
-                } }), _jsx(With, { tag: `h1`, className: `label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] }));
+                } }), !hideMessage && _jsx(With, { tag: `h1`, className: `label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] }));
 });
 export default Cover;

package/dist/comps/drawer.d.ts

@@ -8,7 +8,7 @@ export interface DrawerProps {
     prerender?: boolean;
 }
 export interface DrawerHandler {
-    open: () => void;
+    open: (child?: string | ReactNode | ReactNode[]) => void;
     close: () => void;
 }
 declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<DrawerHandler>>;

package/dist/comps/drawer.js

@@ -6,7 +6,7 @@ const Drawer = forwardRef((props, ref) => {
     const { as, from, speed, children, prerender, ...rest } = props;
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
-    const render = useMemo(() => prerender || true, []);
+    const [content, setContent] = useState(children);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -22,7 +22,9 @@ const Drawer = forwardRef((props, ref) => {
         }
     }, []);
     useImperativeHandle(ref, () => ({
-        open() {
+        open(child) {
+            if (child)
+                setContent(child);
             setVisible(true);
         },
         close() {
@@ -42,6 +44,6 @@ const Drawer = forwardRef((props, ref) => {
                     when: visible,
                     curve: TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
-                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, visible && children] })] });
+                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, visible && content] })] });
 });
 export default Drawer;

package/dist/comps/editor.d.ts

@@ -0,0 +1,12 @@
+import { BaseProps } from "../types/interfaces";
+import { dynamicObject } from "../types";
+export interface EditorProps {
+    title: string;
+    attrs: dynamicObject;
+    element: string;
+}
+export interface EditorHandler {
+    show: () => void;
+}
+declare const ComponentEditor: import("react").ForwardRefExoticComponent<EditorProps & BaseProps & import("react").RefAttributes<EditorHandler>>;
+export default ComponentEditor;

package/dist/comps/editor.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import With from "./base";
+import Pencil from "../media/edit-ui";
+import { TRANSITIONS } from "../types/enums";
+import Lexer from "../funs/lexer";
+import { copyToClipboard } from "../funs";
+import { useMounted } from "../hooks";
+const ComponentEditor = forwardRef((props, ref) => {
+    const [visible, setVisible] = useState(false);
+    const [code, setCode] = useState(false);
+    const { title, attrs, element } = props;
+    const mounted = useMounted(500);
+    const getVariable = (v) => {
+        const a = getComputedStyle(document.querySelector(element)).getPropertyValue(`--${v}`).trim();
+        const b = getComputedStyle(document.body).getPropertyValue(`--${v}`).trim();
+        const d = getComputedStyle(document.documentElement).getPropertyValue(`--${v}`).trim();
+        return a || b || d;
+    };
+    const expandHex = (hex) => {
+        if (hex.length === 4) {
+            return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+        }
+        return hex;
+    };
+    const rangeSlider = (k, value, min, max, step, unit) => {
+        return _jsxs(_Fragment, { children: [_jsx(With, { tag: `input`, type: `range`, defaultValue: value, min: min, max: max, step: step, name: `editor-prop-range-${k}`, onChange: (e) => {
+                        document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}${unit || ``}`);
+                        document.querySelector(`input[name="editor-prop-num-${k}"]`).value = e.currentTarget.value;
+                    } }), _jsx(With, { tag: `input`, type: `number`, name: `editor-prop-num-${k}`, defaultValue: value, min: min, max: max, onChange: (e) => {
+                        document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}${unit || ``}`);
+                        document.querySelector(`input[name="editor-prop-range-${k}"]`).value = e.currentTarget.value;
+                    } })] });
+    };
+    const colorPicker = (k, value) => {
+        return _jsxs(_Fragment, { children: [_jsx(With, { tag: `input`, type: `color`, defaultValue: expandHex(value.toString()), name: `editor-prop-color-${k}`, onChange: (e) => {
+                        document.querySelector(element).style.setProperty(`--${k}`, e.currentTarget.value);
+                        document.querySelector(`input[name="editor-prop-num-${k}"]`).value = e.currentTarget.value;
+                    } }), _jsx(With, { tag: `input`, name: `editor-prop-num-${k}`, defaultValue: expandHex(value.toString()), onChange: (e) => {
+                        document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}`);
+                        document.querySelector(`input[name="editor-prop-color-${k}"]`).value = e.currentTarget.value;
+                    } })] });
+    };
+    const build = (at) => {
+        const comps = [];
+        Object.keys(at)
+            .forEach((k) => {
+            if (k.startsWith('@group')) {
+                comps.push(_jsxs(With, { className: `group flex cols`, children: [_jsx(With, { tag: `h1`, as: `glabel`, children: at[k].label }), _jsx(With, { className: `gprops flex cols`, children: build(at[k].pops) })] }, `egroup-${k}`));
+            }
+            else {
+                const { label, value, min, max, type, step, unit } = Lexer(at[k]);
+                comps.push(_jsxs(With, { className: `prop flex aic`, children: [_jsxs(With, { className: `pop flex cols`, children: [_jsx(With, { tag: `h1`, as: `label`, children: label.split(`,`).join(` `) }), _jsx(With, { tag: `h1`, as: `l-k`, children: k })] }), _jsxs(With, { className: `pop flex aic`, children: [type == `range` && rangeSlider(k, value == `auto` ? parseFloat(getVariable(k)) : value, min, max, step || 1, unit), type == `color` && colorPicker(k, value == `auto` ? getVariable(k) : value)] })] }, `el-${k}-${label}`));
+            }
+        });
+        return comps;
+    };
+    const getCode = (at) => {
+        const c = [];
+        Object.keys(at)
+            .forEach((k) => {
+            if (k.startsWith('@group')) {
+                c.push(...getCode(at[k].pops));
+            }
+            else {
+                const { label, value, min, max, type, step, unit } = Lexer(at[k]);
+                c.push(`--${k}: ${value == `auto` ? type == `range` ? parseFloat(getVariable(k)) : getVariable(k) : value}${unit || ``};`);
+            }
+        });
+        return c;
+    };
+    if (!mounted)
+        return null;
+    return _jsxs(With, { as: `comp-editor fixed`, children: [_jsx(With, { tag: `button`, as: `pencil`, onClick: (e) => setVisible(!visible), children: !visible ?
+                    _jsx(With, { tag: `img`, src: `data:image/png;base64,${Pencil}` })
+                    : _jsx(With, { tag: `span`, children: "\u00D7" }) }), _jsxs(With, { as: `editor-props fixed`, "aria-hidden": !visible, animate: {
+                    transition: TRANSITIONS.SlideInRight,
+                    when: visible,
+                    duration: 0.1,
+                }, children: [_jsxs(With, { as: `editor-head flex aic`, children: [_jsxs(With, { tag: `h1`, className: `head-label`, children: [title, " Editor"] }), _jsx(With, { className: `head-action`, children: _jsx(With, { tag: `button`, onClick: (e) => setCode(!code), children: code ? `Edit` : `Get Code` }) })] }), _jsx(With, { as: `editor-body flex cols rel`, children: code ? _jsxs(_Fragment, { children: [_jsx(With, { tag: `textarea`, children: getCode(attrs).join(`\n`) }), _jsx(With, { tag: `button`, className: `copy abs`, onClick: (e) => copyToClipboard(getCode(attrs).join(`\n`)).then(() => {
+                                        document.querySelector(`.comp-editor .editor-props .editor-body .copy`).textContent = `Copied`;
+                                        setTimeout(() => document.querySelector(`.comp-editor .editor-props .editor-body .copy`).textContent = `Copy`, 3000);
+                                    }), children: "Copy" })] }) : build(attrs) })] })] });
+});
+export default ComponentEditor;

package/dist/comps/input.d.ts

@@ -2,6 +2,7 @@ import { animationProps } from "./base";
 import { FORMVALIDATION } from "../types/enums";
 declare const Input: import("react").ForwardRefExoticComponent<{
     required?: FORMVALIDATION;
+    textarea?: any;
     as?: string;
     animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/comps/input.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import With from "./base";
 const Input = forwardRef((props, ref) => {
-    const { as, ...rest } = props;
-    return _jsx(With, { tag: `input`, as: as, ...rest, ref: ref });
+    const { as, textarea, value, ...rest } = props;
+    return textarea ? _jsx(With, { tag: `textarea`, as: as, ...rest, value: value, ref: ref })
+        : _jsx(With, { tag: `input`, as: as, value: value, ...rest, ref: ref });
 });
 export default Input;

package/dist/comps/select.js

@@ -19,7 +19,7 @@ const Select = forwardRef((props, ref) => {
             setChoosing(false);
         });
     }, []);
-    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: true, id: _id, className: `zuz-select-options abs flex cols`, style: {
+    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: "true", id: _id, className: `zuz-select-options abs flex cols`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { height: 0, opacity: 0 },

package/dist/comps/sheet.d.ts

@@ -1,20 +1,22 @@
 import { ReactNode } from "react";
-import { animationProps } from "./base";
-import { SHEET } from "../types/enums";
+import { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { BaseProps } from "../types/interfaces";
 export interface SheetProps {
-    as?: string;
-    animate?: animationProps;
     title?: string;
     message?: string | ReactNode;
+    transition?: TRANSITIONS;
+    curve?: TRANSITION_CURVES;
+    speed?: Number;
+    type?: SHEET;
 }
 export interface SheetActionHandler {
     label: string;
     handler: () => void;
 }
 export interface SheetHandler {
-    showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler, onShow?: () => void) => void;
+    showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;
     show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
     hide: () => void;
 }
-declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<SheetHandler>>;
+declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & BaseProps & import("react").RefAttributes<SheetHandler>>;
 export default Sheet;

package/dist/comps/sheet.js

@@ -1,18 +1,22 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
-import { SHEET } from "../types/enums";
+import { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 import Cover from "./cover";
+import { animationTransition } from "../funs/css";
+import useComponentEditor from "../hooks/useCompEditor";
+import ComponentEditor from "./editor";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { as, ...rest } = props;
+    const { as, transition, curve, speed, editor, type, ...rest } = props;
+    const _editor = useComponentEditor();
     const [visible, setVisible] = useState(false);
     const [title, setTitle] = useState(``);
     const [msg, setMsg] = useState(``);
     const [action, setAction] = useState(null);
-    const [_errorType, setErrorType] = useState(SHEET.Default);
+    const [_errorType, setErrorType] = useState(type || SHEET.Default);
     const [loading, setLoading] = useState(false);
     const divRef = useRef(null);
     const lastTransform = useRef(null);
@@ -82,29 +86,98 @@ const Sheet = forwardRef((props, ref) => {
             setVisible(false);
         }
     }));
+    const buildAnimation = () => {
+        const base = {
+            when: visible,
+            duration: speed || 0.3,
+            delay: 0.1,
+        };
+        if (_errorType == SHEET.Dialog) {
+            if (transition) {
+                const { from, to } = animationTransition(transition);
+                return {
+                    from: { ...from, x: `-50%`, y: `-50%` },
+                    to: { ...to, x: `-50%`, y: `-50%` },
+                    curve: curve || TRANSITION_CURVES.EaseInOut,
+                    ...base
+                };
+            }
+            return {
+                from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
+                to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
+                curve: TRANSITION_CURVES.Spring,
+                ...base
+            };
+        }
+        else {
+            return {
+                from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
+                to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
+                curve: TRANSITION_CURVES.Spring,
+                ...base
+            };
+        }
+    };
+    const sheetProps = useMemo(() => ({
+        "sheet-radius": `label:Radius type:range value:auto min:0 max:50 unit:px`,
+    }), []);
+    const toastProps = useMemo(() => ({
+        "sheet-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
+        "sheet-font-size": `label:Font,Size type:range value:auto min:12 max:72 unit:px`,
+    }), []);
+    const dialogProps = useMemo(() => ({
+        "sheet-bg": `label:Background type:color value:auto`,
+        "@group-Head": {
+            label: "Head",
+            pops: {
+                "sheet-title-opacity": `label:Opacity type:range value:auto min:0 max:1 step:0.1`,
+                "sheet-head-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
+            }
+        },
+        "@group-Body": {
+            label: "Body",
+            pops: {
+                "sheet-body-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
+            }
+        },
+        "@group-Footer": {
+            label: "Footer",
+            pops: {
+                "sheet-footer": `label:Background type:color value:auto`,
+                "sheet-footer-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
+                "@group-Action": {
+                    label: "Footer Action",
+                    pops: {
+                        "sheet-action": `label:Background type:color value:auto`,
+                        "sheet-action-color": `label:Text,Color type:color value:auto`,
+                        "sheet-action-hover": `label:Hover,Color type:color value:auto`,
+                        "sheet-action-radius": `label:Radius type:range value:auto min:0 max:50 unit:px`,
+                    }
+                }
+            }
+        },
+        "@group-Close": {
+            label: "Close Button",
+            pops: {
+                "sheet-closer-font-size": `label:Size type:range value:auto min:8 max:72 step:2 unit:px`,
+                "sheet-closer-color": `label:Color type:color value:auto`,
+                "sheet-closer-opacity": `label:Opacity type:range value:auto min:0 max:1 step:0.1`,
+                "sheet-closer-hover-opacity": `label:Hover,Opacity type:range value:auto min:0 max:1 step:0.1`,
+            }
+        }
+    }), []);
     useEffect(() => {
     }, []);
-    return _jsxs(_Fragment, { children: [_errorType == SHEET.Dialog && _jsx(With, { className: `zuz-sheet-overlay fixed fill`, animate: {
-                    from: { y: `-100vh`, opacity: 0 },
-                    to: { y: 0, opacity: 1 },
-                    when: visible,
-                    duration: 0.1,
-                } }), _jsxs(With, { animate: _errorType == SHEET.Dialog ? {
-                    from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
-                    to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
-                    when: visible,
-                    duration: 0.3,
-                    delay: 0.1,
-                    curve: `spring`
-                } : {
-                    from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
-                    to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
-                    when: visible,
-                    duration: 0.3,
-                    delay: 0.1,
-                    curve: `spring`
-                }, as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_errorType == SHEET.Dialog && _jsx(Cover, { ...({
-                            when: loading,
-                        }) }), _errorType == SHEET.Dialog && _jsxs(With, { className: `zuz-sheet-head flex aic rel`, children: [_jsx(With, { className: `zuz-sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `zuz-sheet-closer abs`, children: "\u00D7" })] }), visible && msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg] })] });
+    if (_errorType == SHEET.Dialog) {
+        return _jsxs(_Fragment, { children: [_jsx(With, { "aria-hidden": !visible, className: `zuz-overlay fixed fill`, animate: {
+                        transition: TRANSITIONS.FadeIn,
+                        when: visible,
+                        duration: 0.1,
+                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel`, children: msg }), action && _jsx(With, { className: `sheet-footer flex aic rel`, children: action.map((a, i) => _jsx(With, { onClick: a.handler, tag: `button`, as: `sheet-action-btn`, children: a.label })) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
+                        ...sheetProps,
+                        ...(_errorType == SHEET.Dialog ? dialogProps : toastProps)
+                    } })] });
+    }
+    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
 });
 export default Sheet;

package/dist/comps/tabview.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { BaseProps } from "../types/interfaces";
+export interface Tab {
+    onSelect: (index: number) => void;
+    label: string;
+    body: string | ReactNode | ReactNode[];
+    render?: boolean;
+}
+export interface TabViewProps {
+    speed?: number;
+    tabs: Tab[];
+}
+export interface TabViewHandler {
+    setTab: (index: number) => void;
+}
+declare const TabView: import("react").ForwardRefExoticComponent<TabViewProps & BaseProps & import("react").RefAttributes<TabViewHandler>>;
+export default TabView;

package/dist/comps/tabview.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import With from "./base";
+import { uuid } from "../funs";
+import { useResizeObserver } from "../hooks";
+import ComponentEditor from "./editor";
+const TabView = forwardRef((props, ref) => {
+    const { as, tabs, speed, ...rest } = props;
+    const tabview = useRef(null);
+    const tabViewID = useMemo(() => uuid(), []);
+    const [activeTab, setActiveTab] = useState(0);
+    const size = useResizeObserver(tabview);
+    const handleTabClick = (index) => {
+        setActiveTab(index);
+    };
+    useEffect(() => {
+    }, []);
+    return _jsxs(_Fragment, { children: [_jsxs(With, { ref: tabview, className: `tabview flex cols`, ...rest, children: [_jsx(With, { className: `tab-head flex aic`, children: tabs.map((tab, index) => _jsx(With, { tag: `button`, className: `tab-label rel ${index === activeTab ? 'active' : ''}`.trim(), onClick: () => {
+                                handleTabClick(index);
+                                tab.onSelect && tab.onSelect(index);
+                            }, children: tab.label }, `tab-label-${tabViewID}-${index}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
+                                return _jsx(With, { className: `tab-body rel`, style: {
+                                        width: size.width,
+                                        minWidth: size.width,
+                                        maxWidth: size.width,
+                                        opacity: index === activeTab ? 1 : 0,
+                                        transition: 'opacity 0.5s ease',
+                                    }, children: tab.body }, `tab-body-${tabViewID}-${index}`);
+                            }) }) })] }), props.editor && _jsx(ComponentEditor, { element: `.tabview`, title: `TabView`, attrs: {
+                    "@group-Head": {
+                        label: "Head",
+                        pops: {
+                            "tab-head": `label:Color type:color value:auto`,
+                            "tab-head-padding": `label:Padding type:range value:auto min:0 max:50 unit:px`,
+                        }
+                    },
+                    "@group-Tabs": {
+                        label: "Tabs",
+                        pops: {
+                            "tab": `label:Tab type:color value:auto`,
+                            "tab-active": `label:Active type:color value:auto`,
+                            "tab-hover": `label:Hover type:color value:auto`,
+                        }
+                    },
+                } })] });
+});
+export default TabView;

package/dist/comps/textwheel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { forwardRef } from 'react';
 import With from "./base";
 const TextWheel = forwardRef((props, ref) => {
@@ -29,7 +29,10 @@ const TextWheel = forwardRef((props, ref) => {
             }
         }
     }));
-    return _jsxs(With, { className: `text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
+    useEffect(() => {
+        _setValue(value || 0);
+    }, [value]);
+    return _jsxs(With, { className: `text-wheel flex aic jcc rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
                     return _jsx(With, { tag: `span`, className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }
@@ -40,7 +43,7 @@ const TextWheel = forwardRef((props, ref) => {
                                 : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).map((val, indx) => {
                                 return _jsx(With, { tag: `span`, children: val }, `${index}--${indx}`);
                             }), _jsx(With, { tag: `span`, children: !direction || direction == `down` ? 9 : 0 })] }) }, `wheel-char-${index}`);
-            }), color && _jsx(With, { className: `abs fill`, style: {
+            }), color && _jsx(With, { className: `abs fillx`, style: {
                     zIndex: 1,
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });

package/dist/funs/css.d.ts

@@ -33,7 +33,6 @@ declare class CSS {
     makeUnit(k: string, v: any): any;
     makeValue(k: string, v: any): string;
     calcIndexes(str: string): string;
-    makeID2(k: string, v: string, _out: string): string;
     makeID(k: string, v: string, _out: string): string;
     lexer(line: string): dynamicObject;
     processLine(line: string): void;
@@ -46,4 +45,8 @@ declare class CSS {
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
 export declare const getAnimationCurve: (curve?: string | TRANSITION_CURVES) => string;
+export declare const animationTransition: (transition: TRANSITIONS) => {
+    from: {};
+    to: {};
+};
 export declare const getAnimationTransition: (transition: TRANSITIONS, to?: boolean, from?: boolean) => dynamicObject;

package/dist/funs/css.js

@@ -335,9 +335,20 @@ class CSS {
                 if (v.includes(`,`)) {
                     let __v = [];
                     v.split(`,`).map((_) => {
+                        if (_.charAt(0) == `#`) {
+                            _ = _.substring(1);
+                        }
                         if (_.startsWith(`$`)) {
                             __v.push(`var(--${_.substring(1)})`);
                         }
+                        else if (isColor(`#${_}`)) {
+                            if (_.includes(`rgb`) || _.includes(`rgba`)) {
+                                __v.push(_.replace(`[`, `(`).replace(`]`, `)`));
+                            }
+                            else {
+                                __v.push(isHexColor(`#${_}`) ? `#${_}` : _);
+                            }
+                        }
                         else {
                             __v.push(`${_}${this.makeUnit(key, _)}`);
                         }
@@ -363,7 +374,7 @@ class CSS {
         }
         return _indices.join(``);
     }
-    makeID2(k, v, _out) {
+    makeID(k, v, _out) {
         const self = this;
         const md = md5(_out);
         let _ = [];
@@ -387,7 +398,7 @@ class CSS {
         const out = _out.replace(/\s+/g, ``).trim();
         const [_ok, _ov] = out.split(`:`);
         const ok = _ok.trim();
-        const ov = _ov.trim();
+        const ov = _ov ? _ov.trim() : v;
         if (ov == ``) {
             throw new TypeError(`${ok} value is empty.`);
         }
@@ -400,26 +411,6 @@ class CSS {
         const ai = md.split(``).reduce((acc, char) => acc + self.chars.indexOf(char), 0);
         return `${_cp}${self.hashids.encode(io, ai)}`;
     }
-    makeID(k, v, _out) {
-        const self = this;
-        return self.makeID2(k, v, _out);
-        const _css = _out.toString().replace(/;|:|\s/g, "");
-        let _indices = 0;
-        for (let i = 0; i < _css.length; i++) {
-            _indices += self.chars.indexOf(_out.charAt(i));
-        }
-        let _cp = k.substring(0, 1);
-        if (self.PROPS[k]?.indexOf("-") > -1) {
-            _cp = "";
-            self.PROPS[k].split("-").map((c) => _cp += c.substring(0, 1));
-        }
-        if (v.toString().indexOf("-") > -1) {
-            v.toString().split("-").map(c => _cp += c.substring(0, 1));
-        }
-        const _id = `${_cp}${self.hashids.encode((self.PROPS[k] ? self.PROPS[k].length : 0) + _indices + (isNaN(parseInt(v)) ? 0 : parseInt(v)))}`.replace(/\s|\$/g, '-');
-        const _kw = _id in self.propCounter ? ++self.propCounter[_id] : self.propCounter[_id] = 1;
-        return _id;
-    }
     lexer(line) {
         const self = this;
         let word = ``;
@@ -673,8 +664,9 @@ export const getAnimationCurve = (curve) => {
             return `linear`;
     }
 };
-export const getAnimationTransition = (transition, to, from) => {
-    let _from, _to;
+export const animationTransition = (transition) => {
+    let _from = {};
+    let _to = {};
     switch (transition) {
         case TRANSITIONS.SlideInLeft:
         case TRANSITIONS.SlideInRight:
@@ -695,5 +687,9 @@ export const getAnimationTransition = (transition, to, from) => {
             _to = { opacity: 1 };
             break;
     }
+    return { from: _from, to: _to };
+};
+export const getAnimationTransition = (transition, to, from) => {
+    const { from: _from, to: _to } = animationTransition(transition);
     return to ? { ..._from, ..._to } : from ? _from : _to;
 };

package/dist/funs/events.d.ts

@@ -1,13 +1,14 @@
 export interface Event {
     event: String | Symbol;
     listeners: (() => void)[];
+    context?: any;
 }
 declare class Events {
     _events: Event[];
     constructor();
-    addEvent(event: String | Symbol, fun: (...args: any[]) => void): number | undefined;
+    addEvent(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
     removeEvent(event: String | Symbol, fun: (...args: any[]) => void): void;
-    on(event: String | Symbol, fun: (...args: any[]) => void): number | undefined;
+    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
     off(event: String | Symbol, fun: (...args: any[]) => void): void;
     emit(event: String | Symbol, ...args: any[]): void;
 }

package/dist/funs/events.js

@@ -3,10 +3,10 @@ class Events {
     constructor() {
         this._events = [];
     }
-    addEvent(event, fun) {
+    addEvent(event, fun, context) {
         const evt = this._events.find(x => x.event == event);
         if (!evt) {
-            return this._events.push({ event: event, listeners: [fun] });
+            return this._events.push({ event: event, listeners: [fun], context });
         }
         if (!evt.listeners.find(x => x == fun)) {
             evt.listeners.push(fun);
@@ -18,21 +18,21 @@ class Events {
             evt.listeners = evt.listeners.filter(x => x != fun);
         }
     }
-    on(event, fun) {
-        return this.addEvent(event, fun);
+    on(event, fun, context) {
+        return this.addEvent(event, fun, context);
     }
     off(event, fun) {
         this.removeEvent(event, fun);
     }
     emit(event, ...args) {
-        const self = this;
         const evt = this._events.find(x => x.event == event);
         if (evt) {
             evt.listeners.forEach((f) => {
                 try {
-                    f.apply(self, args);
+                    f.apply(evt.context || self, args);
                 }
                 catch (e) {
+                    console.error(e);
                 }
             });
         }

package/dist/funs/index.js

@@ -52,7 +52,7 @@ export const hexToRgba = (hex, alpha = 1) => {
 };
 export const ucfirst = (str) => `${str.charAt(0).toUpperCase()}${str.substring(1, str.length)}`;
 export const cleanProps = (props, withProps = []) => {
-    let _extras = [`as`, ...withProps];
+    let _extras = [`as`, `editor`, ...withProps];
     let _props = { ...props };
     Object.keys(_props).map(k => {
         if (k in cssProps) {

package/dist/funs/lexer.d.ts

@@ -0,0 +1,3 @@
+import { dynamicObject } from "../types";
+declare const Lexer: (line: string) => dynamicObject;
+export default Lexer;

package/dist/funs/lexer.js

@@ -0,0 +1,37 @@
+const Lexer = (line) => {
+    let word = ``;
+    let hasBracket = false;
+    let classes = {};
+    const processWord = () => {
+        word = word.trim();
+        if (!word.includes(`[`))
+            word = word.replace(/\s+/g, ``);
+        if (word == ``)
+            return;
+        const [key, value] = word.split(`:`);
+        classes[key] = value;
+        word = ``;
+    };
+    line
+        .replace(/\`|\}|\{/g, ``)
+        .trim()
+        .replace(/\s+/g, ` `)
+        .split(``)
+        .map((char, i, arr) => {
+        const nextChar = arr[i + 1];
+        if (char == ` ` && word != ``) {
+            processWord();
+        }
+        else {
+            word += char;
+            if (char == `[`)
+                hasBracket = true;
+            if (char == `]` && hasBracket)
+                hasBracket = false;
+        }
+    });
+    if (word != ``)
+        processWord();
+    return classes;
+};
+export default Lexer;

package/dist/funs/stylesheet.js

@@ -132,8 +132,11 @@ export const cssProps = {
     "gridRowStart": "grid-row-start",
     "gridTemplate": "grid-template",
     "gridTemplateAreas": "grid-template-areas",
+    "grid-areas": "grid-template-areas",
     "gridTemplateColumns": "grid-template-columns",
+    "grid-cols": "grid-template-columns",
     "gridTemplateRows": "grid-template-rows",
+    "grid-rows": "grid-template-rows",
     "hangingPunctuation": "hanging-punctuation",
     "hyphens": "hyphens",
     "isolation": "isolation",
@@ -280,6 +283,8 @@ export const cssDirect = {
     "translate": "transform: translate(__VALUE__);",
     "translateX": "transform: translateX(__VALUE__);",
     "translateY": "transform: translateY(__VALUE__);",
+    "x": "transform: translateX(__VALUE__);",
+    "y": "transform: translateY(__VALUE__);",
     "rotate": "transform: rotate(__VALUE__);",
     "scale": "transform: scale(__VALUE__);",
     "anim": "transition: all __VALUE__ __CURVE__ __DELAY__;",

package/dist/hooks/index.d.ts

@@ -2,4 +2,6 @@ export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
 export { default as useWindowFocus } from './useWindowFocus';
+export { default as useResizeObserver } from './useResizeObserver';
+export { default as useIntersectionObserver } from './useIntersectionObserver';
 export * from './usePubSub';

package/dist/hooks/index.js

@@ -2,4 +2,6 @@ export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
 export { default as useWindowFocus } from './useWindowFocus';
+export { default as useResizeObserver } from './useResizeObserver';
+export { default as useIntersectionObserver } from './useIntersectionObserver';
 export * from './usePubSub';

package/dist/hooks/useCompEditor.d.ts

@@ -0,0 +1,2 @@
+declare const useComponentEditor: () => void;
+export default useComponentEditor;

package/dist/hooks/useCompEditor.js

@@ -0,0 +1,5 @@
+import { useState } from "react";
+const useComponentEditor = () => {
+    const [visible, setVisible] = useState(false);
+};
+export default useComponentEditor;

package/dist/hooks/useInteractionObserver.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface IntersectionObserverOptions {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+declare const useIntersectionObserver: (ref: RefObject<HTMLElement | null>, options?: IntersectionObserverOptions) => number;
+export default useIntersectionObserver;

package/dist/hooks/useInteractionObserver.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+const useIntersectionObserver = (ref, options = {}) => {
+    const [intersectionRatio, setIntersectionRatio] = useState(0);
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                setIntersectionRatio(entry.intersectionRatio);
+            });
+        }, options);
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, options]);
+    return intersectionRatio;
+};
+export default useIntersectionObserver;

package/dist/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface IntersectionObserverOptions {
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+}
+declare const useIntersectionObserver: (ref: RefObject<HTMLElement | null>, options?: IntersectionObserverOptions) => number;
+export default useIntersectionObserver;

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+const useIntersectionObserver = (ref, options = {}) => {
+    const [intersectionRatio, setIntersectionRatio] = useState(0);
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                setIntersectionRatio(entry.intersectionRatio);
+            });
+        }, options);
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, options]);
+    return intersectionRatio;
+};
+export default useIntersectionObserver;

package/dist/hooks/usePubSub.d.ts

@@ -1,3 +1,3 @@
-declare const useSub: (event: String | Symbol, fun: () => void) => () => void;
+declare const useSub: (event: String | Symbol, fun: () => void, context?: any) => () => void;
 declare const usePub: () => (event: String | Symbol) => void;
 export { useSub, usePub };

package/dist/hooks/usePubSub.js

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
 import Events from "../funs/events";
 const events = new Events();
-const useSub = (event, fun) => {
+const useSub = (event, fun, context) => {
     const unsubscribe = () => {
         events.off(event, fun);
     };
     useEffect(() => {
-        events.on(event, fun);
+        events.on(event, fun, context);
         return;
     }, []);
     return unsubscribe;

package/dist/hooks/useResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+interface Size {
+    width: number;
+    height: number;
+}
+declare const useResizeObserver: (ref: RefObject<HTMLElement | null>) => Size;
+export default useResizeObserver;

package/dist/hooks/useResizeObserver.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+const useResizeObserver = (ref) => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const handleResize = (entries) => {
+            for (let entry of entries) {
+                const { width, height } = entry.contentRect;
+                setSize({ width, height });
+            }
+        };
+        const resizeObserver = new ResizeObserver(handleResize);
+        if (ref.current) {
+            resizeObserver.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                resizeObserver.unobserve(ref.current);
+            }
+        };
+    }, [ref]);
+    return size;
+};
+export default useResizeObserver;

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,2 @@
+declare const useToast: () => import("react/jsx-runtime").JSX.Element;
+export default useToast;

package/dist/hooks/useToast.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import Sheet from "../comps/sheet";
+const useToast = () => {
+    const sheet = useRef(null);
+    useEffect(() => {
+    }, []);
+    return _jsx(Sheet, { ref: sheet });
+};
+export default useToast;

package/dist/index.d.ts

@@ -17,5 +17,6 @@ export { default as Input } from "./comps/input";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
+export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
-export { DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";
+export { CHECKBOX, DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";

package/dist/index.js

@@ -17,5 +17,6 @@ export { default as Input } from "./comps/input";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
+export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
-export { DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";
+export { CHECKBOX, DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";

package/dist/media/edit-ui.d.ts

@@ -0,0 +1,2 @@
+declare const Pencil = "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";
+export default Pencil;

package/dist/media/edit-ui.js

@@ -0,0 +1,2 @@
+const Pencil = "iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAeEUlEQVR42u2dCXSURRLHrZpkEpJwhkMwciMIooIHghcqisB6X6iIsnKsKOCBuqIoIqDgeoCK4i3rxSEeiIKLoqKArisgC4IIKC63Rm4CJJn99/M/vnr9JjAJJEPC9733ewNhqHR/1Ud1dXX1Ie3atQ2D5EP24XH/H4QdgbxSJi94GYG84GUE8oKXEcgLXkYgL3gZgbzgZZSAvCOOaJhesWKFLBGZiR/PAI0D5R8k8po2bZymqpNFZBV+HAHTwSJwJygXKL+MysvKqlUxFArdBPqKyAYqfwv4AFwEHgHLwG2gWqD8MiavSpXK1UXkBxCh8n8FuSBCFoAxYBXIAW+Cs0ESRf1NROo3adKoXKD8UiavTZtWKej594pIPpX9BBCQAlqDz6j8mWA7iBh+B+PBJhHJUdVX0Jhq4PONNm1ODO9r+QJlFbO82rWzKjhlmZ4/jF8Jgz7gG3AciD6ZoD/43jYEEfkTVX0Xn7/h5733tXyBsopRXoUK5Wur6ldU/m7wOLgEXA1+AJP3Mt+fAsaIyGoQsZjG8Qt4FhxZlPoGyiomeampKSeKyC9U1mbQkVb+o2AbGAAuB9eAK0Fn0BbU9OW5KQRPG0wjQ0VkCRVv2cRpZBiQwtQ3UFYxyEtOTrpcRLZS+SvBsaANWMIl3zEFiKjOXn816A2F3wruBHeAu0BP/PwqsBW8BSLkzaLWN1D+fpRnjT0q/zfO70M5BTwF0opavqSkpPL4p8rgbpALlplpoEqg/ATKs8aegz20I4fnteBtDvHhfShfGAzzlo/r+DkhUH6C5JUvn1FHVb82yh8O+nJJN469M8Th/V4ag3eBk0BSnOU7Csw3is8Dq7ik/JY/u7XQ9Q2Uv2/ynHHm3LpUvnPg3A7ep5fvOlDQ0wD0A6+w944JhfTupKRQr3A4+WwM99eA8/ndXp5/IBucB5rQwLwDrOS/3VKo+gbKL9rDObmriGyn8tfSnfs/sBA0Koy8tLS0hsnJyedCZjc2KKfM2WwcEcO/QT0QfS4FO0BPOo3yQZ+46xsov/BPy5bHwNjTEUJjD3yHH79IQ28EDb8LwWW0AyrEU75KlSrWUtXPqfxckOMp/0mQAvxnGFjPJeUWVy4Yo32CmMBikFe9etXK9MRFyCz2ytX03ftPZXAxuInzfmcO3cme3+A4EVlB5ftsAleAgp4QmAqWYgq5WkR2gHz8uXewV7C/5HGYVpXvqPh88DU3dd4H1eIQIeBYztNjVeUD15iA8/ZtKUD5c+OZTtDjq4jIj87z6OwHEckFzlDswq+0BTcHyi/iEw6HW4vIGhAhP3Hu7Quk6H4DHW5WDz5Pg9R45aWmph4rIhtVdQoYShm7wUWcJr4PlF+EBz3qEhHZ5vniF3EJNhIMBO1ApXjLV7du7fKq+qqRZ9kMOhelvjAkO4nIbi4/P6K8HDATZAfKL8TDobW/G0o95Y/xPHpZNMCe50t/k8vBM0FFv3w09r4w8vwh/4h9rO+NxkW82MjOB6mB8uN4ELMXUtXRVvHgdxp0e3vq0AfwIofdH8A7qjoCDeoWEVlWgPKfAqn7qb6jKHMo2AgipEmg/L0P+RluHvWUv0oEnrwiPNgcSocN0coFc8Ta0qWCLt3P9Q1x1dEUPAgi5DNQMVB+AY+q1hKRuV4AxugUPPjnhqA9OBd0AK1BSnxOo1BPEdkVQ/lfg/rFXN96HP4j5DeQEijfe0TkaOEePtmE0eDKPfyXTFrYPbjE6uj3Lhe2RadRhNj5+DEQLqH6fgEi5H0ggfLtg14tIpuNov6HTn9sYQYPegDv5GbPI5jve6jqRCPT9sDzS7C+J4NsEOFqIBzEBPLh08stncyQ/1zNmjUqiogzmFqAE8GpoEa8AtPT0xqIyM8xlP8lqF2C9e0EtoEIeTuICTS9FtjheRuG/OsLkBcCx9NY6wp6cUeurv9FuHWbi8hyT/n5YDhIKsH6XgN2UfEL+TkviAnEw/i8CUZJPzh/fCHkCWjGhjCKPoBnMN8PdMtFT/nrQYcSru8tbHR5oA+4i9HFm4KYQOzpgNlmyH87JSV8MvbhT+NQ37CITqNb/9whJFx2HVaC9RUwjL19J4gasVcLy1S5cqVDD+bIoCaAjhjZDaXd7nzynrzDwZnstRezUaQXJBBuXVHVB63iuREzBCSVYH1D4Dkqfytoz5+f4fYuhGVzEcsHq/LbgmyhYwfOmbZxyqsNrjJD6SDQHXQUkeaqOs5TvovTO6eE65tiIoV/Ba04zT3mRiXuOEYcaPS9DkbldwU7+RKWlyuXesw+yEuih+0mu3ogs5wzqYTrWwF8YiKEm9JgXcTgkP5ulBORHWZaegZ0PRhiAoU9Nv+P1q+PuvP5aADNMeefjp+fBtznsYUZrkXkSN/Sd1HBGFVSS7i+h4K5xtKvDfqysediVdM9Kk9E/svvPQoUNC/rMYFhMJbW7xa8jKv3IK86XbyX0HC6AhwJYv3eszxLH71MBzlboITr2xAsM/6FumA86xuB+/lGT95rgCHrZT8msAr4FHCJl9qikPLKcXToDx40e/8PWp8+2OHCsBJQ3+PMmYD3GGL+A+u7wuUicG5ttwfhYhj5f57n978p6zGBjaL74Ko6uWrVzGp4IfeBPlgCVS9i0QQ86c33a1T1xQTU92ywmcpcDaZGw8ZV5RPEG9R0stLSyh3pws4YvNLVBIj8WpYjg9qDbJCHYfk+LvHCjnLlyrlAi3vACHAW0EI4jcZb5avKfOfuTUB9rwE7TfzAK+YI+S84pFI3hrxWYBLIAxFSsSwqvz/IBdnYgz9vD/JCoCPj+O/aSwRODTDHM/bed9HBCajvPca797gx/ra60Y0hZhudoYsA1ljOrN9AhHQqS8ovB15lxRahpzcuhLzq4FbO8QPBaWaLthlYYZWPl/vYUUc1TS3h+iaZ+XsHWAl+599/xK5ly6gsKL6xqr7AKWEiR7pU2kQRQ6eyovws8A0rNQ3pU6o5g88lYwI3w/K/EJ/x9taqnCtHg8lgo1H+LhhUNySgvuXBVHM+4HMT3JHnev7xx7dI9eXRmzkUrKGx+CaIGO4rC8o/BaxlhZ6IlUBJROrTazeAPfy8OKJ3r406jUg2fAbtE1Dfw8wwvw38zwSTPOBsEFV9RlW+dbuYtWsfnhFjdPs7uBx8BSKGh0q78nvSGNoNescpLwROYkN4EgwHF5qsHAIe8HLyLMWUclQC6tsyqnCSa0aBC6y89PT0hhz2V4J7qPjDuN7PMA6jDUbegNKq/GQw2mTQOtu1fLfuJbeBniLSLA5ZmeBiGlTvgwXAGnvTuXNW0vW9CGxlHX3+Ua9enfQC5NUHY0xOAhvO1t0cLs0FI0qj8quDz1iRpSLSJJY8NIBKHOoHskdfAarsZe7/AljP3sNHH92sXALqe1d0uWZh7EILVR3vlnuo49+rVata1ZdH7+XPYCynjR5cOu6mo6gap4WTS5vyW7BiETADCsqMU56AlhwaH6fxc645sdsY/EjlR13GVyagvilUWsQjF9wBwzYclQervzUPqGYzsLSZmTbWgxv595rgdcpZCxqU1jyBnU1c23PgVBd2VUR5Vbm1+xIt6mwq37iMS7y+1enLj3jkRZdrbo4H77jzf8bAbcBGvRl8wylxgvGGzjVHzVqWxjyBIVqr+WAX6GMOQrZ0mzsOF8njDl8UsljX04j807mTmVmlWgLq2xz85CufCr0f/Ad16+Q8mqjrVSKyWFVfw2dDL84hDyzjiLEEbDJRQe1KY57ASuADVmINOLUgeSJSl8Ga14Cr+HkpW32FWIGglMv5PvQA19IlXd+zjaIsL0WPiDn3tap+CKa63u+WurRp5nATqBvYQCM2w1vv54HOpTFPYBNzqHEWOKwI8jLBKezp/Wn4DAYfGeVvxGnaixJU327RiF3DTnBDLHno/Z15JH2syQray/gF7gMzPXl9S2O2sE7mMOMLDLtqsB/Kdzj41ih/IXpXswTVdxCIeKwCbUDDveQJHMo5fQL9BLPovcz3l4ulTflC50Qe/d1/BczMUa4h5vlzHEVcl7cxHsOIqr5Vo0b1Kgmob5IJ2rQsNZHIZ6nqMBdh7LKCFyDvROMY+pbTyCIwmz/7nLuEVUqL8tPBOBb+Z3B8LHl/5MwNH8+Ay/YcLS4AJ7OHJxUw1OZQdm4opAOcnATUNw1MBhGPUXTYzFHVGlF5GRnpDVz2EFV1MQjHeXsfP4KF4FnjJs4xOQG0NOUJbGzm+69BtSLIqwFONJm4rwU9o0YkWYf5/pwE1bdqtHcatoMu5jvnOQsfMYWnWXmqWp3D+Qw6dRazk7xPOaPBONPz65SmPIHngGzOXw/T+GsHOmG+uwwv46wiLs0qgQ9BhMyGv7xegpRfD/gZvpeDN0A3L+lkK1VZoKojEdVTI8Zycadx6uTRa/ixifNLKXT5Eqj8WziPbQGXF5Bv/3CsgS92Pn5+vy+t+tag8h6ycyyyufXoO0+E8luCNZ7yP+TcnAkmOzIyMmpHZTF3UDTv399BGkfF74yMLWAr2MG/TwXJpeXu4BSuc6Op1I8ppLzy4ARwHRtFH9KDU8AqMy92SZSNY+P2DKP8MDRuXC3FZ78GDeplGHn1wHOsz4/eBRG9wQZ2oK/4uQH0PJAvlDqClv0sM9/X3I9+iL+AHWaj6OgEKr9LdLgmG6m0tziKJcfIEPqSiCzjki5EOdXAQi/J0xMghyPA+SYZ5elYLTU6kC+UOoGtNwLmgZtB/f2k/FvNsuhd9KaKCVR+f29N/l8v5vAKMB02zkW+PFr707lrd6M37E8FyzxvYYXScpVcV9M7J7IHpHIJ19/diuHO6blLFQtZ+GSzrs4FAzCHSoKULwwyjRg+BSfGSjfrtptV9SMYfifFkHeJ14jeA2+Ydf8g2ggPHejKD3EJEyHjY+XHd0e1XMgVGsJgVf0Hh8uGcRz8mEG560G7BPo1wtGgVLKbI4GALAZ4tPUbpzuepqpT3KhlduuswZcPlnrZPdKjjR9DfvKBrPwMVsy24qQ45TUCN7N3P83NnSzPd/CDkf1FApWfAaZ5+/ejQch+SVWy0MBvcHl8aexZee3AXL6jBSa750iwDuSzt2tpuUE0ixWyWanqcy3bQkRauBw8hfCgtedIMoHer2ybT9dtBSdI+dXBv72Ub3VpBE4B3UHYykMgZyM3/PMSqMqerPXA5hLaxqnz6tJ0fewJYJU3D95uM167uHo8LeDWPcUBD92ZjMff27Gty9kz8kA+X3KHBCm/vjc8P+9l+Qxx5PrE+fVr1apZyTP4juGUOIrvbB7lrPa8huvB6aVF+ZeZVhsBs0yWyjvg307ag7xU7gF0MokYz/As/Ty+kJ8Y6/elM6gSoPwWYI0Zqr/zI25sY8ew/1dVne1sHKSgrbkHg28r+NIYew3AmaBWaVD+3azINPCe2Y9eB2a5QE28iAtAV3Cd29nDjlylODN5PWaWj69yOpgEGacmQPlnmSCOlbTyK4PRJDOWPLfCwTvoznX9UxxBqv7Z8znXG7duekkE6+xPg28Dl0HDQYRM5Gc7X55zf7KnXwAuJh28CJ5UMN7YER3ATNBNVR9NgPKvMA6ezVze2qc1VyY37uGW7zD4G/jJ81puiR74AFK48iX+7uC2fBkjo63YHGJcDCPtL3Huv6c5jHfrMzO/nsoAiEEiMj8B+/n9jO0xguUcDJ61J43cNOdu+lTVWe72rwLk1aCDyN8dvHJf9JGou4NtJo5XwVq7JHIHF52r0wU0gutxvu4aZt1O3UtSpoV82QPJbrBdRNYybLuklC/gIROydWkMo/djzuWH2P18VZ0EJotIc/P9mmBRjGigE4tL+SURE/gM6EIDbreJvHmpAHmH8UVe61u43BxaBfIo9xvKc5k4uqrq1BJUfqpJq7IY3Bkzpz+zcbmwbUxt9Tx5Z7Mxv8n1/tIY0b+HJUD5xRIZ9K45ZJFThJ7a1hhY2eaETI6qjgXTmd2rJJRfz3jkPgGVTXjZlFiHLFz8gqp+7Xb2mJYl+iT7bmIyDqSVBeU3pUNkF5jBOPt3ncMDy56sOOX1+3P5SCjvMxHZ4UK3VfX1ElK+9WX8Clr4DiAauN18eW4/3yWM4lr+HJPM6Wevbm8AKSs9/2UQobLWgjXOSHNzvqp8rKpV97CZ04pzbB6ZBx5jVFAGEy//qqpfusMgJaD8K2iQ5YO7qey3GHug3vL0HjfPF5CWpRH4FxvCKs/Y65qAnl9sMYGHghwmKPqMmSj7GI9XS3q7XgeP07c/nnPfDm97uLlfeHcIUkSWq+rM4nwZNp8gy9XZ+7d+jDGs498drKrOz9Gfhzb8MC7/4Mf1CTiOV6wxgYOicz5YD5a53b0Y8sKcPy8jF9Awmronp4cL4RYRlwmjWzG+jDQwzkw79+zhwMp0cE9WVq3yUVluc0dVB3MjpwsIgRbeefzvTAdIgPKLJyYwBawVJkdmDp2HCiHvHBDeU+FVZbGTzWmkOF5GLbOhM4/G30A6tFJj3SaG5xZVmY8p6lrvCPkRNIS/9zaspoOKxd3zExETeJ1TugWW8Cn7s/AisoW7bPv7ZaSA20wWjvHeSHQuN7JaFxSwymvlFnA5m2zS1mzzvKHhhCq/uB4RmQcihl+KIV3qNvBaMbyMy8H2vVyiVJXOrZFu6zaWPFXJom/gJ/CEyeyRy42wBmVS+e5Itqd8Rr3u98Kvo9z9JU/AfTT2NjOw8kK6m1vFksXziXPc+t4t84w8/7h5hGyljYOnDCqfJ1Ze9JTvaFsMhf8CvLYv8ho2rJ/G4IxLzO7bUtDUtmlOCS+AZrHu+kUDGOiMXJeB1LNJzgM5Zj//+DKtfLfGt1escf2+DoSKofCDwEZQoTDy3MlfZtUYZ9yv+fycAnqCi1hmf9h/GLwuckibAnYxHwSr6KruDXYaS792mVY+z6p393r+MjC6mApfl3bA43uT59yviC7qwPw5ecCepImQ+4GYTac7uT2baWW5Hg6Ggi+cL4I+flu+DO+w5zRQocwr36G8+dpErjCDR7EVvh9/13AvODQEDgcXqOpTIrLSm5a2gtdNvoH5VFrjGK7dO9jIOrilXrR8zDTeV0S+ZCDqy4zS6WX2Kl4EyQeF8l3SRBHJ92LhVgItxsILeMAM4eu4fNtNJ5RlN5eOv4Dn6NhZS4dTBSp7AuhZgGu6s6pOgNIfdOnWvfJVpcE4zZRlEJCyr3yiqiNYcTv0DS+hwh8NXgErTaaPnaqySFXfxNTUjWFXm2js5XEZl+0tx4Su53Hg0Fjlwx7ECar6LHiPnstoOR8wHkMmsThIlM8tzpXeKdU14NgEXPFe3l3+YE4ThfG0Nuvw1aADPXNN2FM7xog9+Bx02Utalt7gYyfLhIO1T4DyEx4T2NYofw3IBQsPhIyjTJS8BPwGZoAx9B9Yz+T54CHPWCsHnlTVydjVq7OH+wVeMg2rRWLqm/iYwOfM3PcsPwcm+mUwf/8UEn0GgsUgy4/H45R1vpWH53xV+R49voe78t3zD0wwt3LVSUx9Ex8TmAp+Bzs5BHZmY2iQ6JchIo04Jx9l4u6+YNkmFeCV+wsY5W7WiMpyuXdV1a0E/sMo5XTwoTngUjlxykp8TOAl5uDjSM6Lcw6Ql/ESeMEYeNNM8GYSAzue9hVYrVpmFXe9iqo+4YZ/I685G9AmE72TklhlJT4yaBJ7fC6oz+mg3wFQ+OpghzFEu4MffL8+5+2PwGW+PJeBU1XdMP8o5dUwwagrwICDXfmVQY4ZClO4Fq95ALyMm8A8cyh1I128mfw8yotfGK6qk7DGbxpD3mlgltkipuIPYuXz6QEihmywmh6wtAS/jI/BEM7p7/HAhXo9vxc41CSabsH8u/9ElPGR9mSPieK5t+wpv+gxgZ+a4fBk/jnPhEy3TtDLSOHw3x6csofLkELgOhfJg2PplaPyeCp5Cp1LV5lAjsFlX/nxxwQebpQ9mEPqjmgouDkEMoVRuyX5Mprz99cC47k6OZ0RvPV8ec7Qc9e+4YBJLy+AcySIkGFlU/lFjwm8A0TIJK4GdoMjwWQwSUR4saLkuDt7uI4u7FMdVCnkyziX5TqUy9NJpsdfCwaqai0rjz3/XEb4dgP3m/qNKLvKL3pM4Hzj+dtpnCKNwMvOesYL7aQqC8wu3GRQHsTziD16DVln+PvvIlJnD+nYdplonO6euzjDRfGAoe6aFd+vEa0bebTsKr/oT3MvZckmvvBtoIOqPgk+cL+Iee7sZUcz42kEVFrjaOFhlB3t5mqe/k02SRfPKOB2rYjJNXxErJeBEO6KGPZ786LnG0AVby//RZARKN97THaPHPAMvWLfgiXuVk7MpyNUZS4bwDgOwa94yZsGgJBZZl0D/OdabOScHC24M9RU9X6eIrY3gnf3GtXp5tRuPof0tL28jHPYYHLJw0HPj/0I+NlkrHiWQ+Y/RGSWqo5CI4CSZBV/2WQwHaSDLWCHGTlGgXKUexIYYhXJXbfOyCNwmS08FTrY/N8k0NVs8GSavYn1/F439PYuJnjTyqtH5W9kFO9DgfILfk4DEdKDVnauqj4P3gMTXYJHEcl2SRG4HPyWivUPed4EnjSu2CrgMRE51haeuQLvdBE5XsLlad4UcBy9kJXMLSBbonn4XIZxyOnj7vp1WcKNnNVgBUemYYHy937mP0IGgbGq+g54C7wMZrpQKXrNDgOfcsQ438bgmd6ZxUbQiH54dcqGkv7mbewcwe9V9dK/T6C/v4rZxr3Z3gFkb9F2uCzhjNgdxTLNppyhgfL3fuTrNxP0AYXLVFjoF6rqdPCCiHzNDaGF4Hg2gK3gbTARLPLSnd4LwlTGWdHC/7GC0NFuY8ZzPT8PTvFPIoHvQWf/jl0eSX8lxsu4nsvWceDpYM6P77nMKG6siCwAu9xtFqr6NfgndwKvA1v5/RlgDQ3BkWC6tbT5by6+XlzPB/2ihXd3AnHH7WjPezcYDPOOVtVkI3s/GoLtbgIRkVw2gomwJc5zN4uyp+dTxnAwMlB+fM/U6PLKzaVc369GAzgDn/N4qnca6Ms//wRW0g8/hcpcYO0I8oALK3OFZvj2s5ivM82Q/gToEWPf/hP/sAb3+Beq6oMuchdTSU82AnsFW9RHMIi9XwLlx3e9Wi7du6OdIfXH6Vz5lke05zA2bgyH40fAaDCPvXwelbaB1v4SE8C5xvkNmDUk7IIx2IBaes6d17ysofU4wtxmD3Ig+6Y7qjtARH7E5x3o+R3pHfyMZTsJ3EXbQQPlx+cEHGiuU33V9SzertmDyt1Aw+suLg/ngsnspVPBdtABLDbrdMqT+X/k0ZF5GAHaG4/cGM9f0AT8y7tKJoll+1REmtmX4a5XY5bxj0Fb2iMVwa1gbKD8+GMCFSwXXqSsqlOg+Ns5rF4PbuNLXg76gyX8+Y9gLRhhDousAO3BYhFZQZm7XDIFLBvrsJcONfP7lWxIDYwhOoSjTV1zIrmZqsxwTihnQLqeTw/fV+aKlvPAjZyKQoHy448JPJOK2qaqU1XlG+f0MWlfh3DI/p4vN58W+VT2+Dn8bh+wFLyuqmNdeljKjbi7cI2Rdzt3FFuZ9HFvczRIBmFOCb/SgHtORGaDjf7BVPId6Ah6cSWSFCi/EDGBqvqGiKwDuc5Aw2cOlfwrh/+XwWMMmhQGic7mcJ0DzgIRDr2jmdtnhvPrM5lChKOIv9+wmHJvpj2xmbJzQcRMI5aVPLQxGIznZxo4E7wDwoHyCyHPHbIQke1gOViiqpM4n38FFlHJM9nL/22icTrS/58NWlFZz7spxI0gqjobn3PxOcosB6eTFVTyejYqBmR48K5fVX0Kht7lLjuHLbwX7BkOhv0ihIVxubfZrfN5EHIu+I0N4GEq7iMwnAp7ALQD6Ry654NlXD08DdxQnQ92gl20E/LZkG6k1/AJOojGxbhDfzUNuK5uSzhQVjHHBDqFgYmu97vzdPbaM3NV2dtU1mawIbqpYk7djlSVj0VklTPOOFTPo8E3hNG6eZQV8VjCKaYHOBWUD5RVAvK4Hm/ieqqqPkLDbDSYac7ZjeEQP4dG4Dy6ga8GT9Pge8gtG3l0fItvoJF8NphpNOpuAO25H98zUFaCYgLRW4c45XHYfxR8wvl9HRU2BLzB3j+DP4tloO0Ea1V1Jnid8QNjQCd68tIDZR2AMYEisggcxY2dLVzW/QKsW3U5+Bz8EwzjFu8lIoecjCieJu5OHHdS11n8wcstRfKiqc6MP34oeIYKbkc3bCh4ucFeQfByA+UHLzdQfvByA+UHLzdQfvByA+UHL7csyPs/6tEa/VUNVBYAAAAASUVORK5CYII=";
+export default Pencil;

package/dist/mixins.css

@@ -0,0 +1 @@
+

package/dist/styles.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--dialog-bg: #fff;--dialog-radius: 10px;--dialog-padding: 10px;--dialog-title-font-size: 16px;--dialog-closer-font-size: 36px;--dialog-closer-hover: rgba(255,255,255,0.2);--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button .ico-btn{gap:5px}button .b-label{flex:1}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-dialog{background:var(--dialog-bg);border-radius:var(--dialog-radius);padding:var(--dialog-padding);overflow:hidden}.zuz-sheet .zuz-sheet-head{margin-bottom:20px}.zuz-sheet .zuz-sheet-head .zuz-sheet-title{flex:1;font-size:var(--dialog-title-font-size);opacity:.5;text-align:center;padding:0px 45px}.zuz-sheet .zuz-sheet-head .zuz-sheet-dot{flex:1}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--dialog-closer-font-size);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:.35;top:50%;right:0px;transform:translateY(-50%)}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer:hover{background:var(--dialog-closer-hover);opacity:1}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}@position-try --zuz-select-bottom{top:anchor(bottom);bottom:unset;margin-block:calc(var(--zuz-select-height) + var(--zuz-select-gap)) 0}.zuz-selectk-wrap{width:100%}.zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;anchor-name:--zuz-select-anchor}.zuz-select:hover{background:var(--select-hover)}.zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-options{--zuz-select-height: 30px;--zuz-select-gap: 0px;position-anchor:--zuz-select-anchor;position-try:most-height --zuz-select-bottom;width:100%;max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}
+*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--max-z-index: 2147483647;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 17px;--checkbox-radius: 6px;--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--tab-head: #fff;--tab-head-padding: 3px 3px 0px 3px;--tab-head-radius: 6px 6px 0px 0px;--tab: #eee;--tab-active: #ccc;--tab-active-color: #111;--tab-hover: #ddd;--tab-color: #111;--tab-radius: 5px 5px 0px 0px;--tab-padding: 5px 20px;--tab-body: #fff;--tab-body-radius: 0px 5px 5px 5px;--tab-body-padding: 0px;--tab-border: 1px #ddd solid;--sheet-bg: #fff;--sheet-radius: 10px;--sheet-padding: 6px 12px;--sheet-head-padding: 10px;--sheet-body-padding: 10px;--sheet-footer: #ddd;--sheet-footer-padding: 10px;--sheet-action: #222;--sheet-action-color: #fff;--sheet-action-hover: #333;--sheet-action-radius: 7px;--sheet-action-padding: 7px 20px;--sheet-action-font-size: 16px;--sheet-action-font-weight: bold;--sheet-closer-color: #111;--sheet-closer-hover: rgba(255,255,255,0.2);--sheet-closer-opacity: 0.75;--sheet-closer-hover-opacity: 1;--sheet-font-size: 15px;--sheet-title-opacity: 0.75;--sheet-title-font-size: 16px;--sheet-closer-font-size: 36px;--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}.checkbox{height:var(--checkbox-size);width:var(--checkbox-size);cursor:pointer;border:1px var(--checkbox-unchecked) solid;border-radius:var(--checkbox-radius);overflow:hidden}.checkbox input[type=checkbox]{z-index:0;opacity:0}.checkbox:before{font-size:var(--checkbox-check-size);color:var(--checkbox-check-color);opacity:0}.checkbox.is-checked{background-color:var(--checkbox-checked);border:1px var(--checkbox-checked) solid}.checkbox.is-checked:before{opacity:1}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:2147483645;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);overflow:hidden}.zuz-sheet .sheet-head{padding:var(--sheet-head-padding)}.zuz-sheet .sheet-head .sheet-title{flex:1;font-size:var(--sheet-title-font-size);opacity:var(--sheet-title-opacity);text-align:center;padding:0px 45px;display:flex;align-items:center;justify-content:center}.zuz-sheet .sheet-head .sheet-dot{flex:1}.zuz-sheet .sheet-head .sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--sheet-closer-font-size);color:var(--sheet-closer-color);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:var(--sheet-closer-opacity);top:15px;right:5px;transform:translateY(-50%);font-size:var(--sheet-closer-font-size)}.zuz-sheet .sheet-head .sheet-closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.zuz-sheet .sheet-body{padding:var(--sheet-body-padding)}.zuz-sheet .sheet-footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer)}.zuz-sheet .sheet-footer .sheet-action-btn{background:var(--sheet-action);color:var(--sheet-action-color);border-radius:var(--sheet-action-radius);padding:var(--sheet-action-padding);font-size:var(--sheet-action-font-size);font-weight:var(--sheet-action-font-weight);border:0px}.zuz-sheet .sheet-footer .sheet-action-btn:hover{background:var(--sheet-action-hover)}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}@position-try --zuz-select-bottom{top:anchor(bottom);bottom:unset;margin-block:calc(var(--zuz-select-height) + var(--zuz-select-gap)) 0}.zuz-selectk-wrap{width:100%}.zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;anchor-name:--zuz-select-anchor}.zuz-select:hover{background:var(--select-hover)}.zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-options{--zuz-select-height: 30px;--zuz-select-gap: 0px;position-anchor:--zuz-select-anchor;position-try:most-height --zuz-select-bottom;width:100%;max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}.tabview .tab-head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.tabview .tab-head .tab-label{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color)}.tabview .tab-head .tab-label.active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.tabview .tab-head .tab-label.active:hover{background:var(--tab-active)}.tabview .tab-head .tab-label:hover{background:var(--tab-hover)}.tabview .tab-content{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.tabview .tab-content .tabs-track{transform-style:flat}.tabview .tab-content .tab-body{width:100%;background:var(--tab-body);padding:var(--tab-body-padding)}.comp-editor{top:10px;left:10px;border-radius:10px;z-index:var(--max-z-index)}.comp-editor .pencil{width:40px;height:40px;background:#fff;border-radius:50%;border:0px}.comp-editor .pencil img{width:50%}.comp-editor .pencil span{font-size:36px;color:#111;line-height:.8}.comp-editor .editor-props{background:#fff;border-radius:10px;left:60px;top:10px;width:350px;overflow:hidden;box-shadow:0px 0px 0px 1px #ccc,0px 0px 0px 5px #eaeaea}.comp-editor .editor-props .editor-head{background:#ddd;padding:4px 12px;font-size:14px}.comp-editor .editor-props .editor-head .head-label{flex:1}.comp-editor .editor-props .editor-head .head-action{display:flex;flex:1;gap:5px;align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-head .head-action button{background:#333;border:0px;font-size:12px;color:#fff;font-weight:bold;padding:2px 10px;border-radius:10px}.comp-editor .editor-props .editor-head .head-action button:hover{background:#222}.comp-editor .editor-props .editor-body{padding:12px;max-height:70vh;overflow-x:hidden;overflow-y:auto;gap:5px}.comp-editor .editor-props .editor-body textarea{flex:1 1;width:100%;border:0px;background:#ebebeb;padding:15px;min-height:290px;color:#111;border-radius:10px;resize:none}.comp-editor .editor-props .editor-body .copy{top:20px;right:20px;z-index:2;border-radius:10px;border:0px;padding:3px 10px;background:var(--primary)}.comp-editor .editor-props .editor-body .group{margin-top:10px}.comp-editor .editor-props .editor-body .group .gprops{gap:5px}.comp-editor .editor-props .editor-body .group .glabel{background:#333;align-self:flex-start;font-weight:bold;font-size:12px;border-radius:5px 5px 0px 0px;padding:2px 5px;transform:translateX(5px);color:#f1f1f1}.comp-editor .editor-props .editor-body .gprop,.comp-editor .editor-props .editor-body .prop{flex:1;padding:6px 0px;font-size:13px;background:#f7f7f7;padding:5px 10px;border-radius:5px}.comp-editor .editor-props .editor-body .gprop .pop,.comp-editor .editor-props .editor-body .prop .pop{flex:1;white-space:pre}.comp-editor .editor-props .editor-body .gprop .pop:nth-child(2),.comp-editor .editor-props .editor-body .prop .pop:nth-child(2){align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-body .gprop .pop input,.comp-editor .editor-props .editor-body .prop .pop input{flex:1;width:70px;max-width:70px;min-width:70px;border:0px;background:#777;padding:4px;border-radius:4px;margin-left:5px}.comp-editor .editor-props .editor-body .gprop .pop input[type=color],.comp-editor .editor-props .editor-body .prop .pop input[type=color]{background:rgba(0,0,0,0);border-radius:5px;padding:0px;appearance:none}.comp-editor .editor-props .editor-body .gprop .pop .l-k,.comp-editor .editor-props .editor-body .prop .pop .l-k{font-size:10px;color:#777}

package/dist/types/enums.d.ts

@@ -36,3 +36,22 @@ export declare enum DRAWER_SIDE {
     Top = "TOP",
     Bottom = "BOTTOM"
 }
+export declare enum CHECKBOX {
+    Default = "DEFAULT",
+    Switch = "SWITCH"
+}
+export declare enum EDIT_TYPE {
+    Slider = "SLIDER",
+    Checkbox = "CHECKBOX"
+}
+export declare enum DATATYPE {
+    String = "STRING",
+    Number = "NUMBER",
+    Boolean = "BOOLEAN",
+    Array = "ARRAY",
+    Object = "OBJECT",
+    Date = "DATE",
+    Time = "TIME",
+    DateTime = "DATETIME",
+    File = "FILE"
+}

package/dist/types/enums.js

@@ -43,3 +43,25 @@ export var DRAWER_SIDE;
     DRAWER_SIDE["Top"] = "TOP";
     DRAWER_SIDE["Bottom"] = "BOTTOM";
 })(DRAWER_SIDE || (DRAWER_SIDE = {}));
+export var CHECKBOX;
+(function (CHECKBOX) {
+    CHECKBOX["Default"] = "DEFAULT";
+    CHECKBOX["Switch"] = "SWITCH";
+})(CHECKBOX || (CHECKBOX = {}));
+export var EDIT_TYPE;
+(function (EDIT_TYPE) {
+    EDIT_TYPE["Slider"] = "SLIDER";
+    EDIT_TYPE["Checkbox"] = "CHECKBOX";
+})(EDIT_TYPE || (EDIT_TYPE = {}));
+export var DATATYPE;
+(function (DATATYPE) {
+    DATATYPE["String"] = "STRING";
+    DATATYPE["Number"] = "NUMBER";
+    DATATYPE["Boolean"] = "BOOLEAN";
+    DATATYPE["Array"] = "ARRAY";
+    DATATYPE["Object"] = "OBJECT";
+    DATATYPE["Date"] = "DATE";
+    DATATYPE["Time"] = "TIME";
+    DATATYPE["DateTime"] = "DATETIME";
+    DATATYPE["File"] = "FILE";
+})(DATATYPE || (DATATYPE = {}));

package/dist/types/interfaces.d.ts

@@ -1,4 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { animationProps } from "../comps/base";
+export interface BaseProps {
+    as?: string;
+    animate?: animationProps;
+    editor?: boolean;
+}
 export interface FormatNumberParams {
     number: number | string;
     locale: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.9",
+    "version": "0.5.0",
     "keywords": [
         "react",
         "zuz",