@zuzjs/ui 0.10.3 → 0.10.5

package/dist/cjs/comps/ChatBubble/index.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from "../Box";
+import { BubbleMediaType, BubbleStatus } from "./types";
+declare const Bubble: import("react").ForwardRefExoticComponent<BoxProps & {
+    text?: string;
+    media?: {
+        type: BubbleMediaType;
+        source: string;
+        duration?: string;
+    };
+    side?: "me" | "you";
+    status?: BubbleStatus;
+    timeStamp?: number;
+    arrow?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Bubble;

package/dist/cjs/comps/ChatBubble/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { timeSince } from "@zuzjs/core";
+import { forwardRef } from "react";
+import { Image, ProgressBar } from "../..";
+import { useBase } from "../../hooks";
+import Box from "../Box";
+import Span from "../Span";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+import { BubbleMediaType, BubbleStatus } from "./types";
+const Bubble = forwardRef((props, ref) => {
+    const { text, media, side = "me", status = BubbleStatus.Sent, timeStamp = Date.now(), arrow = true, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { className: `--bubble-wrapper flex --bw-${side}`.trim(), children: _jsxs(Box, { className: `--bubble --bubble-${side} ${media ? `--with-media --bma-${media.type}` : ``} rel flex cols ${arrow == true ? `--b-arrow` : ``} ${className}`.trim(), style: {
+                ...style,
+            }, ...rest, children: [text && _jsx(Text, { className: `--bubble-text`, children: text }), media ?
+                    media.type == BubbleMediaType.Audio ?
+                        _jsxs(Box, { as: `flex aic --bubble-audio`, children: [_jsx(Span, { className: `--bm-action`, children: SVGIcons.play }), _jsx(ProgressBar, { progress: 0.7 }), _jsx(Text, { className: `--bm-dur`, children: media.duration ?? `00:13` })] })
+                        : media.type == BubbleMediaType.Image ?
+                            _jsx(Box, { as: `--bubble-image`, children: _jsx(Image, { src: media.source }) })
+                            : null : null, _jsxs(Box, { as: `flex aie jce --bubble-stats`, children: [_jsx(Text, { className: `--bubble-stamp tar`, children: timeSince(timeStamp) }), side == "me" && _jsx(Span, { className: `--bubble-status --bs-${status}`, children: status == BubbleStatus.Sending ? SVGIcons.pending
+                                : status == BubbleStatus.Sent ? SVGIcons.done
+                                    : status == BubbleStatus.Delivered ? SVGIcons.doneAll : SVGIcons.doneAll })] })] }) });
+});
+Bubble.displayName = `Zuz.Bubble`;
+export default Bubble;

package/dist/cjs/comps/ChatBubble/types.d.ts

@@ -0,0 +1,30 @@
+import { BoxProps } from "../Box";
+export declare enum BubbleStatus {
+    Sending = 0,
+    Sent = 1,
+    Delivered = 2,
+    Read = 3
+}
+export declare enum BubbleMediaType {
+    Image = "img",
+    Video = "vid",
+    Audio = "audio",
+    Link = "link",
+    Document = "doc",
+    Location = "loc",
+    Contact = "contact",
+    Event = "event",
+    Poll = "poll"
+}
+export type BubbleProps = BoxProps & {
+    text?: string;
+    media?: {
+        type: BubbleMediaType;
+        source: string;
+        duration?: string;
+    };
+    side?: "me" | "you";
+    status?: BubbleStatus;
+    timeStamp?: number;
+    arrow?: boolean;
+};

package/dist/cjs/comps/ChatBubble/types.js

@@ -0,0 +1,19 @@
+export var BubbleStatus;
+(function (BubbleStatus) {
+    BubbleStatus[BubbleStatus["Sending"] = 0] = "Sending";
+    BubbleStatus[BubbleStatus["Sent"] = 1] = "Sent";
+    BubbleStatus[BubbleStatus["Delivered"] = 2] = "Delivered";
+    BubbleStatus[BubbleStatus["Read"] = 3] = "Read";
+})(BubbleStatus || (BubbleStatus = {}));
+export var BubbleMediaType;
+(function (BubbleMediaType) {
+    BubbleMediaType["Image"] = "img";
+    BubbleMediaType["Video"] = "vid";
+    BubbleMediaType["Audio"] = "audio";
+    BubbleMediaType["Link"] = "link";
+    BubbleMediaType["Document"] = "doc";
+    BubbleMediaType["Location"] = "loc";
+    BubbleMediaType["Contact"] = "contact";
+    BubbleMediaType["Event"] = "event";
+    BubbleMediaType["Poll"] = "poll";
+})(BubbleMediaType || (BubbleMediaType = {}));

package/dist/cjs/comps/Crumb/index.d.ts

@@ -1,5 +1,5 @@
 declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     items: import("./types").CrumbItem[];
     maxItems?: number;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default Crumb;

package/dist/cjs/comps/Dot/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/comps/Drawer/index.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useBase, useShortcuts } from "../../hooks";
 import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
 import Box from "../Box";
+import { layerManager } from "../layer_manager";
 import Overlay from "../Overlay";
 const Drawer = forwardRef((props, ref) => {
     const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
@@ -12,17 +13,32 @@ const Drawer = forwardRef((props, ref) => {
     const divRef = useRef(null);
     const [content, setContent] = useState(children);
     const { className, style, rest } = useBase(pops);
-    useShortcuts([
-        { keys: [KeyCode.Escape], callback: () => {
-                if (visible) {
-                    onClose?.();
-                    setVisible(false);
-                }
-            } }
-    ]);
+    const shortcutsConfig = useMemo(() => [
+        {
+            keys: [KeyCode.Escape],
+            callback: () => {
+                if (layerManager.isTop(closeDrawer))
+                    closeDrawer();
+            }
+        }
+    ], [visible]);
+    useShortcuts(shortcutsConfig);
+    const closeDrawer = useCallback(() => {
+        setVisible(false);
+        onClose?.();
+    }, []);
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        if (visible) {
+            layerManager.push(closeDrawer);
+        }
+        else {
+            layerManager.pop(closeDrawer);
+        }
+        return () => layerManager.pop(closeDrawer);
+    }, [visible]);
     const _style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -41,21 +57,15 @@ const Drawer = forwardRef((props, ref) => {
         open(child) {
             if (child)
                 setContent(child);
-            if (!window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.add(`--no-scroll`);
             setVisible(true);
         },
         close() {
-            onClose?.();
-            if (window.document.body.classList.contains(`--no-scroll`))
-                window.document.body.classList.remove(`--no-scroll`);
-            setVisible(false);
+            closeDrawer();
         }
     }));
     return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
                     if (visible) {
-                        onClose?.();
-                        setVisible(false);
+                        closeDrawer();
                     }
                 }, when: visible }), _jsxs(Box, { ref: divRef, style: {
                     ...style,

package/dist/cjs/comps/List/index.d.ts

@@ -6,5 +6,5 @@ declare const List: import("react").ForwardRefExoticComponent<import("../..").Zu
     direction?: "cols" | "rows";
     seperator?: import("react").ReactNode;
     ol?: boolean;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>>;
 export default List;

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

@@ -18,6 +18,8 @@ export { default as Chart } from './Chart';
 export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
+export { default as Bubble } from './ChatBubble';
+export * from './ChatBubble/types';
 export { default as ColorScheme } from './ColorScheme';
 export { default as ContextMenu } from './ContextMenu';
 export * from './ContextMenu/types';

package/dist/cjs/comps/index.js

@@ -18,6 +18,8 @@ export { default as Chart } from './Chart';
 export * from './Chart/types';
 export { default as CheckBox } from './CheckBox';
 export * from './CheckBox/types';
+export { default as Bubble } from './ChatBubble';
+export * from './ChatBubble/types';
 export { default as ColorScheme } from './ColorScheme';
 export { default as ContextMenu } from './ContextMenu';
 export * from './ContextMenu/types';

package/dist/cjs/comps/layer_manager.d.ts

@@ -0,0 +1,13 @@
+export type CloseHandler = () => void;
+declare class LayerManager {
+    private stack;
+    private readonly SCROLL_CLASS;
+    private updateScrollLock;
+    isTop(closeFn: CloseHandler): boolean;
+    push(closeFn: CloseHandler): void;
+    pop(closeFn: CloseHandler): void;
+    handleEscape(): boolean;
+    get count(): number;
+}
+export declare const layerManager: LayerManager;
+export {};

package/dist/cjs/comps/layer_manager.js

@@ -0,0 +1,42 @@
+class LayerManager {
+    stack = [];
+    SCROLL_CLASS = "--no-scroll";
+    updateScrollLock() {
+        if (typeof window === "undefined")
+            return;
+        if (this.stack.length > 0) {
+            document.body.classList.add(this.SCROLL_CLASS);
+        }
+        else {
+            document.body.classList.remove(this.SCROLL_CLASS);
+        }
+    }
+    isTop(closeFn) {
+        return this.stack[this.stack.length - 1] === closeFn;
+    }
+    // Register a component and return a function to unregister it
+    push(closeFn) {
+        // Prevent duplicate registration of the same instance
+        if (!this.stack.includes(closeFn)) {
+            this.stack.push(closeFn);
+            this.updateScrollLock();
+        }
+    }
+    pop(closeFn) {
+        this.stack = this.stack.filter(fn => fn !== closeFn);
+        this.updateScrollLock();
+    }
+    // Attempt to close the top-most layer
+    handleEscape() {
+        const top = this.stack[this.stack.length - 1];
+        if (top) {
+            top();
+            return true; // We handled the event
+        }
+        return false;
+    }
+    get count() {
+        return this.stack.length;
+    }
+}
+export const layerManager = new LayerManager();

package/dist/cjs/comps/svgicons.d.ts

@@ -32,5 +32,8 @@ declare const SVGIcons: {
     mouse: import("react/jsx-runtime").JSX.Element;
     addKey: import("react/jsx-runtime").JSX.Element;
     calendar: import("react/jsx-runtime").JSX.Element;
+    done: import("react/jsx-runtime").JSX.Element;
+    doneAll: import("react/jsx-runtime").JSX.Element;
+    pending: import("react/jsx-runtime").JSX.Element;
 };
 export default SVGIcons;

package/dist/cjs/comps/svgicons.js

@@ -35,6 +35,9 @@ const SVGIcons = {
     mouse: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M13.2978 2.11468C13.0064 2.06339 12.75 2.29593 12.75 2.59185V5.45262C12.75 5.65098 12.8709 5.82564 13.0359 5.93583C13.5391 6.27202 13.87 6.84597 13.87 7.49906V9.49906C13.87 10.5291 13.03 11.3791 12 11.3791C10.96 11.3791 10.12 10.5291 10.12 9.49906V7.49906C10.12 6.84578 10.4583 6.27168 10.9639 5.93554C11.1291 5.82572 11.25 5.65098 11.25 5.45262V2.59249C11.25 2.29634 10.9935 2.0637 10.7019 2.11513C9.15243 2.38834 7.76579 3.13327 6.7 4.19906C5.34 5.55906 4.5 7.43906 4.5 9.49906V14.4991C4.5 18.6291 7.87 21.9991 12 21.9991C16.13 21.9991 19.5 18.6291 19.5 14.4991V9.49906C19.5 5.80857 16.813 2.73328 13.2978 2.11468Z", fill: "#292D32" }) }),
     addKey: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M20.9498 14.55L14.5598 20.94C13.1598 22.34 10.8598 22.34 9.44977 20.94L3.05977 14.55C1.65977 13.15 1.65977 10.85 3.05977 9.44L9.44977 3.05C10.8498 1.65 13.1498 1.65 14.5598 3.05L20.9498 9.44C22.3498 10.85 22.3498 13.15 20.9498 14.55Z", fill: "#292D32" }) }),
     calendar: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("path", { fill: "#292D32", d: "M8.25 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75S9 1.59 9 2v3c0 .41-.34.75-.75.75M15.75 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75M12 14.09c.52 0 .9-.31.9-.8 0-.5-.38-.79-.9-.79s-.9.29-.9.79c0 .49.38.8.9.8M12 17c.629 0 1.14-.416 1.14-.93 0-.513-.511-.93-1.14-.93-.63 0-1.14.417-1.14.93s.51.93 1.14.93" }), _jsx("path", { fill: "#292D32", d: "M19.57 4.5c-.66-.49-1.61-.02-1.61.81v.1c0 1.17-.84 2.25-2.01 2.37-1.35.14-2.49-.92-2.49-2.24V4.5c0-.55-.45-1-1-1h-.92c-.55 0-1 .45-1 1v1.04c0 .79-.41 1.49-1.03 1.88-.09.06-.19.11-.29.16q-.135.075-.3.12c-.12.04-.25.07-.39.08q-.24.03-.48 0c-.14-.01-.27-.04-.39-.08q-.15-.045-.3-.12c-.1-.05-.2-.1-.29-.16-.63-.44-1.03-1.2-1.03-2.01v-.1c0-.77-.82-1.23-1.47-.9-.01.01-.02.01-.03.02-.04.02-.07.04-.11.07-.03.03-.07.05-.1.08-.28.22-.53.47-.74.74-.11.12-.2.25-.28.38a3.498 3.498 0 0 0-.27.46c-.02.02-.03.03-.03.05-.06.12-.12.24-.16.37-.03.05-.04.09-.06.14-.06.15-.1.3-.14.45-.04.14-.07.29-.09.44a5.902 5.902 0 0 0-.06.76v8.76A4.87 4.87 0 0 0 7.37 22h9.26a4.87 4.87 0 0 0 4.87-4.87V8.37c0-1.59-.76-2.98-1.93-3.87M12 18.25c-1.55 0-2.5-.77-2.5-2.01 0-.68.35-1.27.96-1.62-.44-.31-.73-.77-.73-1.4 0-1.3 1.04-1.97 2.27-1.97s2.26.67 2.26 1.97c0 .63-.28 1.09-.73 1.4.62.35.97.94.97 1.62 0 1.24-.96 2.01-2.5 2.01" })] }),
+    done: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z" }) }),
+    doneAll: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("path", { d: "m18 7-1.41-1.41-6.34 6.34 1.41 1.41zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12zM.41 13.41 6 19l1.41-1.41L1.83 12z" }) }),
+    pending: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [_jsx("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8" }), _jsx("path", { d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" })] }),
     // animation: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
     //     <path fill="#292D32" d="m15.39 5.211 1.41 2.82c.19.39.7.76 1.13.84l2.55.42c1.63.27 2.01 1.45.84 2.63l-1.99 1.99c-.33.33-.52.98-.41 1.45l.57 2.46c.45 1.94-.59 2.7-2.3 1.68l-2.39-1.42c-.43-.26-1.15-.26-1.58 0l-2.39 1.42c-1.71 1.01-2.75.26-2.3-1.68l.57-2.46c.09-.48-.1-1.13-.43-1.46l-1.99-1.99c-1.17-1.17-.79-2.35.84-2.63l2.55-.42c.43-.07.94-.45 1.13-.84l1.41-2.82c.77-1.52 2.01-1.52 2.78.01M8 5.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h6c.41 0 .75.34.75.75s-.34.75-.75.75M5 19.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h3c.41 0 .75.34.75.75s-.34.75-.75.75M3 12.75H2c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h1c.41 0 .75.34.75.75s-.34.75-.75.75" />
     // </svg>,

package/dist/css/colors.css

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