@zuzjs/ui 0.7.0 → 0.7.1

package/dist/colors.css

@@ -1 +1 @@
-:root{--red-50: #fef2f2;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--green-50: #e8f5e9;--green-100: #c8e6c9;--green-200: #a5d6a7;--green-300: #81c784;--green-400: #66bb6a;--green-500: #4caf50;--green-600: #43a047;--green-700: #388e3c;--green-800: #2e7d32;--green-900: #1b5e20;--blue-50: #e3f2fd;--blue-100: #bbdefb;--blue-200: #90caf9;--blue-300: #64b5f6;--blue-400: #42a5f5;--blue-500: #2196f3;--blue-600: #1e88e5;--blue-700: #1976d2;--blue-800: #1565c0;--blue-900: #0d47a1;--yellow-50: #fffde7;--yellow-100: #fff9c4;--yellow-200: #fff59d;--yellow-300: #fff176;--yellow-400: #ffee58;--yellow-500: #ffeb3b;--yellow-600: #fdd835;--yellow-700: #fbc02d;--yellow-800: #f9a825;--yellow-900: #f57f17;--purple-50: #f3e5f5;--purple-100: #e1bee7;--purple-200: #ce93d8;--purple-300: #ba68c8;--purple-400: #ab47bc;--purple-500: #9c27b0;--purple-600: #8e24aa;--purple-700: #7b1fa2;--purple-800: #6a1b9a;--purple-900: #4a148c;--orange-50: #fff3e0;--orange-100: #ffe0b2;--orange-200: #ffcc80;--orange-300: #ffb74d;--orange-400: #ffa726;--orange-500: #ff9800;--orange-600: #fb8c00;--orange-700: #f57c00;--orange-800: #ef6c00;--orange-900: #e65100;--white-50: rgb(255, 255, 255);--white-100: rgba(255, 255, 255, 0.1);--white-200: rgba(255, 255, 255, 0.2);--white-300: rgba(255, 255, 255, 0.3);--white-400: rgba(255, 255, 255, 0.4);--white-500: rgba(255, 255, 255, 0.5);--white-600: rgba(255, 255, 255, 0.6);--white-700: rgba(255, 255, 255, 0.7);--white-800: rgba(255, 255, 255, 0.8);--white-900: rgba(255, 255, 255, 0.9);--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #eeeeee;--gray-300: #e0e0e0;--gray-400: #bdbdbd;--gray-500: #9e9e9e;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--black-50: #f7f7f7;--black-100: #e1e1e1;--black-200: #cfcfcf;--black-300: #b1b1b1;--black-400: #9e9e9e;--black-500: #7e7e7e;--black-600: #626262;--black-700: #515151;--black-800: #3b3b3b;--black-900: #222222;--black-1000: #000000;--pink-50: #fce4ec;--pink-100: #f8bbd0;--pink-200: #f48fb1;--pink-300: #f06292;--pink-400: #ec407a;--pink-500: #e91e63;--pink-600: #d81b60;--pink-700: #c2185b;--pink-800: #ad1457;--pink-900: #880e4f;--teal-50: #e0f2f1;--teal-100: #b2dfdb;--teal-200: #80cbc4;--teal-300: #4db6ac;--teal-400: #26a69a;--teal-500: #009688;--teal-600: #00897b;--teal-700: #00796b;--teal-800: #00695c;--teal-900: #004d40;--cyan-50: #e0f7fa;--cyan-100: #b2ebf2;--cyan-200: #80deea;--cyan-300: #4dd0e1;--cyan-400: #26c6da;--cyan-500: #00bcd4;--cyan-600: #00acc1;--cyan-700: #0097a7;--cyan-800: #00838f;--cyan-900: #006064;--lime-50: #f9fbe7;--lime-100: #f0f4c3;--lime-200: #e6ee9c;--lime-300: #dce775;--lime-400: #d4e157;--lime-500: #cddc39;--lime-600: #c0ca33;--lime-700: #afb42b;--lime-800: #9e9d24;--lime-900: #827717;--amber-50: #fff8e1;--amber-100: #ffecb3;--amber-200: #ffe082;--amber-300: #ffd54f;--amber-400: #ffca28;--amber-500: #ffc107;--amber-600: #ffb300;--amber-700: #ffa000;--amber-800: #ff8f00;--amber-900: #ff6f00;--brown-50: #efebe9;--brown-100: #d7ccc8;--brown-200: #bcaaa4;--brown-300: #a1887f;--brown-400: #8d6e63;--brown-500: #795548;--brown-600: #6d4c41;--brown-700: #5d4037;--brown-800: #4e342e;--brown-900: #3e2723;--indigo-50: #e8eaf6;--indigo-100: #c5cae9;--indigo-200: #9fa8da;--indigo-300: #7986cb;--indigo-400: #5c6bc0;--indigo-500: #3f51b5;--indigo-600: #3949ab;--indigo-700: #303f9f;--indigo-800: #283593;--indigo-900: #1a237e;--blueGray-50: #eceff1;--blueGray-100: #cfd8dc;--blueGray-200: #b0bec5;--blueGray-300: #90a4ae;--blueGray-400: #78909c;--blueGray-500: #607d8b;--blueGray-600: #546e7a;--blueGray-700: #455a64;--blueGray-800: #37474f;--blueGray-900: #263238}
+:root{--red-50: #fef2f2;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--green-50: #e8f5e9;--green-100: #c8e6c9;--green-200: #a5d6a7;--green-300: #81c784;--green-400: #66bb6a;--green-500: #4caf50;--green-600: #43a047;--green-700: #388e3c;--green-800: #2e7d32;--green-900: #1b5e20;--blue-50: #e3f2fd;--blue-100: #bbdefb;--blue-200: #90caf9;--blue-300: #64b5f6;--blue-400: #42a5f5;--blue-500: #2196f3;--blue-600: #1e88e5;--blue-700: #1976d2;--blue-800: #1565c0;--blue-900: #0d47a1;--yellow-50: #fffde7;--yellow-100: #fff9c4;--yellow-200: #fff59d;--yellow-300: #fff176;--yellow-400: #ffee58;--yellow-500: #ffeb3b;--yellow-600: #fdd835;--yellow-700: #fbc02d;--yellow-800: #f9a825;--yellow-900: #f57f17;--purple-50: #f3e5f5;--purple-100: #e1bee7;--purple-200: #ce93d8;--purple-300: #ba68c8;--purple-400: #ab47bc;--purple-500: #9c27b0;--purple-600: #8e24aa;--purple-700: #7b1fa2;--purple-800: #6a1b9a;--purple-900: #4a148c;--orange-50: #fff3e0;--orange-100: #ffe0b2;--orange-200: #ffcc80;--orange-300: #ffb74d;--orange-400: #ffa726;--orange-500: #ff9800;--orange-600: #fb8c00;--orange-700: #f57c00;--orange-800: #ef6c00;--orange-900: #e65100;--white-50: rgb(255, 255, 255);--white-100: rgba(255, 255, 255, 0.1);--white-200: rgba(255, 255, 255, 0.2);--white-300: rgba(255, 255, 255, 0.3);--white-400: rgba(255, 255, 255, 0.4);--white-500: rgba(255, 255, 255, 0.5);--white-600: rgba(255, 255, 255, 0.6);--white-700: rgba(255, 255, 255, 0.7);--white-800: rgba(255, 255, 255, 0.8);--white-900: rgba(255, 255, 255, 0.9);--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #eeeeee;--gray-300: #e0e0e0;--gray-400: #bdbdbd;--gray-500: #9e9e9e;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--black-50: #f7f7f7;--black-100: #e1e1e1;--black-200: #cfcfcf;--black-300: #b1b1b1;--black-400: #9e9e9e;--black-500: #7e7e7e;--black-600: #626262;--black-700: #515151;--black-800: #3b3b3b;--black-900: #222222;--black-1000: #000000;--pink-50: #fce4ec;--pink-100: #f8bbd0;--pink-200: #f48fb1;--pink-300: #f06292;--pink-400: #ec407a;--pink-500: #e91e63;--pink-600: #d81b60;--pink-700: #c2185b;--pink-800: #ad1457;--pink-900: #880e4f;--teal-50: #e0f2f1;--teal-100: #b2dfdb;--teal-200: #80cbc4;--teal-300: #4db6ac;--teal-400: #26a69a;--teal-500: #009688;--teal-600: #00897b;--teal-700: #00796b;--teal-800: #00695c;--teal-900: #004d40;--cyan-50: #e0f7fa;--cyan-100: #b2ebf2;--cyan-200: #80deea;--cyan-300: #4dd0e1;--cyan-400: #26c6da;--cyan-500: #00bcd4;--cyan-600: #00acc1;--cyan-700: #0097a7;--cyan-800: #00838f;--cyan-900: #006064;--lime-50: #f9fbe7;--lime-100: #f0f4c3;--lime-200: #e6ee9c;--lime-300: #dce775;--lime-400: #d4e157;--lime-500: #cddc39;--lime-600: #c0ca33;--lime-700: #afb42b;--lime-800: #9e9d24;--lime-900: #827717;--amber-50: #fff8e1;--amber-100: #ffecb3;--amber-200: #ffe082;--amber-300: #ffd54f;--amber-400: #ffca28;--amber-500: #ffc107;--amber-600: #ffb300;--amber-700: #ffa000;--amber-800: #ff8f00;--amber-900: #ff6f00;--brown-50: #efebe9;--brown-100: #d7ccc8;--brown-200: #bcaaa4;--brown-300: #a1887f;--brown-400: #8d6e63;--brown-500: #795548;--brown-600: #6d4c41;--brown-700: #5d4037;--brown-800: #4e342e;--brown-900: #3e2723;--indigo-50: #e8eaf6;--indigo-100: #c5cae9;--indigo-200: #9fa8da;--indigo-300: #7986cb;--indigo-400: #5c6bc0;--indigo-500: #3f51b5;--indigo-600: #3949ab;--indigo-700: #303f9f;--indigo-800: #283593;--indigo-900: #1a237e;--slate-50: #eceff1;--slate-100: #cfd8dc;--slate-200: #b0bec5;--slate-300: #90a4ae;--slate-400: #78909c;--slate-500: #607d8b;--slate-600: #546e7a;--slate-700: #455a64;--slate-800: #37474f;--slate-900: #263238}

package/dist/comps/AutoComplete/index.d.ts

@@ -2,7 +2,7 @@ import { Size } from "../../types/enums";
 declare const AutoComplete: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
     numeric?: boolean;
     size?: Size;
-    variant?: Size;
+    variant?: import("../../types/enums").Variant;
     with?: import("../../types/enums").FORMVALIDATION;
 } & {
     action?: string;

package/dist/comps/Avatar/index.d.ts

@@ -1,18 +1,11 @@
-import { AVATAR } from "../../types/enums";
-import { Props } from "../../types";
-export type AvatarProps = Props<"img"> & {
-    type?: AVATAR;
-    size?: number;
-    src: string;
-    crossOrigin?: 'anonymous' | 'use-credentials';
-    referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
-};
-export interface AvatarHandler {
-}
+import { AVATAR, Size } from "../../types/enums";
+import { AvatarHandler } from "./types";
 declare const Avatar: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../../types").ZuzProps> & {
     type?: AVATAR;
     size?: number;
-    src: string;
+    variant?: Size;
+    src?: string;
+    color?: string;
     crossOrigin?: "anonymous" | "use-credentials";
     referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
 } & import("react").RefAttributes<AvatarHandler>>;

package/dist/comps/Avatar/index.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from "react";
-import { AVATAR } from "../../types/enums";
+import { AVATAR, Size } from "../../types/enums";
 import { useBase, useImage } from "../../hooks";
 import Image from "../Image";
 import Box from "../Box";
+import Text from "../Text";
 const Avatar = forwardRef((props, ref) => {
-    const { src, size, type, crossOrigin, referrerPolicy, animate, as, ...pops } = props;
-    const [img, imgStatus, imgError] = useImage(src, crossOrigin, referrerPolicy);
+    const { src, size, variant, type, crossOrigin, referrerPolicy, animate, as, alt, color, ...pops } = props;
+    const [img, imgStatus, imgError] = src ? useImage(src, crossOrigin, referrerPolicy) : [`x`, `y`, `z`];
     const { className, style, rest } = useBase({ animate, as });
     useEffect(() => {
         if (type == AVATAR.Square && !document.getElementById('squareRadiusClipPath')) {
@@ -27,10 +28,9 @@ const Avatar = forwardRef((props, ref) => {
             document.body.appendChild(svg);
         }
     }, []);
-    return _jsx(Box, { className: `--avatar --${(type || AVATAR.Circle).toLowerCase()} rel ${className}`.trim(), style: {
-            width: size || `auto`,
-            height: size || `auto`,
+    return _jsx(Box, { className: `--avatar --${variant || Size.Small} --${(type || AVATAR.Circle).toLowerCase()} rel flex aic jcc ${className}`.trim(), style: {
+            background: color || `var(--primary)`,
             ...style,
-        }, ...rest, children: _jsx(Image, { src: img, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, ...pops }) });
+        }, ...rest, children: src ? _jsx(Image, { src: img, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, ...pops }) : _jsx(Text, { className: `--avatar-label`, children: (alt ? alt.charAt(0) : `A`).toUpperCase() }) });
 });
 export default Avatar;

package/dist/comps/Avatar/types.d.ts

@@ -0,0 +1,13 @@
+import { Props } from "../../types";
+import { AVATAR, Size } from "../../types/enums";
+export type AvatarProps = Props<"img"> & {
+    type?: AVATAR;
+    size?: number;
+    variant?: Size;
+    src?: string;
+    color?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+};
+export interface AvatarHandler {
+}

package/dist/comps/Avatar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/comps/Button/index.d.ts

@@ -7,6 +7,7 @@ declare const Button: import("react").ForwardRefExoticComponent<import("../../ty
     spinner?: import("../Spinner").SpinnerProps;
     state?: ButtonState;
     size?: Size;
+    variant?: Size | import("../../types/enums").Variant;
     reset?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/comps/Button/index.js

@@ -8,11 +8,11 @@ import { ButtonState } from './types';
 import Spinner from '../Spinner';
 import { Size } from '../../types/enums';
 const Button = forwardRef((props, ref) => {
-    const { reset, size, icon, iconSize, children, withLabel, spinner, state, ...pops } = props;
+    const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     return _jsxs("button", { 
         // className={`${reset ? `flex` : `--button ${size ? `--${size}` : ``} flex aic jcc`.trim()} ${icon ? `ico-btn` : ``} ${className}`.trim()}
-        className: `--button ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, color: `#ffffff`,
+        className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, color: `#ffffff`,
                 ...(spinner || {}) }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
 });
 export default Button;

package/dist/comps/Button/types.d.ts

@@ -1,6 +1,9 @@
 import { Props } from "../../types";
-import { Size } from "../../types/enums";
+import { Size, Variant } from "../../types/enums";
 import { SpinnerProps } from "../Spinner";
+/**
+ * @deprecated Use `variant` instead.
+ */
 export type ButtonProps = Props<`button`> & {
     icon?: string;
     iconSize?: Size;
@@ -8,6 +11,7 @@ export type ButtonProps = Props<`button`> & {
     spinner?: SpinnerProps;
     state?: ButtonState;
     size?: Size;
+    variant?: Size | Variant;
     reset?: boolean;
 };
 export interface ButtonHandler extends HTMLButtonElement {

package/dist/comps/CheckBox/index.d.ts

@@ -3,6 +3,6 @@ import { CheckboxHandler } from "./types";
 declare const CheckBox: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: CHECKBOX;
     size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default CheckBox;

package/dist/comps/CheckBox/index.js

@@ -6,7 +6,7 @@ import Label from "../Label";
 import Input from "../Input";
 import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
-    const { name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
+    const { name, required, type, value, size, checked: defaultCheck, onSwitch, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -15,19 +15,19 @@ const CheckBox = forwardRef((props, ref) => {
             if (bRef.current) {
                 bRef.current.checked = mod;
             }
-            if (triggerChange && onChange)
-                onChange(mod, value || `cb`);
+            if (triggerChange && onSwitch)
+                onSwitch(mod, value || `cb`);
         },
         toggle(triggerChange = true) {
             if (bRef.current)
                 bRef.current.checked = !checked;
-            if (triggerChange && onChange)
-                onChange && onChange(!checked, value || `cb`);
+            if (triggerChange && onSwitch)
+                onSwitch && onSwitch(!checked, value || `cb`);
             _setChecked(!checked);
         }
     }));
     return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} --${size || Size.Default} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), ...pops, children: [(!type || type == CHECKBOX.Default) && SVGIcons.check, _jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
-                    onChange && onChange(e.target.checked, value || `cb`);
+                    onSwitch && onSwitch(e.target.checked, value || `cb`);
                     _setChecked(e.target.checked);
                 } })] });
 });

package/dist/comps/CheckBox/types.d.ts

@@ -11,7 +11,7 @@ import { CHECKBOX, Size } from "../../types/enums";
 export type CheckBoxProps = Props<"input"> & {
     type?: CHECKBOX;
     size?: Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 };
 /**
  * Interface for handling checkbox state.

package/dist/comps/ContextMenu/index.d.ts

@@ -1,6 +1,9 @@
 import { BoxProps } from "../Box";
 import { ContextItem, ContextMenuHandler } from "./types";
 declare const ContextMenu: import("react").ForwardRefExoticComponent<BoxProps & {
+    parent?: HTMLElement;
     items?: ContextItem[];
+    offsetX?: number;
+    offsetY?: number;
 } & import("react").RefAttributes<ContextMenuHandler>>;
 export default ContextMenu;

package/dist/comps/ContextMenu/index.js

@@ -1,27 +1,37 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import Box from "../Box";
-import { useBase } from "../../hooks";
+import { useAnchorPosition, useBase } from "../../hooks";
 import MenuItem from "./item";
+import { TRANSITION_CURVES } from "../../types/enums";
+// import { dynamicObject } from "../../types";
 const ContextMenu = forwardRef((props, ref) => {
-    const { as, items: _items, ...pops } = props;
+    const { as, offsetX, offsetY, parent, items: _items, ...pops } = props;
     const { className, style, rest } = useBase(pops);
+    const event = useRef(undefined);
     const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState({ x: 0, y: 0 });
+    // const [_position, setPosition] = useState<{ x: number, y: number } | null>(null);
+    // const [_parent, setParent] = useState<{ x: number, y: number, width: number, height: number } | null>(null);
     const [items, setItems] = useState(_items || []);
+    const { position, targetRef } = useAnchorPosition(parent, event.current, { offsetX, offsetY });
     useImperativeHandle(ref, () => ({
         show: (e, menuItems) => {
-            if (e instanceof MouseEvent) {
-                setPosition({ x: e.clientX, y: e.clientY });
-            }
-            else if (e instanceof TouchEvent && e.touches.length > 0) {
-                setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
-            }
-            else {
-                const { clientX: x, clientY: y } = e;
-                setPosition({ x, y });
-            }
+            if (!parent)
+                event.current = e;
+            // let x = 0, y = 0;
+            // if ( parent ){
+            //     const { x: px, y: py, width, height } = _parent || parent.getBoundingClientRect()
+            //     // x = right + 5
+            //     // y = top + height + 5
+            // }
+            // else{
+            //     x = e instanceof MouseEvent ? e.clientX 
+            //         : e instanceof TouchEvent && e.touches.length > 0 ? e.touches[0].clientX : (e as dynamicObject).clientX || 0;
+            //     y = e instanceof MouseEvent ? e.clientY
+            //         : e instanceof TouchEvent && e.touches.length > 0 ? e.touches[0].clientY : (e as dynamicObject).clientY || 0;
+            // }
+            // setPosition({ x, y })
             if (menuItems) {
                 setItems(menuItems);
             }
@@ -29,14 +39,59 @@ const ContextMenu = forwardRef((props, ref) => {
         },
         hide: (e) => setVisible(false),
     }));
-    useEffect(() => {
-    }, [visible, position, items]);
-    if (!visible)
-        return null;
-    return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), style: {
+    // useEffect(() => {
+    //     if ( !visible || !_menu.current ) return;
+    //     const menu = _menu.current;
+    //     const { offsetWidth: w, offsetHeight: h } = menu;
+    //     let { x, y } = position;
+    //     // Prevent overflow on the right
+    //     if (x + w > window.innerWidth) {
+    //         x = window.innerWidth - w - 10;
+    //     }
+    //     // Prevent overflow on the bottom
+    //     if (y + h > window.innerHeight) {
+    //         y = window.innerHeight - h - 10;
+    //     }
+    //     // Prevent going off the left side
+    //     if (x < 0) x = 10;
+    //     // Prevent going off the top side
+    //     if (y < 0) y = 10;
+    //     setPosition({ x, y })
+    // }, [visible])
+    // useEffect(() => {
+    //     if ( visible ){
+    //         let px, py = 0
+    //         if ( parent ){
+    //             const { x, y, width, height } = _parent || parent.getBoundingClientRect()
+    //             px = x
+    //             py = y
+    //         }
+    //         const { width: w, height: h } = _menu.current!.getBoundingClientRect()
+    //         // Prevent overflow on the right
+    //         if (px! + w > window.innerWidth) {
+    //             px = window.innerWidth - w - 10;
+    //         }
+    //         setPosition({ x: px!, y: py! })
+    //     }
+    // }, [visible])
+    // useEffect(() => {
+    //     if ( parent && !position ){
+    //         const { x, y, width, height } = parent.getBoundingClientRect()
+    //         setParent({ x, y, width, height })
+    //         setPosition({ x, y })
+    //     }
+    // }, [parent])
+    // if ( !visible ) return null
+    return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), "aria-hidden": !visible, style: {
             ...style,
-            top: position.y,
-            left: position.x
-        }, ...rest, children: items.map((item, index) => _jsx(MenuItem, { ...{ ...item, index } }, `context-${item.label.toLowerCase()}-${index}`)) });
+            top: position.top,
+            left: position.left
+        }, animate: {
+            from: { opacity: 0, y: 20 },
+            to: { opacity: 1, y: 0 },
+            curve: TRANSITION_CURVES.EaseInOut,
+            duration: 0.05,
+            when: visible
+        }, ref: targetRef, ...rest, children: items.map((item, index) => _jsx(MenuItem, { ...{ ...item, index } }, `context-${item.label.toLowerCase()}-${index}`)) });
 });
 export default ContextMenu;

package/dist/comps/ContextMenu/types.d.ts

@@ -1,3 +1,4 @@
+import { MouseEvent } from "react";
 import { BoxProps } from "../Box";
 export interface ContextItem {
     label: string;
@@ -9,13 +10,16 @@ export interface ContextItem {
     onSelect: () => void;
 }
 export type ContextMenuProps = BoxProps & {
+    parent?: HTMLElement;
     items?: ContextItem[];
+    offsetX?: number;
+    offsetY?: number;
 };
 export type MenuItemProps = ContextItem & {
     index: number;
     className: string;
 };
 export interface ContextMenuHandler {
-    show: (e: MouseEvent | TouchEvent, items?: ContextItem[]) => void;
+    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent, items?: ContextItem[]) => void;
     hide: (e: MouseEvent | TouchEvent) => void;
 }

package/dist/comps/Cover/index.d.ts

@@ -1,15 +1,15 @@
 import { BoxProps } from "../Box";
-import { SpinnerProps } from "../Spinner";
+import { SPINNER } from "../../types/enums";
 export type CoverProps = BoxProps & {
     message?: string;
-    spinner?: SpinnerProps;
+    spinner?: SPINNER;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;
 };
 declare const Cover: import("react").ForwardRefExoticComponent<BoxProps & {
     message?: string;
-    spinner?: SpinnerProps;
+    spinner?: SPINNER;
     color?: string;
     when?: boolean;
     hideMessage?: boolean;

package/dist/comps/Cover/index.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Box from "../Box";
+import { SPINNER } from "../../types/enums";
 import { useBase } from "../../hooks";
 import Spinner from "../Spinner";
 import Text from "../Text";
@@ -14,6 +15,6 @@ const Cover = forwardRef((props, ref) => {
     return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous`, style: {
             ...style,
             backgroundColor: `var(--cover-bg)`
-        }, ...rest, children: [_jsx(Spinner, { ...spinner }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+        }, ...rest, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
 });
 export default Cover;

package/dist/comps/Form/index.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from "../Box";
 import { dynamicObject } from "../../types";
-import { SpinnerProps } from "../Spinner";
+import { SPINNER } from "../../types/enums";
 export type FormProps = BoxProps & {
     /** Name of form, will be appended to --form-{name} in className
      * whitespace will be replaced with dash (-)
@@ -11,7 +11,7 @@ export type FormProps = BoxProps & {
     /** List of error messages for form validation */
     errors?: dynamicObject;
     /** Spinner properties for loading indicator */
-    spinner?: SpinnerProps;
+    spinner?: SPINNER;
     /** Additional data to include with form submission */
     withData?: dynamicObject;
     /** Handler function called before form submission with validated form data */
@@ -60,7 +60,7 @@ declare const Form: import("react").ForwardRefExoticComponent<BoxProps & {
     /** List of error messages for form validation */
     errors?: dynamicObject;
     /** Spinner properties for loading indicator */
-    spinner?: SpinnerProps;
+    spinner?: SPINNER;
     /** Additional data to include with form submission */
     withData?: dynamicObject;
     /** Handler function called before form submission with validated form data */

package/dist/comps/Form/index.js

@@ -197,7 +197,7 @@ const Form = forwardRef((props, ref) => {
                     }
                 })
                     .catch(err => {
-                    console.warn(`Error occurred while submitting form`, err);
+                    // console.warn(`Error occurred while submitting form`, err)
                     setLoading(false);
                     // submit.current?.reset()
                     if (onError)

package/dist/comps/Input/index.d.ts

@@ -1,15 +1,15 @@
 import { Props } from '../../types';
-import { FORMVALIDATION, Size } from '../../types/enums';
+import { FORMVALIDATION, Size, Variant } from '../../types/enums';
 export type InputProps = Props<`input`> & {
     numeric?: boolean;
     size?: Size;
-    variant?: Size;
+    variant?: Variant;
     with?: FORMVALIDATION;
 };
 declare const Input: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
     numeric?: boolean;
     size?: Size;
-    variant?: Size;
+    variant?: Variant;
     with?: FORMVALIDATION;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/comps/PinInput/index.d.ts

@@ -7,7 +7,7 @@ export type PinInputProps = InputProps & {
 declare const PinInput: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
     numeric?: boolean;
     size?: import("../..").Size;
-    variant?: import("../..").Size;
+    variant?: import("../..").Variant;
     with?: import("../..").FORMVALIDATION;
 } & {
     mask?: boolean;

package/dist/comps/Search/index.d.ts

@@ -8,7 +8,7 @@ export type SearchProps = InputProps & {
 declare const Search: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../../types").ZuzProps> & {
     numeric?: boolean;
     size?: Size;
-    variant?: Size;
+    variant?: import("../../types/enums").Variant;
     with?: import("../../types/enums").FORMVALIDATION;
 } & {
     onSubmit?: (value: string) => void;

package/dist/comps/Switch/index.d.ts

@@ -3,6 +3,6 @@ import { CHECKBOX } from "../../types/enums";
 declare const Switch: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: CHECKBOX;
     size?: import("../../types/enums").Size;
-    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+    onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default Switch;

package/dist/comps/Table/index.d.ts

@@ -7,6 +7,7 @@ declare const Table: import("react").ForwardRefExoticComponent<import("../Box").
     rowsPerPage?: number;
     currentPage?: number;
     pagination?: boolean;
+    animateRows?: boolean;
     onPageChange?: import("../Pagination/types").PaginationCallback;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Table;

package/dist/comps/Table/index.js

@@ -6,7 +6,7 @@ import TRow from "./row";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
 const Table = forwardRef((props, ref) => {
-    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, onPageChange, ...pops } = props;
+    const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, animateRows, onPageChange, ...pops } = props;
     const _schemaParsed = useMemo(() => schema.reduce((prev, c) => {
         prev[c.id] = {
             flex: c.weight || 1,
@@ -22,6 +22,6 @@ const Table = forwardRef((props, ref) => {
     }, {}), [schema]);
     const _cols = useMemo(() => Object.keys(_schemaParsed), [schema]);
     const { style, className, rest } = useBase(pops);
-    return _jsxs(Box, { as: `--table flex cols ${className}`, children: [_jsx(TRow, { index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { index: index, schema: schema, ids: _cols, styles: _schemaParsed, data: row }, `--trow-${index}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
+    return _jsxs(Box, { as: `--table flex cols ${className}`, children: [_jsx(TRow, { index: -1, schema: schema, styles: _schemaParsed }), rows && rows.map((row, index) => _jsx(TRow, { index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row }, `--trow-${index}`)), pagination && _jsx(Box, { as: `--row flex aic --row-footer`, children: _jsx(Pagination, { onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }) })] });
 });
 export default Table;

package/dist/comps/Table/row.js

@@ -1,9 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import Box from "../Box";
 import TColumn from "./col";
+import { TRANSITION_CURVES, TRANSITIONS } from "../../types/enums";
+import { useDelayed } from "../../hooks";
 const TRow = (props) => {
-    const { index, schema, data, ids, styles } = props;
-    return _jsxs(Box, { as: `--row flex aic ${index == -1 ? `--row-head` : ``}`, children: [index == -1 && schema.map((c, i) => _jsx(TColumn, { idx: -1, ...c, style: styles[c.id] }, `--col-${c.id}`)), index > -1 && ids && data && schema.map((c, i) => {
+    const { index, schema, data, ids, styles, animate } = props;
+    const mounted = useDelayed();
+    const _animation = useMemo(() => ({
+        transition: TRANSITIONS.SlideInBottom,
+        curve: TRANSITION_CURVES.EaseInOut,
+        delay: .02 * (index + 1),
+    }), []);
+    return _jsxs(Box, { ...(animate ? { animate: { ..._animation, when: mounted } } : {}), as: `--row flex aic ${index == -1 ? `--row-head` : ``}`, children: [index == -1 && schema.map((c, i) => _jsx(TColumn, { idx: -1, ...c, style: styles[c.id] }, `--col-${c.id}`)), index > -1 && ids && data && schema.map((c, i) => {
                 return ids.includes(String(c.id)) ? _jsx(TColumn, { idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data) : data[String(c.id)] }, `--${String(c.id)}-val-${i}`) : null;
             })] });
 };

package/dist/comps/Table/types.d.ts

@@ -7,6 +7,7 @@ export type Row = {
     schema: Column[];
     styles: dynamicObject;
     ids?: string[];
+    animate?: boolean;
     data?: dynamicObject;
 };
 export type Column = {
@@ -30,5 +31,6 @@ export type TableProps = BoxProps & {
     rowsPerPage?: number;
     currentPage?: number;
     pagination?: boolean;
+    animateRows?: boolean;
     onPageChange?: PaginationCallback;
 };

package/dist/comps/Treeview/index.d.ts

@@ -4,7 +4,7 @@ declare const TreeView: import("react").ForwardRefExoticComponent<Omit<BoxProps,
     tag?: string;
     roots: string[];
     nodes: import("./types").TreeNode[];
-    onSelect: (tag: string) => void;
+    onNodeSelect: (tag: string) => void;
     icons?: import("./types").TreeNodeIcons;
     selected?: string;
 } & import("react").RefAttributes<TreeViewHandler>>;

package/dist/comps/Treeview/index.js

@@ -3,14 +3,14 @@ import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import Box from "../Box";
 import TreeItem from "./item";
 const TreeView = forwardRef((props, ref) => {
-    const { as, nodes, onSelect, tag: treeViewTag, icons, roots, selected: _selected, ...rest } = props;
+    const { as, nodes, onNodeSelect, tag: treeViewTag, icons, roots, selected: _selected, ...rest } = props;
     const [selected, setSelected] = useState(_selected);
     useImperativeHandle(ref, () => ({
         getSelected: () => selected
-    }), [onSelect]);
+    }), [onNodeSelect]);
     const handleSelect = (tag) => {
         setSelected(tag);
-        onSelect && onSelect(tag);
+        onNodeSelect && onNodeSelect(tag);
     };
     useEffect(() => {
         if (selected != _selected) {

package/dist/comps/Treeview/types.d.ts

@@ -10,7 +10,7 @@ export type TreeViewProps = Omit<BoxProps, `tag`> & {
     tag?: string;
     roots: string[];
     nodes: TreeNode[];
-    onSelect: (tag: string) => void;
+    onNodeSelect: (tag: string) => void;
     icons?: TreeNodeIcons;
     selected?: string;
 };

package/dist/comps/index.d.ts

@@ -7,7 +7,8 @@ export { default as Alert } from './Alert';
 export * from './Alert/types';
 export { default as AutoComplete } from './AutoComplete';
 export * from './AutoComplete/types';
-export { type AvatarProps, default as Avatar } from './Avatar';
+export { default as Avatar } from './Avatar';
+export * from './Avatar/types';
 export { type BoxProps, default as Box } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';

package/dist/comps/index.js

@@ -8,6 +8,7 @@ export * from './Alert/types';
 export { default as AutoComplete } from './AutoComplete';
 export * from './AutoComplete/types';
 export { default as Avatar } from './Avatar';
+export * from './Avatar/types';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';

package/dist/funs/index.js

@@ -253,10 +253,10 @@ export const withPost = async (uri, data, timeout = 60, onProgress) => {
             }
         })
             .catch(err => {
-            if (err.response.data)
+            if (err?.response?.data)
                 reject(err.response.data);
             else
-                reject(err);
+                reject(err.code && err.code == `ERR_NETWORK` ? { error: err.code, message: navigator.onLine ? `Unable to connect to the server. It may be temporarily down.` : `Network error: Unable to connect. Please check your internet connection and try again.` } : err);
         });
     });
 };

package/dist/hooks/index.d.ts

@@ -1,8 +1,9 @@
+export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
-export { default as useDB } from './useDB';
+export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
 export { default as useDebounce } from './useDebounce';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';

package/dist/hooks/index.js

@@ -1,3 +1,4 @@
+export { default as useAnchorPosition } from './useAnchorPosition';
 export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';

package/dist/hooks/useAnchorPosition.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from "react";
+export type AnchorOptions = {
+    offsetX?: number;
+    offsetY?: number;
+    overflow?: boolean;
+};
+declare const useAnchorPosition: (parent?: HTMLElement, event?: MouseEvent, options?: AnchorOptions) => {
+    position: {
+        top: number;
+        left: number;
+    };
+    targetRef: RefObject<HTMLDivElement | null>;
+};
+export default useAnchorPosition;

package/dist/hooks/useAnchorPosition.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+const useAnchorPosition = (parent, event, options = {}) => {
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const { offsetX = 0, offsetY = 0, overflow = true } = options;
+    const targetRef = useRef(null);
+    const updatePosition = useCallback(() => {
+        let top = 0;
+        let left = 0;
+        if (event) {
+            // Position based on mouse event
+            top = event.clientY + offsetY;
+            left = event.clientX + offsetX;
+        }
+        else if (parent) {
+            // Position based on parent element
+            const rect = parent.getBoundingClientRect();
+            top = rect.bottom + offsetY;
+            left = rect.left + offsetX;
+        }
+        // Prevent overflow
+        if (overflow && targetRef.current) {
+            const popperRect = targetRef.current.getBoundingClientRect();
+            const { innerWidth, innerHeight } = window;
+            if (left + popperRect.width > innerWidth) {
+                left = innerWidth - popperRect.width - 10; // Add padding
+            }
+            if (top + popperRect.height > innerHeight) {
+                top = innerHeight - popperRect.height - 10;
+            }
+        }
+        setPosition({ top, left });
+    }, [event, parent, offsetX, offsetY, overflow]);
+    useEffect(() => {
+        updatePosition();
+        window.addEventListener("resize", updatePosition);
+        window.addEventListener("scroll", updatePosition);
+        return () => {
+            window.removeEventListener("resize", updatePosition);
+            window.removeEventListener("scroll", updatePosition);
+        };
+    }, [updatePosition]);
+    return { position, targetRef };
+};
+export default useAnchorPosition;

package/dist/hooks/useContextMenu.d.ts

@@ -1,7 +1,7 @@
-import { RefObject } from "react";
+import { MouseEvent, RefObject } from "react";
 import { ContextItem, ContextMenuHandler } from "../comps";
-declare const useContextMenu: (menu: RefObject<ContextMenuHandler>) => {
-    show: (e: MouseEvent, items?: ContextItem[]) => void;
+declare const useContextMenu: (menu: RefObject<ContextMenuHandler | null>) => {
+    show: (e: MouseEvent<Element, MouseEvent> | TouchEvent, items?: ContextItem[]) => void;
     hide: (e: MouseEvent | TouchEvent) => void;
 };
 export default useContextMenu;

package/dist/hooks/useContextMenu.js

@@ -3,7 +3,9 @@ const useContextMenu = (menu) => {
     const show = (e, items) => {
         e.preventDefault();
         e.stopPropagation();
-        menu.current?.show(e, items);
+        setTimeout(() => {
+            menu.current?.show(e, items);
+        }, 0);
     };
     const hide = (e) => {
         menu.current?.hide(e);

package/dist/hooks/useDB.d.ts

@@ -1,9 +1,9 @@
-type IDBOptions = {
+export type IDBOptions = {
     name: string;
     version: number;
     meta: IDBMeta[];
 };
-interface IDBMeta {
+export interface IDBMeta {
     name: string;
     config: {
         keyPath: string;
@@ -11,15 +11,17 @@ interface IDBMeta {
     };
     schema: IDBSchema[];
 }
-interface IDBSchema {
+export interface IDBSchema {
     name: string;
     key?: string;
     unique?: boolean;
 }
 declare const useDB: (options: IDBOptions) => {
     getByID: <T>(storeName: string, id: string | number) => Promise<T>;
+    getStore: <T>(storeName: string, id: string | number) => Promise<T>;
     insert: <T>(storeName: string, value: T, key?: any) => Promise<number>;
-    update: <T>(storeName: string, value: T, key?: IDBValidKey) => Promise<void>;
+    update: <T>(storeName: string, value: T, key: IDBValidKey) => Promise<void>;
+    remove: (storeName: string, key: IDBValidKey) => Promise<void>;
     error: string | null;
 };
 export default useDB;

package/dist/hooks/useDB.js

@@ -46,6 +46,24 @@ const useDB = (options) => {
         const store = transaction.objectStore(storeName);
         return { store };
     };
+    const getStore = (storeName, id) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readOnly);
+            const request = store.getAll();
+            request.onsuccess = (evt) => {
+                const result = evt.target.result;
+                if (undefined == result)
+                    reject('Record not found');
+                resolve(evt.target.result);
+            };
+            request.onerror = (evt) => {
+                reject(`SELECT Failed. ${evt.target.result}`);
+            };
+        })
+            .catch(err => {
+            reject('Database either corrupted or not initialized');
+        });
+    });
     const getByID = (storeName, id) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readOnly);
@@ -61,6 +79,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
+            // console.log(`getByID`, err)
             reject('Database either corrupted or not initialized');
         });
     });
@@ -91,10 +110,25 @@ const useDB = (options) => {
             reject('Database either corrupted or not initialized');
         });
     });
+    const remove = (storeName, key) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readWrite);
+            const request = store.delete(key);
+            request.onsuccess = (evt) => {
+                resolve();
+            };
+        })
+            .catch(err => {
+            console.log(err);
+            reject(`Delete failed from ${storeName} with key: ${key}`);
+        });
+    });
     return {
         getByID,
+        getStore,
         insert,
         update,
+        remove,
         error
     };
 };

package/dist/styles.css

@@ -1 +1 @@
-:root{--red-50: #fef2f2;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--green-50: #e8f5e9;--green-100: #c8e6c9;--green-200: #a5d6a7;--green-300: #81c784;--green-400: #66bb6a;--green-500: #4caf50;--green-600: #43a047;--green-700: #388e3c;--green-800: #2e7d32;--green-900: #1b5e20;--blue-50: #e3f2fd;--blue-100: #bbdefb;--blue-200: #90caf9;--blue-300: #64b5f6;--blue-400: #42a5f5;--blue-500: #2196f3;--blue-600: #1e88e5;--blue-700: #1976d2;--blue-800: #1565c0;--blue-900: #0d47a1;--yellow-50: #fffde7;--yellow-100: #fff9c4;--yellow-200: #fff59d;--yellow-300: #fff176;--yellow-400: #ffee58;--yellow-500: #ffeb3b;--yellow-600: #fdd835;--yellow-700: #fbc02d;--yellow-800: #f9a825;--yellow-900: #f57f17;--purple-50: #f3e5f5;--purple-100: #e1bee7;--purple-200: #ce93d8;--purple-300: #ba68c8;--purple-400: #ab47bc;--purple-500: #9c27b0;--purple-600: #8e24aa;--purple-700: #7b1fa2;--purple-800: #6a1b9a;--purple-900: #4a148c;--orange-50: #fff3e0;--orange-100: #ffe0b2;--orange-200: #ffcc80;--orange-300: #ffb74d;--orange-400: #ffa726;--orange-500: #ff9800;--orange-600: #fb8c00;--orange-700: #f57c00;--orange-800: #ef6c00;--orange-900: #e65100;--white-50: rgb(255, 255, 255);--white-100: rgba(255, 255, 255, 0.1);--white-200: rgba(255, 255, 255, 0.2);--white-300: rgba(255, 255, 255, 0.3);--white-400: rgba(255, 255, 255, 0.4);--white-500: rgba(255, 255, 255, 0.5);--white-600: rgba(255, 255, 255, 0.6);--white-700: rgba(255, 255, 255, 0.7);--white-800: rgba(255, 255, 255, 0.8);--white-900: rgba(255, 255, 255, 0.9);--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #eeeeee;--gray-300: #e0e0e0;--gray-400: #bdbdbd;--gray-500: #9e9e9e;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--black-50: #f7f7f7;--black-100: #e1e1e1;--black-200: #cfcfcf;--black-300: #b1b1b1;--black-400: #9e9e9e;--black-500: #7e7e7e;--black-600: #626262;--black-700: #515151;--black-800: #3b3b3b;--black-900: #222222;--black-1000: #000000;--pink-50: #fce4ec;--pink-100: #f8bbd0;--pink-200: #f48fb1;--pink-300: #f06292;--pink-400: #ec407a;--pink-500: #e91e63;--pink-600: #d81b60;--pink-700: #c2185b;--pink-800: #ad1457;--pink-900: #880e4f;--teal-50: #e0f2f1;--teal-100: #b2dfdb;--teal-200: #80cbc4;--teal-300: #4db6ac;--teal-400: #26a69a;--teal-500: #009688;--teal-600: #00897b;--teal-700: #00796b;--teal-800: #00695c;--teal-900: #004d40;--cyan-50: #e0f7fa;--cyan-100: #b2ebf2;--cyan-200: #80deea;--cyan-300: #4dd0e1;--cyan-400: #26c6da;--cyan-500: #00bcd4;--cyan-600: #00acc1;--cyan-700: #0097a7;--cyan-800: #00838f;--cyan-900: #006064;--lime-50: #f9fbe7;--lime-100: #f0f4c3;--lime-200: #e6ee9c;--lime-300: #dce775;--lime-400: #d4e157;--lime-500: #cddc39;--lime-600: #c0ca33;--lime-700: #afb42b;--lime-800: #9e9d24;--lime-900: #827717;--amber-50: #fff8e1;--amber-100: #ffecb3;--amber-200: #ffe082;--amber-300: #ffd54f;--amber-400: #ffca28;--amber-500: #ffc107;--amber-600: #ffb300;--amber-700: #ffa000;--amber-800: #ff8f00;--amber-900: #ff6f00;--brown-50: #efebe9;--brown-100: #d7ccc8;--brown-200: #bcaaa4;--brown-300: #a1887f;--brown-400: #8d6e63;--brown-500: #795548;--brown-600: #6d4c41;--brown-700: #5d4037;--brown-800: #4e342e;--brown-900: #3e2723;--indigo-50: #e8eaf6;--indigo-100: #c5cae9;--indigo-200: #9fa8da;--indigo-300: #7986cb;--indigo-400: #5c6bc0;--indigo-500: #3f51b5;--indigo-600: #3949ab;--indigo-700: #303f9f;--indigo-800: #283593;--indigo-900: #1a237e;--blueGray-50: #eceff1;--blueGray-100: #cfd8dc;--blueGray-200: #b0bec5;--blueGray-300: #90a4ae;--blueGray-400: #78909c;--blueGray-500: #607d8b;--blueGray-600: #546e7a;--blueGray-700: #455a64;--blueGray-800: #37474f;--blueGray-900: #263238}@keyframes shimmering{0%{transform:translateX(-100%) rotate(var(--shimmer-angle))}20%{transform:translateX(100%) rotate(var(--shimmer-angle))}100%{transform:translateX(100%) rotate(var(--shimmer-angle))}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spinnerWave{0%{opacity:.2;transform:scale(1)}10%{opacity:1;transform:scale(1.75)}20%{opacity:.2;transform:scale(1)}100%{opacity:.2;transform:scale(1)}}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 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);--spring: cubic-bezier(0.2, -0.36, 0, 1.46)}:root{--autocomplete-arrow: #111;--autocomplete-arrow-size-sm: 40px;--autocomplete-arrow-size-md: 24px;--autocomplete-arrow-size-lg: 30px;--autocomplete-item-hover: #d4d4d4}.--autocomplete{width:100%;background:var(--input);z-index:2}.--autocomplete .--arrow svg{fill:var(--autocomplete-arrow)}.--autocomplete.--sm{border-radius:var(--input-radius-sm)}.--autocomplete.--sm .--suggestion-list{border-radius:var(--input-radius-sm)}.--autocomplete.--sm .--arrow{width:var(--autocomplete-arrow-size-sm)}.--autocomplete.--sm .--arrow svg{width:calc(var(--autocomplete-arrow-size-sm)/2.5)}.--autocomplete.--sm .--input{width:calc(100% - var(--autocomplete-arrow-size-sm))}.--autocomplete.--md{border-radius:var(--input-radius-md)}.--autocomplete.--md .--suggestion-list{border-radius:var(--input-radius-md)}.--autocomplete.--md .--arrow{width:var(--autocomplete-arrow-size-md)}.--autocomplete.--md .--arrow svg{width:calc(var(--autocomplete-arrow-size-md)/2.5)}.--autocomplete.--md .--input{width:calc(100% - var(--autocomplete-arrow-size-md))}.--autocomplete.--lg{border-radius:var(--input-radius-lg)}.--autocomplete.--lg .--suggestion-list{border-radius:var(--input-radius-lg)}.--autocomplete.--lg .--arrow{width:var(--autocomplete-arrow-size-lg)}.--autocomplete.--lg .--arrow svg{width:calc(var(--autocomplete-arrow-size-lg)/2.5)}.--autocomplete.--lg .--input{width:calc(100% - var(--autocomplete-arrow-size-lg))}.--autocomplete .--suggestion-list{left:0px;right:0px;background:var(--input);z-index:2;padding:8px 0px;overflow-x:hidden}.--autocomplete .--suggestion-list li{cursor:pointer}.--autocomplete .--suggestion-list li:hover{background:var(--autocomplete-item-hover)}.--autocomplete .--suggestion-list li.--current{background:var(--autocomplete-item-hover)}:root{--button: var(--red-700);--button-hover: var(--red-800);--button-border: 0px;--button-color: white;--button-disabled: var(--gray-200);--button-disabled-color: var(--gray-400);--button-padding-lg: 16px 24px;--button-radius-lg: 8px;--button-font-size-lg: 18px;--button-width-lg: 200px;--button-padding-md: 12px 20px;--button-radius-md: 6px;--button-font-size-md: 16px;--button-width-md: 150px;--button-padding-sm: 8px 16px;--button-radius-sm: 4px;--button-font-size-sm: 15px;--button-width-sm: 100px}.--button{border:var(--button-border);background:var(--button);color:var(--button-color);white-space:pre;cursor:pointer}.--button.--lg{padding:var(--button-padding-lg);font-size:var(--button-font-size-lg);width:fit-content;border-radius:var(--button-radius-lg)}.--button.--md{padding:var(--button-padding-md);font-size:var(--button-font-size-md);width:fit-content;border-radius:var(--button-radius-md)}.--button.--sm{padding:var(--button-padding-sm);font-size:var(--button-font-size-sm);width:fit-content;border-radius:var(--button-radius-sm)}.--button:hover{background:var(--button-hover)}.--button:disabled{background:var(--button-disabled);color:var(--button-disabled-color);cursor:auto !important}:root{--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 20px;--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}.--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}.--checkbox svg{fill:var(--checkbox-check-color)}.--segmented.--color-scheme{--segment-item-padding-sm: 0px;--segmented-radius-sm: 20px;width:100px}:root{--context: #fff;--context-border: 0px;--context-radius: 10px;--context-padding: 10px;--context-shadow: var(--zuz-shadow);--context-seperator: #eee;--context-seperator-height: 1px;--context-seperator-margin: 3px 6px;--context-item: #fff;--context-item-color: #111;--context-item-width: 220px;--context-item-padding: 6px 10px;--context-item-gap: 10px;--context-item-font-size: 15px;--context-item-radius: 5px;--context-item-icon-size: 18px;--context-item-hover: #eee}.--contextmenu{z-index:var(--max-z-index);background:var(--context);border-radius:var(--context-radius);padding:var(--context-padding);box-shadow:var(--context-shadow)}.--contextmenu .--line{height:var(--context-seperator-height);background:var(--context-seperator);margin:var(--context-seperator-margin)}.--contextmenu .--item{width:var(--context-item-width);padding:var(--context-item-padding);gap:var(--context-item-gap);cursor:pointer;font-size:var(--context-item-font-size);border-radius:var(--context-item-radius);background:var(--context-item);border:0px;color:var(--context-item-color)}.--contextmenu .--item .--ico{font-size:var(--context-item-icon-size)}.--contextmenu .--item .--label{color:var(--context-item-color)}.--contextmenu .--item:hover{background:var(--context-item-hover)}:root{--cover-bg: rgba(255,255,255,0.8);--cover-label: #111}.--cover{backdrop-filter:blur(4px);z-index:99999;gap:15px;pointer-events:auto}.--cover .label{font-size:14px;animation:breath 1s linear infinite}:root{--fab-icon-color: #fff;--fab-position: 30px}.--fab{z-index:var(--max-z-index);border-radius:50% !important}.--fab svg path{fill:var(--fab-icon-color)}.--fab.--sm{width:40px;height:40px;padding:20px}.--fab.--md{width:50px;height:50px;padding:15px}.--fab.--lg{width:60px;height:60px;padding:20px}.--fab.--bottomright{bottom:var(--fab-position);right:var(--fab-position)}.--fab.--bottomleft{bottom:var(--fab-position);left:var(--fab-position)}.--fab.--topright{top:var(--fab-position);right:var(--fab-position)}.--fab.--topleft{top:var(--fab-position);left:var(--fab-position)}:root{--input: var(--gray-200);--input-border: 0px;--input-color: var(--black-900);--input-padding-lg: 16px 20px;--input-font-size-lg: 18px;--input-radius-lg: 6px;--input-padding-md: 12px 15px;--input-font-size-md: 16px;--input-radius-md: 4px;--input-padding-sm: 8px 12px;--input-font-size-sm: 15px;--input-radius-sm: 2px}.--input{background:var(--input);border:var(--input-border);color:var(--input-color);width:100%}.--input.--lg{padding:var(--input-padding-lg);font-size:var(--input-font-size-lg);border-radius:var(--input-radius-lg)}.--input.--md{padding:var(--input-padding-md);font-size:var(--input-font-size-md);border-radius:var(--input-radius-md)}.--input.--sm{padding:var(--input-padding-sm);font-size:var(--input-font-size-sm);border-radius:var(--input-radius-sm)}.--input.--otp{letter-spacing:1ch;font-feature-settings:"tnum";font-variant:tabular-nums;font-family:monospace;line-height:1;text-indent:1.45ch;clip-path:inset(0 1ch 0 1ch);height:2ch}:root{--list-item-padding-sm: 6px 10px}.--list.--sm li{padding:var(--list-item-padding-sm)}:root{--network-manager: #111;--network-manager-color: #fff;--network-manager-radius-sm: 8px;--network-manager-radius-md: 10px;--network-manager-radius-lg: 12px;--network-manager-padding-sm: 6px 10px;--network-manager-padding-md: 8px 12px;--network-manager-padding-lg: 10px 14px;--network-manager-icon-size-sm: 18px;--network-manager-icon-size-md: 20px;--network-manager-icon-size-lg: 24px;--network-manager-font-size-sm: 14px;--network-manager-font-size-md: 16px;--network-manager-font-size-lg: 18px}.--network-manager{color:var(--network-manager-color);z-index:var(--max-z-index);bottom:50px;left:50%}.--network-manager.--online{background:var(--green-600)}.--network-manager.--offline{background:var(--red-600)}.--network-manager svg{fill:var(--network-manager-color)}.--network-manager.--sm{padding:var(--network-manager-padding-sm);border-radius:var(--network-manager-radius-sm);font-size:var(--network-manager-font-size-sm);gap:6px}.--network-manager.--sm .--ico{width:var(--network-manager-icon-size-sm);height:var(--network-manager-icon-size-sm)}.--network-manager.--md{padding:var(--network-manager-padding-md);border-radius:var(--network-manager-radius-md);font-size:var(--network-manager-font-size-md);gap:8px}.--network-manager.--md .--ico{width:var(--network-manager-icon-size-md);height:var(--network-manager-icon-size-md)}.--network-manager.--lg{padding:var(--network-manager-padding-lg);border-radius:var(--network-manager-radius-lg);font-size:var(--network-manager-font-size-lg);gap:10px}.--network-manager.--lg .--ico{width:var(--network-manager-icon-size-lg);height:var(--network-manager-icon-size-lg)}:root{--pagination: transparent;--pagination-padding: 10px;--pagination-font-size: 15px;--pagination-current-page-bg: var(--blue-500);--pagination-current-page-color: #fff;--pagination-disabled-page-color: var(--black-300);--pagination-table-button-padding: 4px 8px;--pagination-table-button-nav-padding: 3px;--pagination-table-button-size: 35px;--pagination-table-button-border: 1px #ddd solid;--pagination-table-button-color: #111;--pagination-table-button-hover-color: #111;--pagination-table-button-bg: #fff;--pagination-table-button-hover-bg: #eee;--pagination-table-gap: 1px;--pagination-table-radius: 5px;--pagination-table-icon-size: 26px}[color-scheme=dark]{--pagination-current-page-bg: var(--blue-500);--pagination-current-page-color: #fff;--pagination-disabled-page-color: var(--white-300);--pagination-table-button-border: 1px var(--pagination-table-button-bg) solid;--pagination-table-button-color: #f9f9f9;--pagination-table-button-hover-color: #fff;--pagination-table-button-bg: #333;--pagination-table-button-hover-bg: var(--blue-500)}.--pagination{padding:var(--pagination-padding);background:var(--pagination);font-size:var(--pagination-font-size)}.--pagination .--button.--current-page{background:var(--pagination-current-page-bg) !important;color:var(--pagination-current-page-color) !important}.--pagination .--button:disabled{pointer-events:none !important;cursor:auto !important;background:rgba(0,0,0,0) !important;color:var(--pagination-disabled-page-color) !important}.--pagination.--pgt-table .--pgt-btns{gap:var(--pagination-table-gap)}.--pagination.--pgt-table .--pgt-btns.--pgt-nav{margin-left:20px}.--pagination.--pgt-table .--pgt-btns.--pgt-nav .--button{padding:var(--pagination-table-button-nav-padding)}.--pagination.--pgt-table .--button{min-width:var(--pagination-table-button-size);height:var(--pagination-table-button-size);font-size:var(--pagination-font-size);border:var(--pagination-table-button-border);background:var(--pagination-table-button-bg);color:var(--pagination-table-button-color);padding:var(--pagination-table-button-padding)}.--pagination.--pgt-table .--button:hover{background:var(--pagination-table-button-hover-bg);color:var(--pagination-table-button-hover-color)}.--pagination.--pgt-table .--button:hover svg{fill:var(--pagination-table-button-hover-color)}.--pagination.--pgt-table .--button:first-child{border-radius:var(--pagination-table-radius) 0px 0px var(--pagination-table-radius)}.--pagination.--pgt-table .--button:last-child{border-radius:0px var(--pagination-table-radius) var(--pagination-table-radius) 0px}.--pagination.--pgt-table .--button svg{fill:var(--pagination-table-button-color);width:var(--pagination-table-icon-size)}:root{--password-toggle-radius: 5px;--password-toggle: transparent;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111}.--password{overflow:hidden;width:100%}.--password .--input{padding-right:45px !important}.--password .--toggle{width:var(--password-toggle-width);background:var(--password-toggle);border:var(--password-toggle-border);padding:var(--password-toggle-padding);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--password-toggle-radius)}.--password .--toggle .b-label{line-height:0 !important}.--password .--toggle svg{width:var(--password-toggle-size);height:var(--password-toggle-size);transition:all .2s linear 0s}.--password .--toggle svg path{fill:var(--password-toggle-color)}.--password .--toggle:hover svg{transform:scale(1.1)}:root{--pin-radius: 4px;--pin-gap: 4px;--pin-shadow: inset 0px 0px 0px 2px #111;--pin-padding: 5px}.--otp{width:100%;gap:var(--pin-gap)}.--otp .--input{text-align:center;padding:var(--pin-padding) !important}.--otp .--input:not(:last-child),.--otp .--input:not(:first-child){border-radius:0px !important}.--otp .--input:first-child{border-radius:var(--pin-radius) 0px 0px var(--pin-radius) !important}.--otp .--input:last-child{border-radius:0px var(--pin-radius) var(--pin-radius) 0px !important}.--otp .--input:focus{box-shadow:var(--pin-shadow)}:root{--search-send-color: #111;--search-send: transparent;--search-radius: 5px;--search-send-border: 0px;--search-send-width-sm: 40px;--search-send-padding-sm: 5px;--search-send-size-sm: 25px;--search-send-width-md: 40px;--search-send-padding-md: 5px;--search-send-size-md: 25px;--search-send-width-lg: 40px;--search-send-padding-lg: 5px;--search-send-size-lg: 25px}[color-scheme=dark]{--search-send-color: #fff}.--search{width:100%;overflow:hidden;border-radius:var(--search-radius)}.--search.--sm .--send{padding:var(--search-send-padding-sm);width:var(--search-send-width-sm)}.--search.--sm .--send svg{width:var(--search-send-size-sm);height:var(--search-send-size-sm)}.--search.--md .--send{padding:var(--search-send-padding-md);width:var(--search-send-width-md)}.--search.--md .--send svg{width:var(--search-send-size-md);height:var(--search-send-size-md)}.--search.--lg .--send{padding:var(--search-send-padding-lg);width:var(--search-send-width-lg)}.--search.--lg .--send svg{width:var(--search-send-size-lg);height:var(--search-send-size-lg)}.--search .--send{background:var(--search-send);border:var(--search-send-border);right:2px;bottom:2px;top:2px;z-index:1}.--search .--send svg{transition:all .2s linear 0s}.--search .--send svg path{fill:var(--search-send-color)}:root{--segmented: #eee;--segmented-border: 1px #ddd solid;--segment-item: transparent;--segment-item-border: 0px;--segment-item-font-weight: normal;--segment-item-color: #999;--segment-item-active-color: #111;--segment-tab: #fff;--segment-tab-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segmented-speed: 0.5s;--segmented-radius-sm: 8px;--segmented-padding-sm: 2px;--segmented-radius-md: 8px;--segmented-padding-md: 2px;--segmented-radius-lg: 8px;--segmented-padding-lg: 2px;--segment-item-padding-sm: 5px 12px;--segment-item-font-size-sm: 15px;--segment-item-radius-sm: calc(var(--segmented-radius-sm) - var(--segmented-padding-sm));--segment-item-svg-size-sm: 18px;--segment-item-padding-md: 5px 12px;--segment-item-font-size-md: 15px;--segment-item-radius-md: calc(var(--segmented-radius-md) - var(--segmented-padding-md));--segment-item-svg-size-md: 18px;--segment-item-padding-lg: 5px 12px;--segment-item-font-size-lg: 15px;--segment-item-radius-lg: calc(var(--segmented-radius-lg) - var(--segmented-padding-lg));--segment-item-svg-size-lg: 18px}[color-scheme=dark] body{--segmented: #444;--segmented-border: 1px #555 solid;--segment-tab: #212121;--segment-item-color: #a0a0a0;--segment-item-active-color: #fff}.--segmented{background:var(--segmented);border:var(--segmented-border);overflow:hidden}.--segmented.--sm{border-radius:var(--segmented-radius-sm);padding:var(--segmented-padding-sm)}.--segmented.--sm .--segment-item{padding:var(--segment-item-padding-sm);font-size:var(--segment-item-font-size-sm);border-radius:var(--segment-item-radius-sm)}.--segmented.--sm .--segment-item svg{width:var(--segment-item-svg-size-sm)}.--segmented.--sm .--segment-tab{border-radius:calc(var(--segmented-radius-sm) - var(--segmented-padding-sm));transform:translateX(calc(var(--x) - var(--segmented-padding-sm)));top:var(--segmented-padding-sm);bottom:var(--segmented-padding-sm)}.--segmented.--md{border-radius:var(--segmented-radius-md);padding:var(--segmented-padding-md)}.--segmented.--md .--segment-item{padding:var(--segment-item-padding-md);font-size:var(--segment-item-font-size-md);border-radius:var(--segment-item-radius-md)}.--segmented.--md .--segment-item svg{width:var(--segment-item-svg-size-md)}.--segmented.--md .--segment-tab{border-radius:calc(var(--segmented-radius-md) - var(--segmented-padding-md));transform:translateX(calc(var(--x) - var(--segmented-padding-md)));top:var(--segmented-padding-md);bottom:var(--segmented-padding-md)}.--segmented.--lg{border-radius:var(--segmented-radius-lg);padding:var(--segmented-padding-lg)}.--segmented.--lg .--segment-item{padding:var(--segment-item-padding-lg);font-size:var(--segment-item-font-size-lg);border-radius:var(--segment-item-radius-lg)}.--segmented.--lg .--segment-item svg{width:var(--segment-item-svg-size-lg)}.--segmented.--lg .--segment-tab{border-radius:calc(var(--segmented-radius-lg) - var(--segmented-padding-lg));transform:translateX(calc(var(--x) - var(--segmented-padding-lg)));top:var(--segmented-padding-lg);bottom:var(--segmented-padding-lg)}.--segmented .--segment-item{background:var(--segment-item);border:var(--segment-item-border);color:var(--segment-item-color);font-weight:var(--segment-item-font-weight);z-index:1;flex:1}.--segmented .--segment-item .--segment-label{white-space:pre;transition:all var(--segmented-speed) var(--ease) 0s}.--segmented .--segment-item svg{fill:var(--segment-item-color)}.--segmented .--segment-item svg react{fill:var(--segment-item-color)}.--segmented .--segment-item svg path{fill:var(--segment-item-color)}.--segmented .--segment-item.--segement-active{color:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg{fill:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg react{fill:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg path{fill:var(--segment-item-active-color)}.--segmented .--segment-tab{background:var(--segment-tab);width:var(--w);z-index:0;transition:all var(--segmented-speed) var(--ease) 0s}:root{--spinner-color: #111}[color-scheme=dark]{--spinner-color: #f9f9f9}.--spinner.--simple{aspect-ratio:1;animation:spin infinite}.--spinner.--wave{display:flex;align-items:center;gap:var(--spinner-gap)}.--spinner.--wave.--def,.--spinner.--wave.--sm{--spinner-radius: 2px;--spinner-gap: 3px;--spinner-wave-width: 4px;--spinner-wave-height: 10px}.--spinner.--wave.--md{--spinner-radius: 2px;--spinner-gap: 4px;--spinner-wave-width: 5px;--spinner-wave-height: 14px}.--spinner.--wave.--lg{--spinner-radius: 3px;--spinner-gap: 4px;--spinner-wave-width: 6px;--spinner-wave-height: 16px}.--spinner.--wave .--dot{width:var(--spinner-wave-width);background:var(--spinner-color);border-radius:var(--spinner-radius)}.--spinner.--wave .--dot.--dot-1{animation:spinnerWave infinite;animation-delay:.1s;height:var(--spinner-wave-height);animation-duration:1.5s;animation-timing-function:ease-in-out}.--spinner.--wave .--dot.--dot-2{animation:spinnerWave infinite;animation-delay:.2s;height:calc(var(--spinner-wave-height)*1.1);animation-duration:1.5s;animation-timing-function:ease-in-out}.--spinner.--wave .--dot.--dot-3{animation:spinnerWave infinite;animation-delay:.3s;height:calc(var(--spinner-wave-height)*1.25);animation-duration:1.5s;animation-timing-function:ease-in-out}:root{--switch-height: 24px;--switch-width: 42px;--switch-knob-size: 20px;--switch-knob-left: 2px;--switch-knob-top: 2px;--switch-knob-left-on: 18px;--switch-checked: rgb(46, 161, 42);--switch-unchecked: rgb(203, 203, 203);--switch-knob: #fff;--switch-knob-shadow: #000;--switch-knob-shadow-size: 2px}.--switch{height:var(--switch-height);width:var(--switch-width);min-height:var(--switch-height);min-width:var(--switch-width);max-height:var(--switch-height);max-width:var(--switch-width);cursor:pointer}.--switch.--md{--switch-height: 20px;--switch-width: 36px;--switch-knob-size: 16px;--switch-knob-left-on: 16px}.--switch.--sm{--switch-height: 10px;--switch-width: 34px;--switch-knob-size: 16px;--switch-knob-left: 0px;--switch-knob-top: -3px}.--switch input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.--switch:before{content:"";position:absolute;height:var(--switch-height);width:var(--switch-width);background:var(--switch-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.--switch:after{content:"";position:absolute;width:var(--switch-knob-size);height:var(--switch-knob-size);background:var(--switch-knob);border-radius:50px;z-index:2;top:var(--switch-knob-top);left:var(--switch-knob-left);box-shadow:0px 0px var(--switch-knob-shadow-size) var(--switch-knob-shadow);transition:all .75s var(--bounce) 0s}.--switch.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--switch-checked)}.--switch.is-checked:after{transform:translateX(var(--switch-knob-left-on))}:root{--table: transparent;--table-row: #eee;--table-row-even: #f1f1f1;--table-row-odd: #f9f9f9;--table-row-gap: 2px;--table-radius: 10px;--table-head-padding: 0px;--table-row-padding: 0px;--table-head-col-padding: 10px;--table-col-padding: 10px;--table-border: 1px #eee solid}[color-scheme=dark]{--table-row: #333;--table-row-even: #333;--table-row-odd: #444}.--table{background:var(--table);gap:var(--table-row-gap)}.--table .--row{background:var(--table-row)}.--table .--row:not(.--row-head){padding:var(--table-row-padding)}.--table .--row:not(.--row-head) .--col{padding:var(--table-col-padding)}.--table .--row:nth-child(1){border-radius:var(--table-radius) var(--table-radius) 0px 0px}.--table .--row:last-child{border-radius:0px 0px var(--table-radius) var(--table-radius)}.--table .--row:nth-child(even){background:var(--table-row-even)}.--table .--row:nth-child(odd){background:var(--table-row-odd)}.--table .--row.--row-head{font-weight:bold;padding:var(--table-head-padding) !important}.--table .--row.--row-head .--col{padding:var(--table-head-col-padding)}.--with-tooltip{--tooltip: #222;--tooltip-color: #fafafa;--tooltip-font-size: 12px;--tooltip-font-weight: normal;--tooltip-radius: 5px;--tooltip-padding: 2px 4px;--tooltip-arrow-size: 10px}.--with-tooltip .--tooltip{background:var(--tooltip);color:var(--tooltip-color);font-size:var(--tooltip-font-size);font-weight:var(--tooltip-font-weight);border-radius:var(--tooltip-radius);padding:var(--tooltip-padding);z-index:var(--max-z-index);overflow:visible;pointer-events:none;user-select:none}.--with-tooltip .--tooltip:before{content:"";position:absolute;width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);border-radius:calc(var(--tooltip-radius)/2);background:var(--tooltip);z-index:0}.--with-tooltip .--tooltip .--text{z-index:1;white-space:pre}.--with-tooltip .--tooltip.--top:before{bottom:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--bottom:before{top:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--left:before{right:-0.2lh;top:50%;transform:translateY(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--right:before{left:-0.2lh;top:50%;transform:translateY(-50%) rotate(45deg)}:root{--treeview-gap: 6px;--treenode-gap: 2px;--treenode-arrow-btn-size: 20px;--treenode-arrow-btn-opacity: 1;--treenode-arrow-icon-size: 12px;--treenode-arrow-icon-color: #111;--treenode-label-padding: 3px 6px;--treenode-label-radius: 3px 6px;--treenode-label-hover: #f1f1f1;--treenode-label-bg: transparent;--treenode-label-selected-bg: #eee;--treenode-label-selected-color: #111;--treenode-label-icon-color: #111;--treenode-label-icon-size: 15px;--treenode-label-color: #111;--treenode-label-size: 15px;--treenode-label-gap: 6px;--treenode-sub-margin: 20px}.--treeview{gap:var(--treeview-gap);width:100%}.--treeview .--node{gap:var(--treenode-gap);cursor:pointer}.--treeview .--node .--node-aro-btn{width:var(--treenode-arrow-btn-size);height:var(--treenode-arrow-btn-size);border:0px;background:rgba(0,0,0,0);opacity:var(--treenode-arrow-btn-opacity);transition:all .4s linear 0s}.--treeview .--node .--node-aro-btn:hover{opacity:1}.--treeview .--node .--node-aro-btn .--node-aro-icon{font-size:var(--treenode-arrow-icon-size);color:var(--treenode-arrow-icon-color)}.--treeview .--node .--node-meta{background:rgba(0,0,0,0);gap:var(--treenode-label-gap);border:0px}.--treeview .--node .--node-meta .--node-icon{font-size:var(--treenode-label-icon-size);color:var(--treenode-label-icon-color)}.--treeview .--node .--node-meta .--node-label{background:var(--treenode-label-bg);color:var(--treenode-label-color);font-size:var(--treenode-label-size);padding:var(--treenode-label-padding);border-radius:var(--treenode-label-radius)}.--treeview .--node .--node-meta:hover .--node-label{background:var(--treenode-label-hover)}.--treeview .--node.--selected .--node-meta .--node-label{background:var(--treenode-label-selected-bg);color:var(--treenode-label-selected-color)}.--treeview .--sub-node{margin-top:var(--treeview-gap);gap:var(--treeview-gap);padding-left:var(--treenode-sub-margin)}*,*::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{--max-z-index: 2147483647;--zuz-shadow: 0px 0px 0px 1px #d4d4d4, 0px 0px 6px #ccc;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--overlay: rgba(0, 0, 0, 0.7);--overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--drawer-shadow: var(--zuz-shadow);--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-gap: 5px;--tab-label-size: 15px;--tab-icon-size: 15px;--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-shadow: var(--zuz-shadow);--sheet-body: #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;--progress-width: 100%;--progress-height: 6px;--progress-radius: 6px;--progress-track: #eee;--progress-bar: #111;--skeleton: #eee;--skeleton-radius: 7px;--shimmer: #ccc;--shimmer-width: 10%;--shimmer-angle: 120deg;--shimmer-text-angle: 45deg;--shimmer-speed: 2s;--shimmer-blur: 50px;--shimmer-offset: 0;--shimmer-flame: linear-gradient( var(--shimmer-text-angle), transparent, hsl(45 100% 60%),hsl(0 100% 50%), #000, transparent );--shimmer-aurora: linear-gradient( var(--shimmer-text-angle), transparent, #a960ee,#ff333d,#ffcb57,#90e0ff, transparent );--shimmer-classic: linear-gradient( var(--shimmer-text-angle), transparent, #fff,transparent );--alert-error: #ffd4d4;--alert-error-color: #ae1313;--alert-info: #bee3f8;--alert-info-color: #2b6cb0;--alert-warning: #feebc8;--alert-warning-color: #c05621;--alert-success: #c6f6d5;--alert-success-color: #2f855a;--alert-padding: 12px;--alert-radius: 10px;--alert-gap: 10px;--avatar-bg: #fff;--accordion: #fff;--accordion-label: #111;--accordion-radius: 5px;--accordion-border: 1px #ddd solid;--accordion-head: #fff;--accordion-head-padding: 10px;--accordion-head-font-size: 16px;--accordion-head-font-weight: normal;--accordion-head-arrow-size: 18px;--accordion-head-arrow: #111;--accordion-detail-padding: 10px;--accordion-detail-font-size: 15px;--select-width: auto;--select: #fff;--select-radius: 5px;--select-border: 1px #ddd solid;--select-padding: 6px 8px;--select-font-size: 16px;--select-z-index: 1;--select-gap: 5px;--select-arrow-size: 16px;--select-arrow-color: #111;--select-hover: #e6e6e6;--select-options: #eee;--select-options-max-height: 400px;--select-options-top: 0.1rem;--select-options-padding: 4px;--select-option-color: #111;--select-option-hover: #ddd;--select-option-padding: var(--select-padding);--select-option-radius: var(--select-radius);--select-selected: #ccc;--select-shadow: inherit;--select-search: #fff;--select-search-border: 1px #ddd solid;--select-search-padding: 4px 8px;--select-search-radius: 10px;--select-search-font-size: 15px;--select-search-color: #111;--select-search-margin-bottom: 4px;--tip-s: 0;--actionbar: #fff;--actionbar-radius: 50px;--actionbar-padding: 2px;--actionbar-shadow: 0px 0px 0px 1px #ccc, 0px 0px 8px #c0b0b0;--actionbar-gap: 2px;--actionbar-action-size: 40px;--actionbar-action: transparent;--actionbar-action-color: #111;--actionbar-action-hover: #ddd;--actionbar-action-selected: #eee;--actionbar-action-border: 0px;--actionbar-action-padding: 6px;--actionbar-action-radius: 20px;--actionbar-action-icon-size: 18px;--actionbar-tooltip: #111;--actionbar-tooltip-padding: 2px 0px;--actionbar-tooltip-radius: 10px;--actionbar-tooltip-color: #fff;--actionbar-tooltip-speed: 0.05s;--actionbar-tooltip-track-speed: 0.3s;--slider-radius: 5px;--slider-knob-size: 20px;--slider-knob-width: var(--slider-knob-size);--slider-knob-height: var(--slider-knob-size);--slider-knob-color: #fff;--slider-knob-radius: 50%;--slider-knob-border: 1px #ccc solid;--slider-knob-shadow: 0px 0px 2px #ccc;--slider-track: #fff;--slider-track-border: 1px #ddd solid;--slider-fill: #111;--slider-text: rgb(0, 98, 255);--slider-text-size: 15px;--slider-text-weight: normal}.flex{display:flex}.flex.cols{flex-direction:column}.flex.ass{align-self:flex-start}.flex.asc{align-self:center}.flex.ase{align-self:flex-end}.flex.aic{align-items:center}.flex.aie{align-items:flex-end}.flex.jcc{justify-content:center}.flex.jce{justify-content:flex-end}.flex.jcs{justify-content:flex-start}.abs{position:absolute}.abs.abc{top:50%;left:50%;transform:translate(-50%, -50%)}.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}.bold{font-weight:bold}.text-wrap,.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}x .center-h{left:50%;transform:translateX(-50%)}.center-v{top:50%;transform:translateY(-50%)}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}button .b-label:empty{display:none}.--overlay{background:var(--overlay);z-index:var(--max-z-index);backdrop-filter:blur(var(--overlay-blur))}.--accordion{background:var(--accordion);border:var(--accordion-border);border-radius:var(--accordion-radius);overflow:hidden}.--accordion .--toggle{border:0px;background:var(--accordion-head);padding:var(--accordion-head-padding);border-radius:var(--accordian-radius);flex:1;width:100%}.--accordion .--toggle .--label{flex:1;color:var(--accordion-label);font-size:var(--accordion-head-font-size);font-weight:var(--accordion-head-font-weight)}.--accordion .--toggle .--arrow{width:var(--accordion-head-arrow-size)}.--accordion .--toggle .--arrow svg path{fill:var(--accordion-head-arrow)}.--accordion .--detail{padding:var(--accordion-detail-padding);font-size:var(--accordion-detail-font-size)}.--select{width:var(--select-width)}.--select .--selected{width:100%;gap:var(--select-gap);background:var(--select);border-radius:var(--select-radius);border:var(--select-border);padding:var(--select-padding);font-size:var(--select-font-size);box-shadow:var(--select-shadow);line-height:1}.--select .--selected:hover{background:var(--select-hover)}.--select .--selected .--label{flex:1;text-align:left;color:var(--select-option-color)}.--select .--selected .--svg-arrow{width:var(--select-arrow-size)}.--select .--selected .--svg-arrow svg{fill:var(--select-arrow-color)}.--select .--options-list{backdrop-filter:blur(10px) saturate(0);left:0;top:calc(100% + var(--select-options-top));width:100%;max-height:var(--select-options-max-height);overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:var(--select-options-padding);box-shadow:var(--select-options-shadow);z-index:var(--max-z-index)}.--select .--options-list .--select-search{border:var(--select-search-border);padding:var(--select-search-padding);background:var(--select-search);border-radius:var(--select-search-radius);font-size:var(--select-search-font-size);color:var(--select-search-color);margin-bottom:var(--select-search-margin-bottom)}.--select .--options-list button{background:rgba(0,0,0,0);border:0px;text-align:left;color:var(--select-option-color);padding:var(--select-option-padding);border-radius:var(--select-option-radius);font-size:var(--select-font-size);white-space:pre;text-align:left !important;justify-content:flex-start}.--select .--options-list button:hover{background:var(--select-option-hover)}.--select .--options-list button.selected{background:var(--select-selected)}.--shimmer{background-clip:text;color:rgba(0,0,0,0);animation:textshimmer calc(var(--shimmer-speed)*3) infinite both ease-in-out;background-repeat:no-repeat;background-size:10%;background-color:#222}.--shimmer.--classic{background-image:var(--shimmer-classic)}.--shimmer.--aurora{background-image:var(--shimmer-aurora)}.--shimmer.--flame{background-image:var(--shimmer-flame)}.--radio{--radio-size: 16px;--radio: var(--black-900);--radio-fill: #fff;--radio-border: 1px var(--radio) solid;--radio-gap: 5px;--radio-padding: 6px;gap:var(--radio-gap);line-height:1}.--radio input[type=radio]{z-index:0;left:0px;top:0px;opacity:0}.--radio .--dot{width:var(--radio-size);height:var(--radio-size);background:var(--radio-fill);border:var(--radio-border);border-radius:50%}.--radio .--dot .--rod{width:calc(var(--radio-size) - var(--radio-padding)*1.5);height:calc(var(--radio-size) - var(--radio-padding)*1.5);border-radius:50%}.--radio .--value{flex:1}.--radio input[type=radio]:checked~.--dot{background:var(--radio)}.--radio input[type=radio]:checked~.--dot .--rod{background:var(--radio-fill)}.--skeleton{overflow:hidden;border-radius:var(--skeleton-radius);height:1lh;background:var(--skeleton);position:relative}.--skeleton:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, var(--skeleton) 0%, var(--shimmer) 50%, var(--skeleton) 100%);transform:translateX(-100%) rotate(var(--shimmer-angle));animation-name:shimmering;animation-direction:var(--shimmer-direction);animation-duration:var(--shimmer-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite;filter:blur(var(--shimmer-blur))}.--toast,.--sheet.--sheet-warn,.--sheet.--sheet-success,.--sheet.--sheet-error,.--sheet.--sheet-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.--sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:var(--max-z-index);transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.--sheet.--wobble{transform-origin:inherit !important}.--sheet.--sheet-default{background:#333;color:#fff;top:10px !important}.--sheet.--sheet-error{background:var(--sheet-error);color:#fff;top:10px}.--sheet.--sheet-success{background:var(--sheet-success);color:#fff;top:10px}.--sheet.--sheet-warn{background:var(--sheet-warn);color:#111;top:10px}.--sheet.--sheet-form{position:absolute !important}.--sheet.--sheet-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);box-shadow:var(--sheet-shadow)}.--sheet .--head{padding:var(--sheet-head-padding)}.--sheet .--head .--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}.--sheet .--head .--dot{flex:1}.--sheet .--head .--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)}.--sheet .--head .--closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.--sheet .--body{background:var(--sheet-body);padding:var(--sheet-body-padding)}.--sheet .--body.--no-action{border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.--sheet .--footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer);border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.--sheet .--footer .--action{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}.--sheet .--footer .--action:hover{background:var(--sheet-action-hover)}.drawer-h,.--drawer.--right,.--drawer.--left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.--drawer.--bottom,.--drawer.--top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.--drawer{background:var(--drawer-color);border:var(--drawer-border);box-shadow:var(--drawer-shadow);z-index:var(--max-z-index);overflow-x:hidden;overflow-y:auto}.--drawer.--left{left:0px}.--drawer.--right{right:0px}.--drawer.--top{top:0px}.--drawer.--bottom{bottom:0px}.--drawer .--handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.--icon.--sm{font-size:14px}.--icon.--md{font-size:16px}.--icon.--lg{font-size:18px}.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 .--head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.--tabview .--head .--tab{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color);gap:var(--tab-gap)}.--tabview .--head .--tab.--active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.--tabview .--head .--tab.--active:hover{background:var(--tab-active)}.--tabview .--head .--tab:hover{background:var(--tab-hover)}.--tabview .--body{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.--tabview .--body .--track{transform-style:flat}.--tabview .--body .--content{width:100%;background:var(--tab-body);padding:var(--tab-body-padding);align-self:baseline}.--progress{background:var(--progress-track);width:var(--progress-width);height:var(--progress-height);border-radius:var(--progress-radius);overflow:hidden}.--progress .--bar{width:0%;background:var(--progress-bar);height:var(--progress-height);border-radius:var(--progress-radius)}.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}.--alert{padding:var(--alert-padding);border-radius:var(--alert-radius);gap:var(--alert-gap)}.--alert .--icon{width:20px;height:20px}.--alert .--meta{gap:2px}.--alert .--meta .--title.--tm{font-weight:bold}.--alert.--info{background:var(--alert-info);color:var(--alert-info-color)}.--alert.--info path{fill:var(--alert-info-color)}.--alert.--warning{background:var(--alert-warning);color:var(--alert-warning-color)}.--alert.--warning path{fill:var(--alert-warning-color)}.--alert.--error{background:var(--alert-error);color:var(--alert-error-color)}.--alert.--error path{fill:var(--alert-error-color)}.--alert.--success{background:var(--alert-success);color:var(--alert-success-color)}.--alert.--success path{fill:var(--alert-success-color)}.--avatar{overflow:hidden}.--avatar #squareRadiusClipPath{position:absolute;top:-1000000000;left:-1000000000;opacity:0}.--avatar img{background:var(--avatar-bg);width:100%;height:100%;display:block}.--avatar.--circle img{border-radius:50%}.--avatar.--square{clip-path:url(#squareRadiusClipPath);-webkit-clip-path:url(#squareRadiusClipPath)}.--actionbar{background:var(--actionbar);border-radius:var(--actionbar-radius);padding:var(--actionbar-padding);box-shadow:var(--actionbar-shadow);gap:var(--actionbar-gap)}.--actionbar.--bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:20px}.--actionbar .--action{color:var(--actionbar-action-color);width:var(--actionbar-action-size);height:var(--actionbar-action-size);background:var(--actionbar-action);border:var(--actionbar-action-border);padding:var(--actionbar-action-padding);border-radius:var(--actionbar-action-radius);flex:1}.--actionbar .--action svg{width:100%;height:100%}.--actionbar .--action img{width:100%;height:100%}.--actionbar .--action .--icon{font-size:var(--actionbar-action-icon-size)}.--actionbar .--action:hover{background:var(--actionbar-action-hover)}.--actionbar .--action.--selected{background:var(--actionbar-action-selected)}.--actionbar .--tip{--tip-width: calc( var(--tip-w) * 1ch + 6px );translate:calc(-50% + var(--tip-x)*1px) calc(-50% + var(--tip-y)*1px);bottom:60px;background:var(--actionbar-tooltip);padding:var(--actionbar-tooltip-padding);border-radius:var(--actionbar-tooltip-radius);color:var(--actionbar-tooltip-color);scale:var(--tip-s);transform-origin:center;width:var(--tip-width);transition:all var(--actionbar-tooltip-speed) linear 0s;overflow:hidden}.--actionbar .--tip .--track{width:calc(var(--tip-width)*var(--tip-l));translate:calc(var(--tip-m)*var(--tip-width)*-1) 0px;transition:all var(--actionbar-tooltip-track-speed) var(--spring) 0s}.--actionbar .--tip .--track .--lb{text-align:center;width:var(--tip-width)}.--draggable{cursor:grab}.--slider.--range{min-height:10px;width:100%;min-width:100px}.--slider.--number{width:fit-content;text-align:center}.--slider input{height:100%;width:100%;opacity:0;touch-action:none}.--slider input[type=range]:hover{cursor:grab}.--slider input[type=range]:active{cursor:grabbing}.--slider input[type=number]{cursor:ns-resize}.--slider .--slider-track{background:var(--slider-track);height:100%;border-radius:var(--slider-radius);overflow:hidden;border:var(--slider-track-border)}.--slider .--slider-track:after{content:"";position:absolute;top:0px;bottom:0px;left:0px;width:calc(var(--value)*1% - var(--slider-knob-size)/2);background:var(--slider-fill);border-radius:var(--slider-radius)}.--slider .--slider-knob{width:var(--slider-knob-width);height:var(--slider-knob-height);top:50%;transform:translateY(-50%);left:clamp(0%,var(--value)*1% - var(--slider-knob-size),100%);background:var(--slider-knob-color);border-radius:var(--slider-knob-radius);border:var(--slider-knob-border);box-shadow:var(--slider-knob-shadow);pointer-events:none}.--slider .--slider-text{text-decoration:none;color:var(--slider-text);cursor:ew-resize;text-align:center;user-select:none;font-size:var(--slider-text-size);font-weight:var(--slider-text-weight)}.--with-timeline{border:1px blue solid}.--timeline{--timeline: #fff;--timeline-layer-height: 45px;--timeline-layer-padding: 10px;bottom:0px;left:0px;right:0px;z-index:calc(var(--max-z-index) - 99);background:var(--timeline);max-height:300px}.--timeline .--layers{flex:1}.--timeline .--layers .--layer{border-bottom:1px #ddd solid;background:#fff;transition:all .5s linear 0s}.--timeline .--layers .--layer:hover{background:#f7f7f7}.--timeline .--layers .--layer.--head{cursor:auto;border-bottom:1px #ddd solid;top:0px;z-index:1}.--timeline .--layers .--layer.--head:hover{background:#fff}.--timeline .--layers .--layer.--head .--meta{gap:10px;border-right:1px #ddd solid;padding:0px 10px}.--timeline .--layers .--layer.--head .--meta .--buns{flex:1}.--timeline .--layers .--layer.--head .--meta .--bus{gap:5px}.--timeline .--layers .--layer.--head .--meta .--bus .--choose-time{gap:2px;--slider-text-size: 16px;--slider-text-weight: bold;height:40px;width:40px;border-left:1px #ddd solid;border-right:1px #ddd solid;padding:0px 4px}.--timeline .--layers .--layer.--head .--meta button{width:40px;height:40px;border:0px;background:rgba(0,0,0,0);border-radius:100%;padding:5px}.--timeline .--layers .--layer.--head .--meta button:hover{background:#eee}.--timeline .--layers .--layer.--head .--track{padding:0px 0px 0px 10px}.--timeline .--layers .--layer.--head .--track .--stamps{flex:1}.--timeline .--layers .--layer.--head .--track .--stamps .--stmp{flex:1;user-select:none}.--timeline .--layers .--layer .--meta{border-right:1px #ddd solid;gap:2px;max-width:30vw;min-width:30vw;flex:1}.--timeline .--layers .--layer .--meta .--chevron{width:24px;height:24px;border:0px;background:rgba(0,0,0,0);opacity:.5;padding:2px}.--timeline .--layers .--layer .--meta .--chevron:hover{opacity:1}.--timeline .--layers .--layer .--meta .--icon{width:10px;height:10px;background:#ccc;border-radius:2px;margin-right:5px}.--timeline .--layers .--layer .--meta .--label{flex:1}.--timeline .--layers .--layer .--meta .--value{flex:1;max-width:100px}.--timeline .--layers .--layer .--meta .--prop{background:#f1f1f1;padding:2px}.--timeline .--layers .--layer .--meta .--sub-prop{padding:2px 2px 2px 30px;background:#f9f9f9}.--timeline .--layers .--layer .--meta .--sub-prop .--add-key{border:0px;background:rgba(0,0,0,0);width:20px;height:20px;padding:4px;opacity:.5;margin-right:5px}.--timeline .--layers .--layer .--meta .--sub-prop .--add-key:hover{opacity:1}.--timeline .--layers .--layer .--meta .--sub-prop .--plbl{flex:1;user-select:none;font-size:15px}.--timeline .--layers .--layer .--meta .--sub-prop .--value{--select: transparent;--select-border: 0px;--select-padding: 1px 4px;--select-width: 60px;min-width:115px;max-width:115px}.--timeline .--layers .--layer .--meta .--sub-prop .--value .--chv{width:12px;height:12px}.--timeline .--layers .--layer .--track{padding:2px;flex:1;height:100%;gap:2px}.--timeline .--layers .--layer .--track .--bar{background:#98cbff;border:1px #7fbbfa solid;min-width:5%;height:100%;border-radius:4px}.--timeline .--layers .--layer .--track .--bar.--sub{background:#eee;border:1px #e5e0e0 solid}.--timeline .--cursor{width:5px;height:100%;left:calc(30vw + 5px);z-index:1}.--timeline .--cursor:before{content:"";position:absolute;top:35px;left:2px;width:2px;height:calc(100% - 30px);background:#111}.--timeline .--cursor:after{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:14px;height:25px;background:#111;border-radius:5px 5px 10px 10px;cursor:grab}.--timeline .--cursor:after:active{cursor:grabbing}.--sidebar{--sidebar-padding: 10px;--sidebar-bg: #fff;background:var(--sidebar-bg);padding:var(--sidebar-padding)}.--sidebar .--nav{flex:1}.--cookie-consent{--cookie-consent: #fff;--cookie-consent-radius: 20px;--cookie-consent-padding: 20px;--cookie-consent-width: 320px;--cookie-consent-font-size: 18px;--cookie-consent-action: #222;z-index:var(--max-z-index);background:var(--cookie-consent);border-radius:var(--cookie-consent-radius);padding:var(--cookie-consent-padding);gap:15px;position:fixed;bottom:20px;width:var(--cookie-consent-width);font-size:var(--cookie-consent-font-size)}.--cookie-consent.--left{left:20px}.--cookie-consent.--right{right:20px}.--cookie-consent .--title{font-weight:bold}.--cookie-consent .--message{font-size:calc(var(--cookie-consent-font-size)*.8)}.--cookie-consent .--footer{margin-top:20px;gap:10px}.--cookie-consent button{flex:1;border:0px;border-radius:var(--cookie-consent-radius);padding:10px;font-weight:bold}.--cookie-consent button.--accept{color:#fff;background:var(--cookie-consent-action)}.--cookie-consent button.--accept:hover{opacity:.9}.--cookie-consent button.--reject{color:var(--cookie-consent-action);background:rgba(0,0,0,0)}.--cookie-consent button.--reject:hover{background:var(--cookie-consent-action);color:#fff}
+:root{--red-50: #fef2f2;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--green-50: #e8f5e9;--green-100: #c8e6c9;--green-200: #a5d6a7;--green-300: #81c784;--green-400: #66bb6a;--green-500: #4caf50;--green-600: #43a047;--green-700: #388e3c;--green-800: #2e7d32;--green-900: #1b5e20;--blue-50: #e3f2fd;--blue-100: #bbdefb;--blue-200: #90caf9;--blue-300: #64b5f6;--blue-400: #42a5f5;--blue-500: #2196f3;--blue-600: #1e88e5;--blue-700: #1976d2;--blue-800: #1565c0;--blue-900: #0d47a1;--yellow-50: #fffde7;--yellow-100: #fff9c4;--yellow-200: #fff59d;--yellow-300: #fff176;--yellow-400: #ffee58;--yellow-500: #ffeb3b;--yellow-600: #fdd835;--yellow-700: #fbc02d;--yellow-800: #f9a825;--yellow-900: #f57f17;--purple-50: #f3e5f5;--purple-100: #e1bee7;--purple-200: #ce93d8;--purple-300: #ba68c8;--purple-400: #ab47bc;--purple-500: #9c27b0;--purple-600: #8e24aa;--purple-700: #7b1fa2;--purple-800: #6a1b9a;--purple-900: #4a148c;--orange-50: #fff3e0;--orange-100: #ffe0b2;--orange-200: #ffcc80;--orange-300: #ffb74d;--orange-400: #ffa726;--orange-500: #ff9800;--orange-600: #fb8c00;--orange-700: #f57c00;--orange-800: #ef6c00;--orange-900: #e65100;--white-50: rgb(255, 255, 255);--white-100: rgba(255, 255, 255, 0.1);--white-200: rgba(255, 255, 255, 0.2);--white-300: rgba(255, 255, 255, 0.3);--white-400: rgba(255, 255, 255, 0.4);--white-500: rgba(255, 255, 255, 0.5);--white-600: rgba(255, 255, 255, 0.6);--white-700: rgba(255, 255, 255, 0.7);--white-800: rgba(255, 255, 255, 0.8);--white-900: rgba(255, 255, 255, 0.9);--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #eeeeee;--gray-300: #e0e0e0;--gray-400: #bdbdbd;--gray-500: #9e9e9e;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--black-50: #f7f7f7;--black-100: #e1e1e1;--black-200: #cfcfcf;--black-300: #b1b1b1;--black-400: #9e9e9e;--black-500: #7e7e7e;--black-600: #626262;--black-700: #515151;--black-800: #3b3b3b;--black-900: #222222;--black-1000: #000000;--pink-50: #fce4ec;--pink-100: #f8bbd0;--pink-200: #f48fb1;--pink-300: #f06292;--pink-400: #ec407a;--pink-500: #e91e63;--pink-600: #d81b60;--pink-700: #c2185b;--pink-800: #ad1457;--pink-900: #880e4f;--teal-50: #e0f2f1;--teal-100: #b2dfdb;--teal-200: #80cbc4;--teal-300: #4db6ac;--teal-400: #26a69a;--teal-500: #009688;--teal-600: #00897b;--teal-700: #00796b;--teal-800: #00695c;--teal-900: #004d40;--cyan-50: #e0f7fa;--cyan-100: #b2ebf2;--cyan-200: #80deea;--cyan-300: #4dd0e1;--cyan-400: #26c6da;--cyan-500: #00bcd4;--cyan-600: #00acc1;--cyan-700: #0097a7;--cyan-800: #00838f;--cyan-900: #006064;--lime-50: #f9fbe7;--lime-100: #f0f4c3;--lime-200: #e6ee9c;--lime-300: #dce775;--lime-400: #d4e157;--lime-500: #cddc39;--lime-600: #c0ca33;--lime-700: #afb42b;--lime-800: #9e9d24;--lime-900: #827717;--amber-50: #fff8e1;--amber-100: #ffecb3;--amber-200: #ffe082;--amber-300: #ffd54f;--amber-400: #ffca28;--amber-500: #ffc107;--amber-600: #ffb300;--amber-700: #ffa000;--amber-800: #ff8f00;--amber-900: #ff6f00;--brown-50: #efebe9;--brown-100: #d7ccc8;--brown-200: #bcaaa4;--brown-300: #a1887f;--brown-400: #8d6e63;--brown-500: #795548;--brown-600: #6d4c41;--brown-700: #5d4037;--brown-800: #4e342e;--brown-900: #3e2723;--indigo-50: #e8eaf6;--indigo-100: #c5cae9;--indigo-200: #9fa8da;--indigo-300: #7986cb;--indigo-400: #5c6bc0;--indigo-500: #3f51b5;--indigo-600: #3949ab;--indigo-700: #303f9f;--indigo-800: #283593;--indigo-900: #1a237e;--slate-50: #eceff1;--slate-100: #cfd8dc;--slate-200: #b0bec5;--slate-300: #90a4ae;--slate-400: #78909c;--slate-500: #607d8b;--slate-600: #546e7a;--slate-700: #455a64;--slate-800: #37474f;--slate-900: #263238}@keyframes shimmering{0%{transform:translateX(-100%) rotate(var(--shimmer-angle))}20%{transform:translateX(100%) rotate(var(--shimmer-angle))}100%{transform:translateX(100%) rotate(var(--shimmer-angle))}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes spinnerWave{0%{opacity:.2;transform:scale(1)}10%{opacity:1;transform:scale(1.75)}20%{opacity:.2;transform:scale(1)}100%{opacity:.2;transform:scale(1)}}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 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);--spring: cubic-bezier(0.2, -0.36, 0, 1.46)}:root{--autocomplete-arrow: #111;--autocomplete-arrow-size-sm: 40px;--autocomplete-arrow-size-md: 24px;--autocomplete-arrow-size-lg: 30px;--autocomplete-item-hover: #d4d4d4}.--autocomplete{width:100%;background:var(--input);z-index:2}.--autocomplete .--arrow svg{fill:var(--autocomplete-arrow)}.--autocomplete.--sm{border-radius:var(--input-radius-sm)}.--autocomplete.--sm .--suggestion-list{border-radius:var(--input-radius-sm)}.--autocomplete.--sm .--arrow{width:var(--autocomplete-arrow-size-sm)}.--autocomplete.--sm .--arrow svg{width:calc(var(--autocomplete-arrow-size-sm)/2.5)}.--autocomplete.--sm .--input{width:calc(100% - var(--autocomplete-arrow-size-sm))}.--autocomplete.--md{border-radius:var(--input-radius-md)}.--autocomplete.--md .--suggestion-list{border-radius:var(--input-radius-md)}.--autocomplete.--md .--arrow{width:var(--autocomplete-arrow-size-md)}.--autocomplete.--md .--arrow svg{width:calc(var(--autocomplete-arrow-size-md)/2.5)}.--autocomplete.--md .--input{width:calc(100% - var(--autocomplete-arrow-size-md))}.--autocomplete.--lg{border-radius:var(--input-radius-lg)}.--autocomplete.--lg .--suggestion-list{border-radius:var(--input-radius-lg)}.--autocomplete.--lg .--arrow{width:var(--autocomplete-arrow-size-lg)}.--autocomplete.--lg .--arrow svg{width:calc(var(--autocomplete-arrow-size-lg)/2.5)}.--autocomplete.--lg .--input{width:calc(100% - var(--autocomplete-arrow-size-lg))}.--autocomplete .--suggestion-list{left:0px;right:0px;background:var(--input);z-index:2;padding:8px 0px;overflow-x:hidden}.--autocomplete .--suggestion-list li{cursor:pointer}.--autocomplete .--suggestion-list li:hover{background:var(--autocomplete-item-hover)}.--autocomplete .--suggestion-list li.--current{background:var(--autocomplete-item-hover)}:root{--avatar-bg: #fff;--avatar-size-lg: 75px;--avatar-size-md: 50px;--avatar-size-sm: 30px}.--avatar{overflow:hidden}.--avatar #squareRadiusClipPath{position:absolute;top:-1000000000;left:-1000000000;opacity:0}.--avatar.--lg{width:var(--avatar-size-lg);height:var(--avatar-size-lg)}.--avatar.--lg.--circle{border-radius:calc(var(--avatar-size-lg)/2)}.--avatar.--md{width:var(--avatar-size-md);height:var(--avatar-size-md)}.--avatar.--md.--circle{border-radius:calc(var(--avatar-size-md)/2)}.--avatar.--sm{width:var(--avatar-size-sm);height:var(--avatar-size-sm)}.--avatar.--sm.--circle{border-radius:calc(var(--avatar-size-sm)/2)}.--avatar img{background:var(--avatar-bg);width:100%;height:100%;display:block}.--avatar.--circle img{border-radius:50%}.--avatar.--square{clip-path:url(#squareRadiusClipPath);-webkit-clip-path:url(#squareRadiusClipPath)}.--avatar .--avatar-label{color:#fff;font-size:14px;font-weight:900}:root{--button: var(--red-700);--button-hover: var(--red-800);--button-border: 0px;--button-color: white;--button-disabled: var(--gray-200);--button-disabled-color: var(--gray-400);--button-padding-lg: 16px 24px;--button-radius-lg: 8px;--button-font-size-lg: 18px;--button-width-lg: 200px;--button-padding-md: 12px 20px;--button-radius-md: 6px;--button-font-size-md: 16px;--button-width-md: 150px;--button-padding-sm: 8px 16px;--button-radius-sm: 4px;--button-font-size-sm: 15px;--button-width-sm: 100px}.--button{border:var(--button-border);background:var(--button);color:var(--button-color);white-space:pre;cursor:pointer}.--button.--lg{padding:var(--button-padding-lg);font-size:var(--button-font-size-lg);width:fit-content;border-radius:var(--button-radius-lg)}.--button.--md{padding:var(--button-padding-md);font-size:var(--button-font-size-md);width:fit-content;border-radius:var(--button-radius-md)}.--button.--sm{padding:var(--button-padding-sm);font-size:var(--button-font-size-sm);width:fit-content;border-radius:var(--button-radius-sm)}.--button:hover{background:var(--button-hover)}.--button:disabled{background:var(--button-disabled);color:var(--button-disabled-color);cursor:auto !important}:root{--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 20px;--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}.--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}.--checkbox svg{fill:var(--checkbox-check-color)}.--segmented.--color-scheme{--segment-item-padding-sm: 0px;--segmented-radius-sm: 20px;width:100px}:root{--context: #fff;--context-border: 0px;--context-radius: 10px;--context-padding: 10px;--context-shadow: var(--zuz-shadow);--context-seperator: #eee;--context-seperator-height: 1px;--context-seperator-margin: 3px 6px;--context-item: #fff;--context-item-color: #111;--context-item-width: 220px;--context-item-padding: 6px 10px;--context-item-gap: 10px;--context-item-font-size: 15px;--context-item-radius: 5px;--context-item-icon-size: 18px;--context-item-hover: #eee}.--contextmenu{z-index:var(--max-z-index);background:var(--context);border-radius:var(--context-radius);padding:var(--context-padding);box-shadow:var(--context-shadow)}.--contextmenu .--line{height:var(--context-seperator-height);background:var(--context-seperator);margin:var(--context-seperator-margin)}.--contextmenu .--item{width:var(--context-item-width);padding:var(--context-item-padding);gap:var(--context-item-gap);cursor:pointer;font-size:var(--context-item-font-size);border-radius:var(--context-item-radius);background:var(--context-item);border:0px;color:var(--context-item-color)}.--contextmenu .--item .--ico{font-size:var(--context-item-icon-size)}.--contextmenu .--item .--label{color:var(--context-item-color)}.--contextmenu .--item:hover{background:var(--context-item-hover)}:root{--cover-bg: rgba(255,255,255,0.8);--cover-label: #111}.--cover{backdrop-filter:blur(4px);z-index:99999;gap:15px;pointer-events:auto}.--cover .label{font-size:14px;animation:breath 1s linear infinite}:root{--fab-icon-color: #fff;--fab-position: 30px}.--fab{z-index:var(--max-z-index);border-radius:50% !important}.--fab svg path{fill:var(--fab-icon-color)}.--fab.--sm{width:40px;height:40px;padding:20px}.--fab.--md{width:50px;height:50px;padding:15px}.--fab.--lg{width:60px;height:60px;padding:20px}.--fab.--bottomright{bottom:var(--fab-position);right:var(--fab-position)}.--fab.--bottomleft{bottom:var(--fab-position);left:var(--fab-position)}.--fab.--topright{top:var(--fab-position);right:var(--fab-position)}.--fab.--topleft{top:var(--fab-position);left:var(--fab-position)}:root{--input: var(--gray-200);--input-border: 0px;--input-color: var(--black-900);--input-padding-lg: 16px 20px;--input-font-size-lg: 18px;--input-radius-lg: 6px;--input-padding-md: 12px 15px;--input-font-size-md: 16px;--input-radius-md: 4px;--input-padding-sm: 8px 12px;--input-font-size-sm: 15px;--input-radius-sm: 2px}.--input{background:var(--input);border:var(--input-border);color:var(--input-color);width:100%}.--input.--lg{padding:var(--input-padding-lg);font-size:var(--input-font-size-lg);border-radius:var(--input-radius-lg)}.--input.--md{padding:var(--input-padding-md);font-size:var(--input-font-size-md);border-radius:var(--input-radius-md)}.--input.--sm{padding:var(--input-padding-sm);font-size:var(--input-font-size-sm);border-radius:var(--input-radius-sm)}.--input.--otp{letter-spacing:1ch;font-feature-settings:"tnum";font-variant:tabular-nums;font-family:monospace;line-height:1;text-indent:1.45ch;clip-path:inset(0 1ch 0 1ch);height:2ch}:root{--list-item-padding-sm: 6px 10px}.--list.--sm li{padding:var(--list-item-padding-sm)}:root{--network-manager: #111;--network-manager-color: #fff;--network-manager-radius-sm: 8px;--network-manager-radius-md: 10px;--network-manager-radius-lg: 12px;--network-manager-padding-sm: 6px 10px;--network-manager-padding-md: 8px 12px;--network-manager-padding-lg: 10px 14px;--network-manager-icon-size-sm: 18px;--network-manager-icon-size-md: 20px;--network-manager-icon-size-lg: 24px;--network-manager-font-size-sm: 14px;--network-manager-font-size-md: 16px;--network-manager-font-size-lg: 18px}.--network-manager{color:var(--network-manager-color);z-index:var(--max-z-index);bottom:50px;left:50%}.--network-manager.--online{background:var(--green-600)}.--network-manager.--offline{background:var(--red-600)}.--network-manager svg{fill:var(--network-manager-color)}.--network-manager.--sm{padding:var(--network-manager-padding-sm);border-radius:var(--network-manager-radius-sm);font-size:var(--network-manager-font-size-sm);gap:6px}.--network-manager.--sm .--ico{width:var(--network-manager-icon-size-sm);height:var(--network-manager-icon-size-sm)}.--network-manager.--md{padding:var(--network-manager-padding-md);border-radius:var(--network-manager-radius-md);font-size:var(--network-manager-font-size-md);gap:8px}.--network-manager.--md .--ico{width:var(--network-manager-icon-size-md);height:var(--network-manager-icon-size-md)}.--network-manager.--lg{padding:var(--network-manager-padding-lg);border-radius:var(--network-manager-radius-lg);font-size:var(--network-manager-font-size-lg);gap:10px}.--network-manager.--lg .--ico{width:var(--network-manager-icon-size-lg);height:var(--network-manager-icon-size-lg)}:root{--pagination: transparent;--pagination-padding: 10px;--pagination-font-size: 15px;--pagination-current-page-bg: var(--blue-500);--pagination-current-page-color: #fff;--pagination-disabled-page-color: var(--black-300);--pagination-table-button-padding: 4px 8px;--pagination-table-button-nav-padding: 3px;--pagination-table-button-size: 35px;--pagination-table-button-border: 1px #ddd solid;--pagination-table-button-color: #111;--pagination-table-button-hover-color: #111;--pagination-table-button-bg: #fff;--pagination-table-button-hover-bg: #eee;--pagination-table-gap: 1px;--pagination-table-radius: 5px;--pagination-table-icon-size: 26px}[color-scheme=dark]{--pagination-current-page-bg: var(--blue-500);--pagination-current-page-color: #fff;--pagination-disabled-page-color: var(--white-300);--pagination-table-button-border: 1px var(--pagination-table-button-bg) solid;--pagination-table-button-color: #f9f9f9;--pagination-table-button-hover-color: #fff;--pagination-table-button-bg: #333;--pagination-table-button-hover-bg: var(--blue-500)}.--pagination{padding:var(--pagination-padding);background:var(--pagination);font-size:var(--pagination-font-size)}.--pagination .--button.--current-page{background:var(--pagination-current-page-bg) !important;color:var(--pagination-current-page-color) !important}.--pagination .--button:disabled{pointer-events:none !important;cursor:auto !important;background:rgba(0,0,0,0) !important;color:var(--pagination-disabled-page-color) !important}.--pagination.--pgt-table .--pgt-btns{gap:var(--pagination-table-gap)}.--pagination.--pgt-table .--pgt-btns.--pgt-nav{margin-left:20px}.--pagination.--pgt-table .--pgt-btns.--pgt-nav .--button{padding:var(--pagination-table-button-nav-padding)}.--pagination.--pgt-table .--button{min-width:var(--pagination-table-button-size);height:var(--pagination-table-button-size);font-size:var(--pagination-font-size);border:var(--pagination-table-button-border);background:var(--pagination-table-button-bg);color:var(--pagination-table-button-color);padding:var(--pagination-table-button-padding)}.--pagination.--pgt-table .--button:hover{background:var(--pagination-table-button-hover-bg);color:var(--pagination-table-button-hover-color)}.--pagination.--pgt-table .--button:hover svg{fill:var(--pagination-table-button-hover-color)}.--pagination.--pgt-table .--button:first-child{border-radius:var(--pagination-table-radius) 0px 0px var(--pagination-table-radius)}.--pagination.--pgt-table .--button:last-child{border-radius:0px var(--pagination-table-radius) var(--pagination-table-radius) 0px}.--pagination.--pgt-table .--button svg{fill:var(--pagination-table-button-color);width:var(--pagination-table-icon-size)}:root{--password-toggle-radius: 5px;--password-toggle: transparent;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111}.--password{overflow:hidden;width:100%}.--password .--input{padding-right:45px !important}.--password .--toggle{width:var(--password-toggle-width);background:var(--password-toggle);border:var(--password-toggle-border);padding:var(--password-toggle-padding);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--password-toggle-radius)}.--password .--toggle .b-label{line-height:0 !important}.--password .--toggle svg{width:var(--password-toggle-size);height:var(--password-toggle-size);transition:all .2s linear 0s}.--password .--toggle svg path{fill:var(--password-toggle-color)}.--password .--toggle:hover svg{transform:scale(1.1)}:root{--pin-radius: 4px;--pin-gap: 4px;--pin-shadow: inset 0px 0px 0px 2px #111;--pin-padding: 5px}.--otp{width:100%;gap:var(--pin-gap)}.--otp .--input{text-align:center;padding:var(--pin-padding) !important}.--otp .--input:not(:last-child),.--otp .--input:not(:first-child){border-radius:0px !important}.--otp .--input:first-child{border-radius:var(--pin-radius) 0px 0px var(--pin-radius) !important}.--otp .--input:last-child{border-radius:0px var(--pin-radius) var(--pin-radius) 0px !important}.--otp .--input:focus{box-shadow:var(--pin-shadow)}:root{--search-send-color: #111;--search-send: transparent;--search-radius: 5px;--search-send-border: 0px;--search-send-width-sm: 40px;--search-send-padding-sm: 5px;--search-send-size-sm: 25px;--search-send-width-md: 40px;--search-send-padding-md: 5px;--search-send-size-md: 25px;--search-send-width-lg: 40px;--search-send-padding-lg: 5px;--search-send-size-lg: 25px}[color-scheme=dark]{--search-send-color: #fff}.--search{width:100%;overflow:hidden;border-radius:var(--search-radius)}.--search.--sm .--send{padding:var(--search-send-padding-sm);width:var(--search-send-width-sm)}.--search.--sm .--send svg{width:var(--search-send-size-sm);height:var(--search-send-size-sm)}.--search.--md .--send{padding:var(--search-send-padding-md);width:var(--search-send-width-md)}.--search.--md .--send svg{width:var(--search-send-size-md);height:var(--search-send-size-md)}.--search.--lg .--send{padding:var(--search-send-padding-lg);width:var(--search-send-width-lg)}.--search.--lg .--send svg{width:var(--search-send-size-lg);height:var(--search-send-size-lg)}.--search .--send{background:var(--search-send);border:var(--search-send-border);right:2px;bottom:2px;top:2px;z-index:1}.--search .--send svg{transition:all .2s linear 0s}.--search .--send svg path{fill:var(--search-send-color)}:root{--segmented: #eee;--segmented-border: 1px #ddd solid;--segment-item: transparent;--segment-item-border: 0px;--segment-item-font-weight: normal;--segment-item-color: #999;--segment-item-active-color: #111;--segment-tab: #fff;--segment-tab-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segmented-speed: 0.5s;--segmented-radius-sm: 8px;--segmented-padding-sm: 2px;--segmented-radius-md: 8px;--segmented-padding-md: 2px;--segmented-radius-lg: 8px;--segmented-padding-lg: 2px;--segment-item-padding-sm: 5px 12px;--segment-item-font-size-sm: 15px;--segment-item-radius-sm: calc(var(--segmented-radius-sm) - var(--segmented-padding-sm));--segment-item-svg-size-sm: 18px;--segment-item-padding-md: 5px 12px;--segment-item-font-size-md: 15px;--segment-item-radius-md: calc(var(--segmented-radius-md) - var(--segmented-padding-md));--segment-item-svg-size-md: 18px;--segment-item-padding-lg: 5px 12px;--segment-item-font-size-lg: 15px;--segment-item-radius-lg: calc(var(--segmented-radius-lg) - var(--segmented-padding-lg));--segment-item-svg-size-lg: 18px}[color-scheme=dark] body{--segmented: #444;--segmented-border: 1px #555 solid;--segment-tab: #212121;--segment-item-color: #a0a0a0;--segment-item-active-color: #fff}.--segmented{background:var(--segmented);border:var(--segmented-border);overflow:hidden}.--segmented.--sm{border-radius:var(--segmented-radius-sm);padding:var(--segmented-padding-sm)}.--segmented.--sm .--segment-item{padding:var(--segment-item-padding-sm);font-size:var(--segment-item-font-size-sm);border-radius:var(--segment-item-radius-sm)}.--segmented.--sm .--segment-item svg{width:var(--segment-item-svg-size-sm)}.--segmented.--sm .--segment-tab{border-radius:calc(var(--segmented-radius-sm) - var(--segmented-padding-sm));transform:translateX(calc(var(--x) - var(--segmented-padding-sm)));top:var(--segmented-padding-sm);bottom:var(--segmented-padding-sm)}.--segmented.--md{border-radius:var(--segmented-radius-md);padding:var(--segmented-padding-md)}.--segmented.--md .--segment-item{padding:var(--segment-item-padding-md);font-size:var(--segment-item-font-size-md);border-radius:var(--segment-item-radius-md)}.--segmented.--md .--segment-item svg{width:var(--segment-item-svg-size-md)}.--segmented.--md .--segment-tab{border-radius:calc(var(--segmented-radius-md) - var(--segmented-padding-md));transform:translateX(calc(var(--x) - var(--segmented-padding-md)));top:var(--segmented-padding-md);bottom:var(--segmented-padding-md)}.--segmented.--lg{border-radius:var(--segmented-radius-lg);padding:var(--segmented-padding-lg)}.--segmented.--lg .--segment-item{padding:var(--segment-item-padding-lg);font-size:var(--segment-item-font-size-lg);border-radius:var(--segment-item-radius-lg)}.--segmented.--lg .--segment-item svg{width:var(--segment-item-svg-size-lg)}.--segmented.--lg .--segment-tab{border-radius:calc(var(--segmented-radius-lg) - var(--segmented-padding-lg));transform:translateX(calc(var(--x) - var(--segmented-padding-lg)));top:var(--segmented-padding-lg);bottom:var(--segmented-padding-lg)}.--segmented .--segment-item{background:var(--segment-item);border:var(--segment-item-border);color:var(--segment-item-color);font-weight:var(--segment-item-font-weight);z-index:1;flex:1}.--segmented .--segment-item .--segment-label{white-space:pre;transition:all var(--segmented-speed) var(--ease) 0s}.--segmented .--segment-item svg{fill:var(--segment-item-color)}.--segmented .--segment-item svg react{fill:var(--segment-item-color)}.--segmented .--segment-item svg path{fill:var(--segment-item-color)}.--segmented .--segment-item.--segement-active{color:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg{fill:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg react{fill:var(--segment-item-active-color)}.--segmented .--segment-item.--segement-active svg path{fill:var(--segment-item-active-color)}.--segmented .--segment-tab{background:var(--segment-tab);width:var(--w);z-index:0;transition:all var(--segmented-speed) var(--ease) 0s}:root{--spinner-color: #111}[color-scheme=dark]{--spinner-color: #f9f9f9}.--spinner.--simple{aspect-ratio:1;animation:spin infinite}.--spinner.--wave{display:flex;align-items:center;gap:var(--spinner-gap)}.--spinner.--wave.--def,.--spinner.--wave.--sm{--spinner-radius: 2px;--spinner-gap: 3px;--spinner-wave-width: 4px;--spinner-wave-height: 10px}.--spinner.--wave.--md{--spinner-radius: 2px;--spinner-gap: 4px;--spinner-wave-width: 5px;--spinner-wave-height: 14px}.--spinner.--wave.--lg{--spinner-radius: 3px;--spinner-gap: 4px;--spinner-wave-width: 6px;--spinner-wave-height: 16px}.--spinner.--wave .--dot{width:var(--spinner-wave-width);background:var(--spinner-color);border-radius:var(--spinner-radius)}.--spinner.--wave .--dot.--dot-1{animation:spinnerWave infinite;animation-delay:.1s;height:var(--spinner-wave-height);animation-duration:1.5s;animation-timing-function:ease-in-out}.--spinner.--wave .--dot.--dot-2{animation:spinnerWave infinite;animation-delay:.2s;height:calc(var(--spinner-wave-height)*1.1);animation-duration:1.5s;animation-timing-function:ease-in-out}.--spinner.--wave .--dot.--dot-3{animation:spinnerWave infinite;animation-delay:.3s;height:calc(var(--spinner-wave-height)*1.25);animation-duration:1.5s;animation-timing-function:ease-in-out}:root{--switch-height: 24px;--switch-width: 42px;--switch-knob-size: 20px;--switch-knob-left: 2px;--switch-knob-top: 2px;--switch-knob-left-on: 18px;--switch-checked: rgb(46, 161, 42);--switch-unchecked: rgb(203, 203, 203);--switch-knob: #fff;--switch-knob-shadow: #000;--switch-knob-shadow-size: 2px}.--switch{height:var(--switch-height);width:var(--switch-width);min-height:var(--switch-height);min-width:var(--switch-width);max-height:var(--switch-height);max-width:var(--switch-width);cursor:pointer}.--switch.--md{--switch-height: 20px;--switch-width: 36px;--switch-knob-size: 16px;--switch-knob-left-on: 16px}.--switch.--sm{--switch-height: 10px;--switch-width: 34px;--switch-knob-size: 16px;--switch-knob-left: 0px;--switch-knob-top: -3px}.--switch input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.--switch:before{content:"";position:absolute;height:var(--switch-height);width:var(--switch-width);background:var(--switch-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.--switch:after{content:"";position:absolute;width:var(--switch-knob-size);height:var(--switch-knob-size);background:var(--switch-knob);border-radius:50px;z-index:2;top:var(--switch-knob-top);left:var(--switch-knob-left);box-shadow:0px 0px var(--switch-knob-shadow-size) var(--switch-knob-shadow);transition:all .75s var(--bounce) 0s}.--switch.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--switch-checked)}.--switch.is-checked:after{transform:translateX(var(--switch-knob-left-on))}:root{--table: transparent;--table-row: #eee;--table-row-even: #f1f1f1;--table-row-odd: #f9f9f9;--table-row-gap: 2px;--table-row-radius: 0px;--table-radius: 10px;--table-head-padding: 0px;--table-row-padding: 0px;--table-head-col-padding: 10px;--table-col-padding: 10px;--table-border: 1px #eee solid;--table-head-radius: var(--table-radius) var(--table-radius) 0px 0px;--table-footer-radius: 0px 0px var(--table-radius) var(--table-radius)}[color-scheme=dark]{--table-row: #333;--table-row-even: #333;--table-row-odd: #444}.--table{background:var(--table);gap:var(--table-row-gap)}.--table .--row{background:var(--table-row);border-radius:var(--table-row-radius)}.--table .--row:not(.--row-head){padding:var(--table-row-padding)}.--table .--row:not(.--row-head) .--col{padding:var(--table-col-padding)}.--table .--row:nth-child(1){border-radius:var(--table-head-radius)}.--table .--row:last-child{border-radius:var(--table-footer-radius)}.--table .--row:nth-child(even){background:var(--table-row-even)}.--table .--row:nth-child(odd){background:var(--table-row-odd)}.--table .--row.--row-head{font-weight:bold;padding:var(--table-head-padding) !important}.--table .--row.--row-head .--col{padding:var(--table-head-col-padding)}.--with-tooltip{--tooltip: #222;--tooltip-color: #fafafa;--tooltip-font-size: 12px;--tooltip-font-weight: normal;--tooltip-radius: 5px;--tooltip-padding: 2px 4px;--tooltip-arrow-size: 10px}.--with-tooltip .--tooltip{background:var(--tooltip);color:var(--tooltip-color);font-size:var(--tooltip-font-size);font-weight:var(--tooltip-font-weight);border-radius:var(--tooltip-radius);padding:var(--tooltip-padding);z-index:var(--max-z-index);overflow:visible;pointer-events:none;user-select:none}.--with-tooltip .--tooltip:before{content:"";position:absolute;width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);border-radius:calc(var(--tooltip-radius)/2);background:var(--tooltip);z-index:0}.--with-tooltip .--tooltip .--text{z-index:1;white-space:pre}.--with-tooltip .--tooltip.--top:before{bottom:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--bottom:before{top:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--left:before{right:-0.2lh;top:50%;transform:translateY(-50%) rotate(45deg)}.--with-tooltip .--tooltip.--right:before{left:-0.2lh;top:50%;transform:translateY(-50%) rotate(45deg)}:root{--treeview-gap: 6px;--treenode-gap: 2px;--treenode-arrow-btn-size: 20px;--treenode-arrow-btn-opacity: 1;--treenode-arrow-icon-size: 12px;--treenode-arrow-icon-color: #111;--treenode-label-padding: 3px 6px;--treenode-label-radius: 3px 6px;--treenode-label-hover: #f1f1f1;--treenode-label-bg: transparent;--treenode-label-selected-bg: #eee;--treenode-label-selected-color: #111;--treenode-label-icon-color: #111;--treenode-label-icon-size: 15px;--treenode-label-color: #111;--treenode-label-size: 15px;--treenode-label-gap: 6px;--treenode-sub-margin: 20px}.--treeview{gap:var(--treeview-gap);width:100%}.--treeview .--node{gap:var(--treenode-gap);cursor:pointer}.--treeview .--node .--node-aro-btn{width:var(--treenode-arrow-btn-size);height:var(--treenode-arrow-btn-size);border:0px;background:rgba(0,0,0,0);opacity:var(--treenode-arrow-btn-opacity);transition:all .4s linear 0s}.--treeview .--node .--node-aro-btn:hover{opacity:1}.--treeview .--node .--node-aro-btn .--node-aro-icon{font-size:var(--treenode-arrow-icon-size);color:var(--treenode-arrow-icon-color)}.--treeview .--node .--node-meta{background:rgba(0,0,0,0);gap:var(--treenode-label-gap);border:0px}.--treeview .--node .--node-meta .--node-icon{font-size:var(--treenode-label-icon-size);color:var(--treenode-label-icon-color)}.--treeview .--node .--node-meta .--node-label{background:var(--treenode-label-bg);color:var(--treenode-label-color);font-size:var(--treenode-label-size);padding:var(--treenode-label-padding);border-radius:var(--treenode-label-radius)}.--treeview .--node .--node-meta:hover .--node-label{background:var(--treenode-label-hover)}.--treeview .--node.--selected .--node-meta .--node-label{background:var(--treenode-label-selected-bg);color:var(--treenode-label-selected-color)}.--treeview .--sub-node{margin-top:var(--treeview-gap);gap:var(--treeview-gap);padding-left:var(--treenode-sub-margin)}*,*::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{--max-z-index: 2147483647;--zuz-shadow: 0px 0px 0px 1px #d4d4d4, 0px 0px 6px #ccc;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--overlay: rgba(0, 0, 0, 0.7);--overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--drawer-shadow: var(--zuz-shadow);--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-gap: 5px;--tab-label-size: 15px;--tab-icon-size: 15px;--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-shadow: var(--zuz-shadow);--sheet-body: #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;--progress-width: 100%;--progress-height: 6px;--progress-radius: 6px;--progress-track: #eee;--progress-bar: #111;--skeleton: #eee;--skeleton-radius: 7px;--shimmer: #ccc;--shimmer-width: 10%;--shimmer-angle: 120deg;--shimmer-text-angle: 45deg;--shimmer-speed: 2s;--shimmer-blur: 50px;--shimmer-offset: 0;--shimmer-flame: linear-gradient( var(--shimmer-text-angle), transparent, hsl(45 100% 60%),hsl(0 100% 50%), #000, transparent );--shimmer-aurora: linear-gradient( var(--shimmer-text-angle), transparent, #a960ee,#ff333d,#ffcb57,#90e0ff, transparent );--shimmer-classic: linear-gradient( var(--shimmer-text-angle), transparent, #fff,transparent );--alert-error: #ffd4d4;--alert-error-color: #ae1313;--alert-info: #bee3f8;--alert-info-color: #2b6cb0;--alert-warning: #feebc8;--alert-warning-color: #c05621;--alert-success: #c6f6d5;--alert-success-color: #2f855a;--alert-padding: 12px;--alert-radius: 10px;--alert-gap: 10px;--accordion: #fff;--accordion-label: #111;--accordion-radius: 5px;--accordion-border: 1px #ddd solid;--accordion-head: #fff;--accordion-head-padding: 10px;--accordion-head-font-size: 16px;--accordion-head-font-weight: normal;--accordion-head-arrow-size: 18px;--accordion-head-arrow: #111;--accordion-detail-padding: 10px;--accordion-detail-font-size: 15px;--select-width: auto;--select: #fff;--select-radius: 5px;--select-border: 1px #ddd solid;--select-padding: 6px 8px;--select-font-size: 16px;--select-z-index: 1;--select-gap: 5px;--select-arrow-size: 16px;--select-arrow-color: #111;--select-hover: #e6e6e6;--select-options: #eee;--select-options-max-height: 400px;--select-options-top: 0.1rem;--select-options-padding: 4px;--select-option-color: #111;--select-option-hover: #ddd;--select-option-padding: var(--select-padding);--select-option-radius: var(--select-radius);--select-selected: #ccc;--select-shadow: inherit;--select-search: #fff;--select-search-border: 1px #ddd solid;--select-search-padding: 4px 8px;--select-search-radius: 10px;--select-search-font-size: 15px;--select-search-color: #111;--select-search-margin-bottom: 4px;--tip-s: 0;--actionbar: #fff;--actionbar-radius: 50px;--actionbar-padding: 2px;--actionbar-shadow: 0px 0px 0px 1px #ccc, 0px 0px 8px #c0b0b0;--actionbar-gap: 2px;--actionbar-action-size: 40px;--actionbar-action: transparent;--actionbar-action-color: #111;--actionbar-action-hover: #ddd;--actionbar-action-selected: #eee;--actionbar-action-border: 0px;--actionbar-action-padding: 6px;--actionbar-action-radius: 20px;--actionbar-action-icon-size: 18px;--actionbar-tooltip: #111;--actionbar-tooltip-padding: 2px 0px;--actionbar-tooltip-radius: 10px;--actionbar-tooltip-color: #fff;--actionbar-tooltip-speed: 0.05s;--actionbar-tooltip-track-speed: 0.3s;--slider-radius: 5px;--slider-knob-size: 20px;--slider-knob-width: var(--slider-knob-size);--slider-knob-height: var(--slider-knob-size);--slider-knob-color: #fff;--slider-knob-radius: 50%;--slider-knob-border: 1px #ccc solid;--slider-knob-shadow: 0px 0px 2px #ccc;--slider-track: #fff;--slider-track-border: 1px #ddd solid;--slider-fill: #111;--slider-text: rgb(0, 98, 255);--slider-text-size: 15px;--slider-text-weight: normal}.flex{display:flex}.flex.cols{flex-direction:column}.flex.ass{align-self:flex-start}.flex.asc{align-self:center}.flex.ase{align-self:flex-end}.flex.aic{align-items:center}.flex.aie{align-items:flex-end}.flex.jcc{justify-content:center}.flex.jce{justify-content:flex-end}.flex.jcs{justify-content:flex-start}.abs{position:absolute}.abs.abc{top:50%;left:50%;transform:translate(-50%, -50%)}.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}.bold{font-weight:bold}.text-wrap,.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}x .center-h{left:50%;transform:translateX(-50%)}.center-v{top:50%;transform:translateY(-50%)}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}button .b-label:empty{display:none}.--overlay{background:var(--overlay);z-index:var(--max-z-index);backdrop-filter:blur(var(--overlay-blur))}.--accordion{background:var(--accordion);border:var(--accordion-border);border-radius:var(--accordion-radius);overflow:hidden}.--accordion .--toggle{border:0px;background:var(--accordion-head);padding:var(--accordion-head-padding);border-radius:var(--accordian-radius);flex:1;width:100%}.--accordion .--toggle .--label{flex:1;color:var(--accordion-label);font-size:var(--accordion-head-font-size);font-weight:var(--accordion-head-font-weight)}.--accordion .--toggle .--arrow{width:var(--accordion-head-arrow-size)}.--accordion .--toggle .--arrow svg path{fill:var(--accordion-head-arrow)}.--accordion .--detail{padding:var(--accordion-detail-padding);font-size:var(--accordion-detail-font-size)}.--select{width:var(--select-width)}.--select .--selected{width:100%;gap:var(--select-gap);background:var(--select);border-radius:var(--select-radius);border:var(--select-border);padding:var(--select-padding);font-size:var(--select-font-size);box-shadow:var(--select-shadow);line-height:1}.--select .--selected:hover{background:var(--select-hover)}.--select .--selected .--label{flex:1;text-align:left;color:var(--select-option-color)}.--select .--selected .--svg-arrow{width:var(--select-arrow-size)}.--select .--selected .--svg-arrow svg{fill:var(--select-arrow-color)}.--select .--options-list{backdrop-filter:blur(10px) saturate(0);left:0;top:calc(100% + var(--select-options-top));width:100%;max-height:var(--select-options-max-height);overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:var(--select-options-padding);box-shadow:var(--select-options-shadow);z-index:var(--max-z-index)}.--select .--options-list .--select-search{border:var(--select-search-border);padding:var(--select-search-padding);background:var(--select-search);border-radius:var(--select-search-radius);font-size:var(--select-search-font-size);color:var(--select-search-color);margin-bottom:var(--select-search-margin-bottom)}.--select .--options-list button{background:rgba(0,0,0,0);border:0px;text-align:left;color:var(--select-option-color);padding:var(--select-option-padding);border-radius:var(--select-option-radius);font-size:var(--select-font-size);white-space:pre;text-align:left !important;justify-content:flex-start}.--select .--options-list button:hover{background:var(--select-option-hover)}.--select .--options-list button.selected{background:var(--select-selected)}.--shimmer{background-clip:text;color:rgba(0,0,0,0);animation:textshimmer calc(var(--shimmer-speed)*3) infinite both ease-in-out;background-repeat:no-repeat;background-size:10%;background-color:#222}.--shimmer.--classic{background-image:var(--shimmer-classic)}.--shimmer.--aurora{background-image:var(--shimmer-aurora)}.--shimmer.--flame{background-image:var(--shimmer-flame)}.--radio{--radio-size: 16px;--radio: var(--black-900);--radio-fill: #fff;--radio-border: 1px var(--radio) solid;--radio-gap: 5px;--radio-padding: 6px;gap:var(--radio-gap);line-height:1}.--radio input[type=radio]{z-index:0;left:0px;top:0px;opacity:0}.--radio .--dot{width:var(--radio-size);height:var(--radio-size);background:var(--radio-fill);border:var(--radio-border);border-radius:50%}.--radio .--dot .--rod{width:calc(var(--radio-size) - var(--radio-padding)*1.5);height:calc(var(--radio-size) - var(--radio-padding)*1.5);border-radius:50%}.--radio .--value{flex:1}.--radio input[type=radio]:checked~.--dot{background:var(--radio)}.--radio input[type=radio]:checked~.--dot .--rod{background:var(--radio-fill)}.--skeleton{overflow:hidden;border-radius:var(--skeleton-radius);height:1lh;background:var(--skeleton);position:relative}.--skeleton:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, var(--skeleton) 0%, var(--shimmer) 50%, var(--skeleton) 100%);transform:translateX(-100%) rotate(var(--shimmer-angle));animation-name:shimmering;animation-direction:var(--shimmer-direction);animation-duration:var(--shimmer-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite;filter:blur(var(--shimmer-blur))}.--toast,.--sheet.--sheet-warn,.--sheet.--sheet-success,.--sheet.--sheet-error,.--sheet.--sheet-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.--sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:var(--max-z-index);transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.--sheet.--wobble{transform-origin:inherit !important}.--sheet.--sheet-default{background:#333;color:#fff;top:10px !important}.--sheet.--sheet-error{background:var(--sheet-error);color:#fff;top:10px}.--sheet.--sheet-success{background:var(--sheet-success);color:#fff;top:10px}.--sheet.--sheet-warn{background:var(--sheet-warn);color:#111;top:10px}.--sheet.--sheet-form{position:absolute !important}.--sheet.--sheet-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);box-shadow:var(--sheet-shadow)}.--sheet .--head{padding:var(--sheet-head-padding)}.--sheet .--head .--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}.--sheet .--head .--dot{flex:1}.--sheet .--head .--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)}.--sheet .--head .--closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.--sheet .--body{background:var(--sheet-body);padding:var(--sheet-body-padding)}.--sheet .--body.--no-action{border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.--sheet .--footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer);border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.--sheet .--footer .--action{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}.--sheet .--footer .--action:hover{background:var(--sheet-action-hover)}.drawer-h,.--drawer.--right,.--drawer.--left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.--drawer.--bottom,.--drawer.--top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.--drawer{background:var(--drawer-color);border:var(--drawer-border);box-shadow:var(--drawer-shadow);z-index:var(--max-z-index);overflow-x:hidden;overflow-y:auto}.--drawer.--left{left:0px}.--drawer.--right{right:0px}.--drawer.--top{top:0px}.--drawer.--bottom{bottom:0px}.--drawer .--handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.--icon.--sm{font-size:14px}.--icon.--md{font-size:16px}.--icon.--lg{font-size:18px}.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 .--head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.--tabview .--head .--tab{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color);gap:var(--tab-gap)}.--tabview .--head .--tab.--active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.--tabview .--head .--tab.--active:hover{background:var(--tab-active)}.--tabview .--head .--tab:hover{background:var(--tab-hover)}.--tabview .--body{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.--tabview .--body .--track{transform-style:flat}.--tabview .--body .--content{width:100%;background:var(--tab-body);padding:var(--tab-body-padding);align-self:baseline}.--progress{background:var(--progress-track);width:var(--progress-width);height:var(--progress-height);border-radius:var(--progress-radius);overflow:hidden}.--progress .--bar{width:0%;background:var(--progress-bar);height:var(--progress-height);border-radius:var(--progress-radius)}.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}.--alert{padding:var(--alert-padding);border-radius:var(--alert-radius);gap:var(--alert-gap)}.--alert .--icon{width:20px;height:20px}.--alert .--meta{gap:2px}.--alert .--meta .--title.--tm{font-weight:bold}.--alert.--info{background:var(--alert-info);color:var(--alert-info-color)}.--alert.--info path{fill:var(--alert-info-color)}.--alert.--warning{background:var(--alert-warning);color:var(--alert-warning-color)}.--alert.--warning path{fill:var(--alert-warning-color)}.--alert.--error{background:var(--alert-error);color:var(--alert-error-color)}.--alert.--error path{fill:var(--alert-error-color)}.--alert.--success{background:var(--alert-success);color:var(--alert-success-color)}.--alert.--success path{fill:var(--alert-success-color)}.--actionbar{background:var(--actionbar);border-radius:var(--actionbar-radius);padding:var(--actionbar-padding);box-shadow:var(--actionbar-shadow);gap:var(--actionbar-gap)}.--actionbar.--bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:20px}.--actionbar .--action{color:var(--actionbar-action-color);width:var(--actionbar-action-size);height:var(--actionbar-action-size);background:var(--actionbar-action);border:var(--actionbar-action-border);padding:var(--actionbar-action-padding);border-radius:var(--actionbar-action-radius);flex:1}.--actionbar .--action svg{width:100%;height:100%}.--actionbar .--action img{width:100%;height:100%}.--actionbar .--action .--icon{font-size:var(--actionbar-action-icon-size)}.--actionbar .--action:hover{background:var(--actionbar-action-hover)}.--actionbar .--action.--selected{background:var(--actionbar-action-selected)}.--actionbar .--tip{--tip-width: calc( var(--tip-w) * 1ch + 6px );translate:calc(-50% + var(--tip-x)*1px) calc(-50% + var(--tip-y)*1px);bottom:60px;background:var(--actionbar-tooltip);padding:var(--actionbar-tooltip-padding);border-radius:var(--actionbar-tooltip-radius);color:var(--actionbar-tooltip-color);scale:var(--tip-s);transform-origin:center;width:var(--tip-width);transition:all var(--actionbar-tooltip-speed) linear 0s;overflow:hidden}.--actionbar .--tip .--track{width:calc(var(--tip-width)*var(--tip-l));translate:calc(var(--tip-m)*var(--tip-width)*-1) 0px;transition:all var(--actionbar-tooltip-track-speed) var(--spring) 0s}.--actionbar .--tip .--track .--lb{text-align:center;width:var(--tip-width)}.--draggable{cursor:grab}.--slider.--range{min-height:10px;width:100%;min-width:100px}.--slider.--number{width:fit-content;text-align:center}.--slider input{height:100%;width:100%;opacity:0;touch-action:none}.--slider input[type=range]:hover{cursor:grab}.--slider input[type=range]:active{cursor:grabbing}.--slider input[type=number]{cursor:ns-resize}.--slider .--slider-track{background:var(--slider-track);height:100%;border-radius:var(--slider-radius);overflow:hidden;border:var(--slider-track-border)}.--slider .--slider-track:after{content:"";position:absolute;top:0px;bottom:0px;left:0px;width:calc(var(--value)*1% - var(--slider-knob-size)/2);background:var(--slider-fill);border-radius:var(--slider-radius)}.--slider .--slider-knob{width:var(--slider-knob-width);height:var(--slider-knob-height);top:50%;transform:translateY(-50%);left:clamp(0%,var(--value)*1% - var(--slider-knob-size),100%);background:var(--slider-knob-color);border-radius:var(--slider-knob-radius);border:var(--slider-knob-border);box-shadow:var(--slider-knob-shadow);pointer-events:none}.--slider .--slider-text{text-decoration:none;color:var(--slider-text);cursor:ew-resize;text-align:center;user-select:none;font-size:var(--slider-text-size);font-weight:var(--slider-text-weight)}.--with-timeline{border:1px blue solid}.--timeline{--timeline: #fff;--timeline-layer-height: 45px;--timeline-layer-padding: 10px;bottom:0px;left:0px;right:0px;z-index:calc(var(--max-z-index) - 99);background:var(--timeline);max-height:300px}.--timeline .--layers{flex:1}.--timeline .--layers .--layer{border-bottom:1px #ddd solid;background:#fff;transition:all .5s linear 0s}.--timeline .--layers .--layer:hover{background:#f7f7f7}.--timeline .--layers .--layer.--head{cursor:auto;border-bottom:1px #ddd solid;top:0px;z-index:1}.--timeline .--layers .--layer.--head:hover{background:#fff}.--timeline .--layers .--layer.--head .--meta{gap:10px;border-right:1px #ddd solid;padding:0px 10px}.--timeline .--layers .--layer.--head .--meta .--buns{flex:1}.--timeline .--layers .--layer.--head .--meta .--bus{gap:5px}.--timeline .--layers .--layer.--head .--meta .--bus .--choose-time{gap:2px;--slider-text-size: 16px;--slider-text-weight: bold;height:40px;width:40px;border-left:1px #ddd solid;border-right:1px #ddd solid;padding:0px 4px}.--timeline .--layers .--layer.--head .--meta button{width:40px;height:40px;border:0px;background:rgba(0,0,0,0);border-radius:100%;padding:5px}.--timeline .--layers .--layer.--head .--meta button:hover{background:#eee}.--timeline .--layers .--layer.--head .--track{padding:0px 0px 0px 10px}.--timeline .--layers .--layer.--head .--track .--stamps{flex:1}.--timeline .--layers .--layer.--head .--track .--stamps .--stmp{flex:1;user-select:none}.--timeline .--layers .--layer .--meta{border-right:1px #ddd solid;gap:2px;max-width:30vw;min-width:30vw;flex:1}.--timeline .--layers .--layer .--meta .--chevron{width:24px;height:24px;border:0px;background:rgba(0,0,0,0);opacity:.5;padding:2px}.--timeline .--layers .--layer .--meta .--chevron:hover{opacity:1}.--timeline .--layers .--layer .--meta .--icon{width:10px;height:10px;background:#ccc;border-radius:2px;margin-right:5px}.--timeline .--layers .--layer .--meta .--label{flex:1}.--timeline .--layers .--layer .--meta .--value{flex:1;max-width:100px}.--timeline .--layers .--layer .--meta .--prop{background:#f1f1f1;padding:2px}.--timeline .--layers .--layer .--meta .--sub-prop{padding:2px 2px 2px 30px;background:#f9f9f9}.--timeline .--layers .--layer .--meta .--sub-prop .--add-key{border:0px;background:rgba(0,0,0,0);width:20px;height:20px;padding:4px;opacity:.5;margin-right:5px}.--timeline .--layers .--layer .--meta .--sub-prop .--add-key:hover{opacity:1}.--timeline .--layers .--layer .--meta .--sub-prop .--plbl{flex:1;user-select:none;font-size:15px}.--timeline .--layers .--layer .--meta .--sub-prop .--value{--select: transparent;--select-border: 0px;--select-padding: 1px 4px;--select-width: 60px;min-width:115px;max-width:115px}.--timeline .--layers .--layer .--meta .--sub-prop .--value .--chv{width:12px;height:12px}.--timeline .--layers .--layer .--track{padding:2px;flex:1;height:100%;gap:2px}.--timeline .--layers .--layer .--track .--bar{background:#98cbff;border:1px #7fbbfa solid;min-width:5%;height:100%;border-radius:4px}.--timeline .--layers .--layer .--track .--bar.--sub{background:#eee;border:1px #e5e0e0 solid}.--timeline .--cursor{width:5px;height:100%;left:calc(30vw + 5px);z-index:1}.--timeline .--cursor:before{content:"";position:absolute;top:35px;left:2px;width:2px;height:calc(100% - 30px);background:#111}.--timeline .--cursor:after{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:14px;height:25px;background:#111;border-radius:5px 5px 10px 10px;cursor:grab}.--timeline .--cursor:after:active{cursor:grabbing}.--sidebar{--sidebar-padding: 10px;--sidebar-bg: #fff;background:var(--sidebar-bg);padding:var(--sidebar-padding)}.--sidebar .--nav{flex:1}.--cookie-consent{--cookie-consent: #fff;--cookie-consent-radius: 20px;--cookie-consent-padding: 20px;--cookie-consent-width: 320px;--cookie-consent-font-size: 18px;--cookie-consent-action: #222;z-index:var(--max-z-index);background:var(--cookie-consent);border-radius:var(--cookie-consent-radius);padding:var(--cookie-consent-padding);gap:15px;position:fixed;bottom:20px;width:var(--cookie-consent-width);font-size:var(--cookie-consent-font-size)}.--cookie-consent.--left{left:20px}.--cookie-consent.--right{right:20px}.--cookie-consent .--title{font-weight:bold}.--cookie-consent .--message{font-size:calc(var(--cookie-consent-font-size)*.8)}.--cookie-consent .--footer{margin-top:20px;gap:10px}.--cookie-consent button{flex:1;border:0px;border-radius:var(--cookie-consent-radius);padding:10px;font-weight:bold}.--cookie-consent button.--accept{color:#fff;background:var(--cookie-consent-action)}.--cookie-consent button.--accept:hover{opacity:.9}.--cookie-consent button.--reject{color:var(--cookie-consent-action);background:rgba(0,0,0,0)}.--cookie-consent button.--reject:hover{background:var(--cookie-consent-action);color:#fff}

package/dist/types/enums.d.ts

@@ -210,6 +210,12 @@ export declare enum Size {
     Medium = "md",
     Large = "lg"
 }
+export declare enum Variant {
+    Default = "def",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
 export declare enum Position {
     Auto = "auto",
     Top = "top",

package/dist/types/enums.js

@@ -252,6 +252,13 @@ export var Size;
     Size["Medium"] = "md";
     Size["Large"] = "lg";
 })(Size || (Size = {}));
+export var Variant;
+(function (Variant) {
+    Variant["Default"] = "def";
+    Variant["Small"] = "sm";
+    Variant["Medium"] = "md";
+    Variant["Large"] = "lg";
+})(Variant || (Variant = {}));
 export var Position;
 (function (Position) {
     Position["Auto"] = "auto";

package/package.json

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