@zuzjs/ui 0.5.8 → 0.5.9

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

@@ -0,0 +1,11 @@
+import { AlertHandler } from "./types";
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+} & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/comps/Alert/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import { ALERT } from "../../types/enums";
+import Box from "../Box";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Text, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
+});
+export default Alert;

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

@@ -0,0 +1,13 @@
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type AlertProps = BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+};
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}

package/dist/comps/Alert/types.js

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

package/dist/comps/Button/index.js

@@ -7,6 +7,6 @@ import Span from '../Span';
 const Button = forwardRef((props, ref) => {
     const { icon, children, withLabel, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    return _jsxs("button", { className: `${className} flex aic ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx(Icon, { name: `icon-${icon}` }), withLabel === true ? _jsx(Span, { children: children }) : children] });
+    return _jsxs("button", { className: `${className} flex aic jcc ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx(Icon, { name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] });
 });
 export default Button;

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

@@ -1,7 +1,8 @@
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
 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;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default CheckBox;

package/dist/comps/CheckBox/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
 import Label from "../Label";
 import Input from "../Input";
 import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
-    const { name, required, type, value, checked: defaultCheck, onChange, ...pops } = props;
+    const { name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -26,7 +26,7 @@ const CheckBox = forwardRef((props, ref) => {
             _setChecked(!checked);
         }
     }));
-    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} 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) => {
+    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`);
                     _setChecked(e.target.checked);
                 } })] });

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

@@ -1,9 +1,25 @@
 import { Props } from "../../types";
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
+/**
+ * Props for the CheckBox component.
+ *
+ * @typedef {Object} CheckBoxProps
+ * @property {CHECKBOX} [type] - The type of the checkbox.
+ * @property {Size} [size] - The size of the checkbox.
+ * @property {(checked: boolean, value: string | number | readonly string[]) => void} [onChange] - Callback function triggered when the checkbox state changes.
+ */
 export type CheckBoxProps = Props<"input"> & {
     type?: CHECKBOX;
+    size?: Size;
     onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
 };
+/**
+ * Interface for handling checkbox state.
+ *
+ * @interface CheckboxHandler
+ * @property {(mode: boolean, triggerChange?: boolean) => void} setChecked - Sets the checked state of the checkbox.
+ * @property {(triggerChange?: boolean) => void} toggle - Toggles the checked state of the checkbox.
+ */
 export interface CheckboxHandler {
     setChecked: (mode: boolean, triggerChange?: boolean) => void;
     toggle: (triggerChange?: boolean) => void;

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

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

package/dist/comps/ContextMenu/index.js

@@ -4,13 +4,13 @@ import Box from "../Box";
 import { useBase } from "../../hooks";
 import MenuItem from "./item";
 const ContextMenu = forwardRef((props, ref) => {
-    const { as, items, ...pops } = props;
+    const { as, items: _items, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [visible, setVisible] = useState(false);
     const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [items, setItems] = useState(_items || []);
     useImperativeHandle(ref, () => ({
-        show: (e) => {
-            // console.log(e)
+        show: (e, menuItems) => {
             if (e instanceof MouseEvent) {
                 setPosition({ x: e.clientX, y: e.clientY });
             }
@@ -21,11 +21,15 @@ const ContextMenu = forwardRef((props, ref) => {
                 const { clientX: x, clientY: y } = e;
                 setPosition({ x, y });
             }
+            if (menuItems) {
+                setItems(menuItems);
+            }
             setVisible(true);
         },
         hide: (e) => setVisible(false),
     }));
-    useEffect(() => { }, [visible, position]);
+    useEffect(() => {
+    }, [visible, position, items]);
     if (!visible)
         return null;
     return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), style: {

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

@@ -5,16 +5,17 @@ export interface ContextItem {
     icon?: string;
     iconColor?: string;
     className?: string;
+    enabled?: boolean;
     onSelect: () => void;
 }
 export type ContextMenuProps = BoxProps & {
-    items: ContextItem[];
+    items?: ContextItem[];
 };
 export type MenuItemProps = ContextItem & {
     index: number;
     className: string;
 };
 export interface ContextMenuHandler {
-    show: (e: MouseEvent | TouchEvent) => void;
+    show: (e: MouseEvent | TouchEvent, items?: ContextItem[]) => void;
     hide: (e: MouseEvent | TouchEvent) => void;
 }

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

@@ -2,6 +2,7 @@ import { CheckboxHandler } from "../CheckBox/types";
 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;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default Switch;

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

@@ -0,0 +1,8 @@
+import { Props } from '../../types';
+export type TextAreaProps = Props<`textarea`> & {
+    autoResize?: boolean;
+};
+declare const TextArea: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    autoResize?: boolean;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/comps/TextArea/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const TextArea = forwardRef((props, ref) => {
+    const { autoResize, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const handleInput = (event) => {
+    };
+    return _jsx("textarea", { className: `--input --textarea flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+});
+export default TextArea;

package/dist/comps/index.d.ts

@@ -1,8 +1,10 @@
 /**Components */
-export { default as ActionBar } from './Actionbar';
-export * from './Actionbar/types';
 export { default as Accordion } from './Accordion';
 export * from './Accordion/types';
+export { default as ActionBar } from './Actionbar';
+export * from './Actionbar/types';
+export { default as Alert } from './Alert';
+export * from './Alert/types';
 export { type AvatarProps, default as Avatar } from './Avatar';
 export { type BoxProps, default as Box } from './Box';
 export { type ButtonProps, default as Button } from './Button';
@@ -41,6 +43,7 @@ export { default as Switch } from './Switch';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
 export { type TextProps, default as Text } from './Text';
+export { type TextAreaProps, default as Textarea } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { type ToolTipProps, default as ToolTip } from './Tooltip';

package/dist/comps/index.js

@@ -1,8 +1,10 @@
 /**Components */
-export { default as ActionBar } from './Actionbar';
-export * from './Actionbar/types';
 export { default as Accordion } from './Accordion';
 export * from './Accordion/types';
+export { default as ActionBar } from './Actionbar';
+export * from './Actionbar/types';
+export { default as Alert } from './Alert';
+export * from './Alert/types';
 export { default as Avatar } from './Avatar';
 export { default as Box } from './Box';
 export { default as Button } from './Button';
@@ -41,6 +43,7 @@ export { default as Switch } from './Switch';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
 export { default as Text } from './Text';
+export { default as Textarea } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { default as ToolTip } from './Tooltip';

package/dist/comps/svgicons.d.ts

@@ -6,6 +6,10 @@ declare const SVGIcons: {
     eye: import("react/jsx-runtime").JSX.Element;
     eyeSlash: import("react/jsx-runtime").JSX.Element;
     check: import("react/jsx-runtime").JSX.Element;
+    info: import("react/jsx-runtime").JSX.Element;
+    warning: import("react/jsx-runtime").JSX.Element;
+    error: import("react/jsx-runtime").JSX.Element;
+    success: import("react/jsx-runtime").JSX.Element;
     layers: import("react/jsx-runtime").JSX.Element;
     play: import("react/jsx-runtime").JSX.Element;
     pause: import("react/jsx-runtime").JSX.Element;

package/dist/comps/svgicons.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ALERT } from "../types/enums";
 const SVGIcons = {
     arrowDown: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M17.919 8.18H6.079c-.96 0-1.44 1.16-.76 1.84l5.18 5.18c.83.83 2.18.83 3.01 0l1.97-1.97 3.21-3.21c.67-.68.19-1.84-.77-1.84z" }) }),
     arrowUp: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M18.68 13.978l-3.21-3.21-1.96-1.97a2.13 2.13 0 00-3.01 0l-5.18 5.18c-.68.68-.19 1.84.76 1.84h11.84c.96 0 1.44-1.16.76-1.84z" }) }),
@@ -7,6 +8,10 @@ const SVGIcons = {
     eye: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 20.5c-4.299 0-8.24-3.023-10.544-8.086a1 1 0 010-.828C3.759 6.523 7.701 3.5 12 3.5s8.24 3.023 10.544 8.086a1.001 1.001 0 010 .828 18.14 18.14 0 01-1.391 2.52 1 1 0 11-1.666-1.106A15.87 15.87 0 0020.529 12C18.543 7.92 15.379 5.5 12 5.5S5.457 7.92 3.471 12c1.986 4.08 5.15 6.5 8.529 6.5a7.964 7.964 0 005.036-1.92 1 1 0 111.265 1.55A9.94 9.94 0 0112 20.5z" }), _jsx("path", { fill: "#333", d: "M12 16a4.004 4.004 0 01-3.929-4.756 1 1 0 011.965.375A2 2 0 1014 12a2.034 2.034 0 00-2.053-1.999 1.04 1.04 0 01-1.043-.947.963.963 0 01.902-1.05L12 8a4 4 0 010 8z" })] }),
     eyeSlash: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#333", d: "M12 15c-4.132 0-7.98-1.214-10.294-3.249a1 1 0 111.32-1.502C4.986 11.972 8.34 13 12 13s7.014-1.028 8.974-2.751a1 1 0 111.32 1.502C19.98 13.786 16.132 15 12 15z" }), _jsx("path", { fill: "#333", d: "M12 18a1 1 0 01-1-1v-3a1 1 0 012 0v3a1 1 0 01-1 1zM7.749 17.667a.964.964 0 01-.17-.014 1 1 0 01-.817-1.155l.505-2.935a1 1 0 111.97.339l-.504 2.935a1 1 0 01-.984.83zM3.636 16.306a1.001 1.001 0 01-.942-1.336l.978-2.745a1 1 0 111.884.672l-.978 2.745a1 1 0 01-.942.664zM16.251 17.667a1 1 0 01-.984-.83l-.505-2.935a1 1 0 011.97-.339l.506 2.935a1 1 0 01-.816 1.155.964.964 0 01-.17.014zM20.364 16.306a1 1 0 01-.942-.664l-.978-2.745a1 1 0 111.884-.672l.978 2.745a1.001 1.001 0 01-.942 1.336z" })] }),
     check: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [" ", _jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }), " "] }),
+    [ALERT.Info]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M21.56 10.738l-1.35-1.58c-.25-.3-.46-.86-.46-1.26v-1.7c0-1.06-.87-1.93-1.93-1.93h-1.7c-.4 0-.97-.21-1.27-.46l-1.58-1.35c-.69-.59-1.82-.59-2.51 0l-1.6 1.35c-.3.25-.86.46-1.26.46H6.17c-1.06 0-1.93.87-1.93 1.93v1.7c0 .39-.2.95-.45 1.25l-1.35 1.59c-.58.7-.58 1.82 0 2.5l1.35 1.59c.25.29.45.86.45 1.25v1.71c0 1.06.87 1.93 1.93 1.93h1.74c.39 0 .96.21 1.26.46l1.58 1.35c.69.59 1.82.59 2.51 0l1.58-1.35c.3-.25.86-.46 1.26-.46h1.7c1.06 0 1.93-.87 1.93-1.93v-1.7c0-.4.21-.96.46-1.26l1.35-1.58c.61-.68.61-1.81.02-2.51zm-10.31-2.61c0-.41.34-.75.75-.75s.75.34.75.75v4.83c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-4.83zm.75 8.74c-.55 0-1-.45-1-1s.44-1 1-1c.55 0 1 .45 1 1s-.44 1-1 1z" }) }),
+    [ALERT.Warning]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M19.51 5.85l-5.94-3.43c-.97-.56-2.17-.56-3.15 0L4.49 5.85a3.15 3.15 0 00-1.57 2.73v6.84c0 1.12.6 2.16 1.57 2.73l5.94 3.43c.97.56 2.17.56 3.15 0l5.94-3.43a3.15 3.15 0 001.57-2.73V8.58a3.192 3.192 0 00-1.58-2.73zm-8.26 1.9c0-.41.34-.75.75-.75s.75.34.75.75V13c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.75zm1.67 8.88c-.05.12-.12.23-.21.33a.99.99 0 01-1.09.21c-.13-.05-.23-.12-.33-.21-.09-.1-.16-.21-.22-.33a.986.986 0 01-.07-.38c0-.26.1-.52.29-.71.1-.09.2-.16.33-.21.37-.16.81-.07 1.09.21.09.1.16.2.21.33.05.12.08.25.08.38s-.03.26-.08.38z" }) }),
+    [ALERT.Error]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+    [ALERT.Success]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
     //Editor
     layers: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M19.3697 4.89109L13.5097 2.28109C12.6497 1.90109 11.3497 1.90109 10.4897 2.28109L4.62969 4.89109C3.14969 5.55109 2.92969 6.45109 2.92969 6.93109C2.92969 7.41109 3.14969 8.31109 4.62969 8.97109L10.4897 11.5811C10.9197 11.7711 11.4597 11.8711 11.9997 11.8711C12.5397 11.8711 13.0797 11.7711 13.5097 11.5811L19.3697 8.97109C20.8497 8.31109 21.0697 7.41109 21.0697 6.93109C21.0697 6.45109 20.8597 5.55109 19.3697 4.89109Z", fill: "#292D32" }), _jsx("path", { d: "M12.0003 17.04C11.6203 17.04 11.2403 16.96 10.8903 16.81L4.15031 13.81C3.12031 13.35 2.32031 12.12 2.32031 10.99C2.32031 10.58 2.65031 10.25 3.06031 10.25C3.47031 10.25 3.80031 10.58 3.80031 10.99C3.80031 11.53 4.25031 12.23 4.75031 12.45L11.4903 15.45C11.8103 15.59 12.1803 15.59 12.5003 15.45L19.2403 12.45C19.7403 12.23 20.1903 11.54 20.1903 10.99C20.1903 10.58 20.5203 10.25 20.9303 10.25C21.3403 10.25 21.6703 10.58 21.6703 10.99C21.6703 12.11 20.8703 13.35 19.8403 13.81L13.1003 16.81C12.7603 16.96 12.3803 17.04 12.0003 17.04Z", fill: "#292D32" }), _jsx("path", { d: "M12.0003 22.0009C11.6203 22.0009 11.2403 21.9209 10.8903 21.7709L4.15031 18.7709C3.04031 18.2809 2.32031 17.1709 2.32031 15.9509C2.32031 15.5409 2.65031 15.2109 3.06031 15.2109C3.47031 15.2109 3.80031 15.5409 3.80031 15.9509C3.80031 16.5809 4.17031 17.1509 4.75031 17.4109L11.4903 20.4109C11.8103 20.5509 12.1803 20.5509 12.5003 20.4109L19.2403 17.4109C19.8103 17.1609 20.1903 16.5809 20.1903 15.9509C20.1903 15.5409 20.5203 15.2109 20.9303 15.2109C21.3403 15.2109 21.6703 15.5409 21.6703 15.9509C21.6703 17.1709 20.9503 18.2709 19.8403 18.7709L13.1003 21.7709C12.7603 21.9209 12.3803 22.0009 12.0003 22.0009Z", fill: "#292D32" })] }),
     play: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("path", { d: "M8 5v14l11-7z" }) }),

package/dist/funs/css.js

@@ -258,7 +258,6 @@ class CSS {
             const __k = self.cleanKey(_k);
             if (`object` == typeof cache[_k]) {
                 const _d = oid(_k, cache[_k]);
-                // console.log(_d)
                 let _indices = 0;
                 for (let i = 0; i < _d.length; i++) {
                     _indices += self.chars.indexOf(_d.charAt(i));
@@ -313,8 +312,8 @@ class CSS {
             return v.trim();
     }
     makeValue(k, v) {
-        // const hasGradient = v.includes(`gradient`)
         const self = this;
+        // console.log(`makeValue`, k, v)
         if (k in this.PROPS) {
             const key = this.PROPS[k];
             let value;
@@ -459,9 +458,11 @@ class CSS {
             else {
                 // ${v.charAt(0) == `$` ? `var(--${v.substring(1)})` : v}
                 // if ( key.includes(`padding`) ) console.log(`->padding`, v)
+                // console.log(`rea`, k, v)
                 if (v.includes(`,`)) {
-                    // console.log(`vwithcomma`, v)
+                    // console.log(`vwithcomma`, k, v)
                     let __v = [];
+                    const __k = k in cssProps ? cssProps[k] : k;
                     v.split(`,`).map((_) => {
                         // console.log(`comma`, _, cssPropsWithColor.includes(_) && isColor(`#${_}`))
                         if (_.charAt(0) == `#`) {
@@ -481,7 +482,7 @@ class CSS {
                                 __v.push(isHexColor(`#${_}`) ? `#${_}` : _);
                             }
                         }
-                        else if (isColor(`#${_}`)) {
+                        else if (cssPropsWithColor.includes(__k) && isColor(`#${_}`)) {
                             __v.push(self.makeColor(_));
                         }
                         else {
@@ -637,6 +638,7 @@ class CSS {
     }
     processLine(line) {
         const self = this;
+        // console.log(self.cx)
         if (line.startsWith(FIELNAME_KEY)) {
             self.cache = { ...self.cache, [FIELNAME_KEY]: line.split(`:`)[1] };
         }
@@ -658,7 +660,7 @@ class CSS {
                     if (key in self.PROPS) {
                         const _out = self.makeValue(key, _val);
                         const _id = self.makeID(key, _val + pseudo, _out);
-                        // console.log(`props`, _k, _id)
+                        // console.log(`_VALUE`, _k, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
                         // console.log(`_build`, key, _val, _id, _out)
@@ -729,7 +731,7 @@ class CSS {
                         }
                         // console.log(`_build`, key, _val)
                         const _id = self.makeID(key, key + pseudo, _out);
-                        // console.log(`_buildid`, key, _id)
+                        // console.log(`_VALUE-2`, _k, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
                         if (_mediaQuery) {
@@ -774,7 +776,7 @@ class CSS {
                 const _transforms = [];
                 Object.keys(o).map((_k) => {
                     if (typeof o[_k] === `string` && o[_k].startsWith(`transform:`)) {
-                        console.log(_k, o[_k]);
+                        // console.log(_k, o[_k])
                         const [_tk, _tv] = o[_k].replace(`;`, ``).split(`:`);
                         _transforms.push(_tv.trim());
                         self.cx.splice(self.cx.indexOf(_k), 1);
@@ -788,12 +790,14 @@ class CSS {
                     kvs[_id] = `transform: ${_transforms.join(` `)};`;
                     self.cx.push(_id);
                 }
+                // console.log(`[mergeDuplicates]`, o, kvs)
                 return kvs;
             };
             const _built = build(self.lexer(line));
             if (self.debug?.lexer)
-                console.log(line, self.lexer(line), _built);
+                console.log(pc.cyan(`[lexer]`), line, self.lexer(line), _built);
             // console.log(line, self.lexer(line), _built)
+            // self.cache = { ...self.cache, ...mergeDuplicates(_built) }
             self.cache = { ...self.cache, ...mergeDuplicates(_built) };
         }
     }
@@ -835,15 +839,15 @@ class CSS {
         // console.log(`[${cli}]`, self.cache)
         // console.log(`[${cli}]`, _cleaned)
         if (self.debug?.classes)
-            console.log(`[${cli}]`, self.cx);
+            console.log(pc.cyan(`[classes]`), self.cx);
         if (self.debug?.cache)
-            console.log(`[${cli}]`, self.cache);
+            console.log(pc.cyan(`[cache]`), self.cache);
         if (self.debug?.cleaned)
-            console.log(`[${cli}]`, _cleaned);
+            console.log(pc.cyan(`[cleaned]`), _cleaned);
         if (self.debug?.sheet)
-            console.log(_stylesheet);
+            console.log(pc.cyan(`[sheet]`), _stylesheet);
         if (self.debug?.media)
-            console.log(self._mediaQueries);
+            console.log(pc.cyan(`[mediaquery]`), self._mediaQueries);
         const _ = {
             cx: self.cx,
             sheet: _stylesheet,

package/dist/funs/stylesheet.js

@@ -324,7 +324,9 @@ export const cssDirect = {
 export const cssPropsWithColor = [
     // Regular CSS keys
     "color",
+    "bg",
     "background",
+    "background-color",
     "border",
     "border-color",
     "border-top-color",

package/dist/hooks/useContextMenu.d.ts

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

package/dist/hooks/useContextMenu.js

@@ -1,19 +1,17 @@
 import { useEffect } from "react";
 const useContextMenu = (menu) => {
-    const show = (e) => {
+    const show = (e, items) => {
         e.preventDefault();
         e.stopPropagation();
-        menu.current?.show(e);
+        menu.current?.show(e, items);
     };
     const hide = (e) => {
         menu.current?.hide(e);
     };
     useEffect(() => {
-        document.addEventListener("mousedown", hide);
-        document.addEventListener("touchstart", hide);
+        document.addEventListener("click", hide);
         return () => {
-            document.removeEventListener("mousedown", hide);
-            document.removeEventListener("touchstart", hide);
+            document.removeEventListener("click", hide);
         };
     }, [menu]);
     return { show, hide };

package/dist/styles.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--spring: cubic-bezier(0.2, -0.36, 0, 1.46);--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);--checkbox-height: 24px;--checkbox-width: 42px;--checkbox-knob-size: 20px;--checkbox-knob-left: 2px;--checkbox-knob-top: 2px;--checkbox-knob-left-on: 18px;--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;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--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;--context-z-index: var(--max-z-index);--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;--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;--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-detail-padding: 10px;--password-toggle-radius: 5px;--password-toggle: #fff;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111;--pin-radius: 4px;--pin-gap: 4px;--pin-shadow: inset 0px 0px 0px 2px #111;--pin-padding: 5px;--search-send-color: #111;--search-send-size: 25px;--search-send: #fff;--search-send-width: 40px;--search-send-padding: 5px;--search-send-radius: 5px;--search-send-border: 0px;--segmented: #eee;--segmented-radius: 8px;--segmented-padding: 2px;--segmented-border: 1px #ddd solid;--segment-item: transparent;--segment-item-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segment-item-padding: 5px 12px;--segment-item-border: 0px;--segment-item-font-size: 15px;--segment-item-font-weight: normal;--segment-item-color: #111;--segment-item-active-color: #fff;--segment-tab: #fff;--segment-tab-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segmented-speed: 0.5s;--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-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}.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}.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:rgba(0,0,0,.7);z-index:var(--max-z-index);backdrop-filter:blur(10px)}.--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)}.--search{overflow:hidden}.--search .--send{width:var(--search-send-width);background:var(--search-send);padding:var(--search-send-padding);border:var(--search-send-border);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--search-send-radius)}.--search .--send svg{width:var(--search-send-size);height:var(--search-send-size);transition:all .2s linear 0s}.--search .--send svg path{fill:var(--search-send-color)}.--password{overflow:hidden;width:100%}.--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)}.--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 .--detail{padding:var(--accordion-detail-padding)}.--segmented{background:var(--segmented);border-radius:var(--segmented-radius);padding:var(--segmented-padding);border:var(--segmented-border);overflow:hidden}.--segmented .--segment-item{background:var(--segment-item);border-radius:var(--segment-item-radius);padding:var(--segment-item-padding);border:var(--segment-item-border);color:var(--segment-item-color);font-size:var(--segment-item-font-size);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.--segement-active{color:var(--segment-item-active-color)}.--segmented .--segment-tab{background:var(--segment-tab);border-radius:calc(var(--segmented-radius) - var(--segmented-padding));width:var(--w);transform:translateX(calc(var(--x) - var(--segmented-padding)));z-index:0;top:var(--segmented-padding);bottom:var(--segmented-padding);transition:all var(--segmented-speed) var(--ease) 0s}.--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}.--select .--options-list button:hover{background:var(--select-option-hover)}.--select .--options-list button.selected{background:var(--select-selected)}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 0}}.--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)}.--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}.--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)}.--switch{height:var(--checkbox-height);width:var(--checkbox-width);cursor:pointer}.--switch input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.--switch:before{content:"";position:absolute;height:var(--checkbox-height);width:var(--checkbox-width);background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.--switch:after{content:"";position:absolute;width:var(--checkbox-knob-size);height:var(--checkbox-knob-size);background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:var(--checkbox-knob-top);left:var(--checkbox-knob-left);box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .75s var(--bounce) 0s}.--switch.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.--switch.is-checked:after{transform:translateX(var(--checkbox-knob-left-on))}@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))}}.--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))}.--spinner{animation:spin infinite}.--spinner.--simple{aspect-ratio:1}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.--cover{backdrop-filter:blur(4px);z-index:99999;gap:15px;pointer-events:auto}.--cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.--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)}.--contextmenu{z-index:var(--context-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)}.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}.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}.--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)}.--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 .--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: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-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);top:-1lh;overflow:visible;left:50%;transform:translateX(-50%);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);bottom:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg);z-index:0}.--with-tooltip .--tooltip .--text{z-index:1;white-space:pre}.--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}
+*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--spring: cubic-bezier(0.2, -0.36, 0, 1.46);--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);--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;--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;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--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;--context-z-index: var(--max-z-index);--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;--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;--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-detail-padding: 10px;--password-toggle-radius: 5px;--password-toggle: #fff;--password-toggle-width: 40px;--password-toggle-border: 0px;--password-toggle-padding: 6px;--password-toggle-size: 20px;--password-toggle-color: #111;--pin-radius: 4px;--pin-gap: 4px;--pin-shadow: inset 0px 0px 0px 2px #111;--pin-padding: 5px;--search-send-color: #111;--search-send-size: 25px;--search-send: #fff;--search-send-width: 40px;--search-send-padding: 5px;--search-send-radius: 5px;--search-send-border: 0px;--segmented: #eee;--segmented-radius: 8px;--segmented-padding: 2px;--segmented-border: 1px #ddd solid;--segment-item: transparent;--segment-item-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segment-item-padding: 5px 12px;--segment-item-border: 0px;--segment-item-font-size: 15px;--segment-item-font-weight: normal;--segment-item-color: #111;--segment-item-active-color: #fff;--segment-tab: #fff;--segment-tab-radius: calc(var(--segmented-radius) - var(--segmented-padding));--segmented-speed: 0.5s;--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-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}.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}.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))}.--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)}.--search{overflow:hidden}.--search .--send{width:var(--search-send-width);background:var(--search-send);padding:var(--search-send-padding);border:var(--search-send-border);right:2px;bottom:2px;top:2px;z-index:1;border-radius:var(--search-send-radius)}.--search .--send svg{width:var(--search-send-size);height:var(--search-send-size);transition:all .2s linear 0s}.--search .--send svg path{fill:var(--search-send-color)}.--password{overflow:hidden;width:100%}.--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)}.--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 .--detail{padding:var(--accordion-detail-padding)}.--segmented{background:var(--segmented);border-radius:var(--segmented-radius);padding:var(--segmented-padding);border:var(--segmented-border);overflow:hidden}.--segmented .--segment-item{background:var(--segment-item);border-radius:var(--segment-item-radius);padding:var(--segment-item-padding);border:var(--segment-item-border);color:var(--segment-item-color);font-size:var(--segment-item-font-size);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.--segement-active{color:var(--segment-item-active-color)}.--segmented .--segment-tab{background:var(--segment-tab);border-radius:calc(var(--segmented-radius) - var(--segmented-padding));width:var(--w);transform:translateX(calc(var(--x) - var(--segmented-padding)));z-index:0;top:var(--segmented-padding);bottom:var(--segmented-padding);transition:all var(--segmented-speed) var(--ease) 0s}.--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)}@keyframes textshimmer{0%{background-position:-120% 0}50%,100%{background-position:120% 0}}.--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)}.--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}.--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)}.--switch{height:var(--switch-height);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))}@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))}}.--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))}.--spinner{animation:spin infinite}.--spinner.--simple{aspect-ratio:1}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.--cover{backdrop-filter:blur(4px);z-index:99999;gap:15px;pointer-events:auto}.--cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.--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)}.--contextmenu{z-index:var(--context-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)}.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}.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}.--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)}.--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 .--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: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-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);top:-1lh;overflow:visible;left:50%;transform:translateX(-50%);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);bottom:-0.2lh;left:50%;transform:translateX(-50%) rotate(45deg);z-index:0}.--with-tooltip .--tooltip .--text{z-index:1;white-space:pre}.--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}

package/dist/types/enums.d.ts

@@ -78,10 +78,10 @@ export declare enum SKELETON {
     Circle = "CIRCLE"
 }
 export declare enum ALERT {
-    Success = "SUCCESS",
-    Error = "ERROR",
-    Warning = "WARNING",
-    Info = "INFO"
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
 }
 export declare enum AVATAR {
     Circle = "CIRCLE",
@@ -195,3 +195,9 @@ export declare enum DRAG_DIRECTION {
     y = "y",
     xy = "xy"
 }
+export declare enum Size {
+    Default = "def",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}

package/dist/types/enums.js

@@ -108,10 +108,10 @@ export var SKELETON;
 })(SKELETON || (SKELETON = {}));
 export var ALERT;
 (function (ALERT) {
-    ALERT["Success"] = "SUCCESS";
-    ALERT["Error"] = "ERROR";
-    ALERT["Warning"] = "WARNING";
-    ALERT["Info"] = "INFO";
+    ALERT["Success"] = "success";
+    ALERT["Error"] = "error";
+    ALERT["Warning"] = "warning";
+    ALERT["Info"] = "info";
 })(ALERT || (ALERT = {}));
 export var AVATAR;
 (function (AVATAR) {
@@ -234,3 +234,10 @@ export var DRAG_DIRECTION;
     DRAG_DIRECTION["y"] = "y";
     DRAG_DIRECTION["xy"] = "xy";
 })(DRAG_DIRECTION || (DRAG_DIRECTION = {}));
+export var Size;
+(function (Size) {
+    Size["Default"] = "def";
+    Size["Small"] = "sm";
+    Size["Medium"] = "md";
+    Size["Large"] = "lg";
+})(Size || (Size = {}));

package/package.json

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