react-miui 0.32.2 → 0.33.0

package/src/components/ui/toaster/Toaster.stories.tsx

@@ -4,59 +4,189 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Div } from "../../native";
 import { Button } from "../button/Button";
-import { useToaster } from "./Toaster";
+import { toast, useToaster } from "./Toaster";
+
+const docs = [
+    "Toast notifications powered by [sonner](https://sonner.emilkowal.ski).",
+    "",
+    "## Setup",
+    "",
+    "Wrap your app (typically once, near the root) with `ToasterProvider`.",
+    "It mounts sonner's `<Toaster />` and renders children unchanged:",
+    "",
+    "```tsx",
+    "import { ToasterProvider } from \"react-miui\";",
+    "",
+    "export const App = () => (",
+    "    <ToasterProvider position={\"bottom-center\"} richColors>",
+    "        <YourApp />",
+    "    </ToasterProvider>",
+    ");",
+    "```",
+    "",
+    "`ToasterProvider` accepts every prop sonner's `<Toaster />` accepts",
+    "(`position`, `theme`, `richColors`, `expand`, `closeButton`, `duration`, …).",
+    "",
+    "## Triggering toasts",
+    "",
+    "```tsx",
+    "// 1. Legacy hook — back-compat. (text, timeout?) => id",
+    "const notify = useToaster();",
+    "notify(\"Saved!\", 3000);",
+    "",
+    "// 2. Sonner's `toast` re-exported — full API surface.",
+    "toast.success(\"Saved!\");",
+    "toast.error(\"Failed\", { description: \"Try again\" });",
+    "toast.promise(saveAsync(), { loading: \"…\", success: \"ok\", error: \"x\" });",
+    "```",
+].join("\n");
 
 const meta: Meta = {
     title: "Components/UI/Toaster",
     tags: ["autodocs", "ui"],
+    parameters: { docs: { description: { component: docs } } },
     argTypes: {
-        text: {
-            control: {
-                type: "text",
-            },
-        },
-        time: {
-            control: {
-                type: "number",
-                step: 100,
-            },
-        },
+        text: { control: { type: "text" } },
+        time: { control: { type: "number", step: 100 } },
     },
 };
 
 type Story = StoryObj;
 
 const Primary: Story = {
-    args: {
-        text: "",
-        time: 5000,
-    },
+    name: "useToaster hook (legacy API)",
+    args: { text: "Lorem ipsum dolor sit amet", time: 5000 },
     render: (args) => {
-        const toast = useToaster();
+        const notify = useToaster();
         const { text, time } = args as { text: string; time: number };
+        const handleClick = () => { notify(text || "Lorem ipsum dolor sit amet", time); };
+
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Show toast</Button>
+            </Div>
+        );
+    },
+};
+
+const Variants: Story = {
+    name: "Variants (success / error / info / warning)",
+    render: () => (
+        <Div css={{ display: "flex", gap: 8, flexWrap: "wrap", minHeight: 200 }}>
+            <Button onClick={() => { toast("Default toast"); }}>Default</Button>
+            <Button onClick={() => { toast.success("Profile saved"); }}>Success</Button>
+            <Button onClick={() => { toast.error("Couldn't save profile"); }}>Error</Button>
+            <Button onClick={() => { toast.info("New version available"); }}>Info</Button>
+            <Button onClick={() => { toast.warning("Storage almost full"); }}>Warning</Button>
+            <Button onClick={() => { toast.message("Plain message"); }}>Message</Button>
+        </Div>
+    ),
+};
 
+const WithDescription: Story = {
+    name: "With description",
+    render: () => {
         const handleClick = () => {
-            toast(text || "Lorem ipsum dolor sit amet", time);
+            toast.success("File uploaded", { description: "report.pdf · 2.3 MB" });
         };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Toast with description</Button>
+            </Div>
+        );
+    },
+};
 
+const WithAction: Story = {
+    name: "With action button",
+    render: () => {
+        const handleClick = () => {
+            toast("Event has been created", {
+                // eslint-disable-next-line no-console
+                action: { label: "Undo", onClick: () => { console.log("Undo"); } },
+            });
+        };
         return (
-            <Div css={{ height: 400 }}>
-                {/* <Input placeholder={"Fill in text to display"} onChange={e => { setText(e.target.value); }} /> */}
-                {/* <Input */}
-                {/*    placeholder={"Time to display in ms"} */}
-                {/*    step={100} */}
-                {/*    type={"number"} */}
-                {/*    onChange={e => { setTime(e.target.value); }} */}
-                {/*    value={time} */}
-                {/*/ > */}
-                <Button onClick={handleClick}>Show toast</Button>
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Toast with action</Button>
+            </Div>
+        );
+    },
+};
+
+const fakeSave = () => new globalThis.Promise<{ name: string }>((resolve, reject) => {
+    setTimeout(() => {
+        if (Math.random() > 0.3) {
+            resolve({ name: "settings.json" });
+        }
+        else {
+            reject(new Error("Network error"));
+        }
+    }, 1500);
+});
+
+const PromiseBased: Story = {
+    name: "Promise-based",
+    render: () => {
+        const handleClick = () => {
+            toast.promise(fakeSave(), {
+                loading: "Saving…",
+                success: (data) => `${data.name} saved`,
+                error: (err: Error) => err.message,
+            });
+        };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Run promise toast</Button>
+            </Div>
+        );
+    },
+};
+
+const Loading: Story = {
+    name: "Manual loading + dismiss",
+    render: () => {
+        const handleClick = () => {
+            const id = toast.loading("Working on it…");
+            setTimeout(() => { toast.success("All done!", { id }); }, 2000);
+        };
+        return (
+            <Div css={{ minHeight: 200 }}>
+                <Button onClick={handleClick}>Show loading</Button>
             </Div>
         );
     },
 };
 
-export {
-    Primary,
+const CustomDuration: Story = {
+    name: "Custom duration",
+    render: () => (
+        <Div css={{ display: "flex", gap: 8, minHeight: 200 }}>
+            <Button onClick={() => { toast("Gone in 1s", { duration: 1000 }); }}>1 second</Button>
+            <Button onClick={() => { toast("Sticks 10s", { duration: 10000 }); }}>10 seconds</Button>
+            <Button onClick={() => { toast("Sticky", { duration: Infinity }); }}>Sticky</Button>
+        </Div>
+    ),
 };
 
+const DismissAll: Story = {
+    name: "Stack & dismiss all",
+    render: () => {
+        const handleShowThree = () => {
+            toast("First");
+            toast("Second");
+            toast("Third");
+        };
+        const handleDismiss = () => { toast.dismiss(); };
+        return (
+            <Div css={{ display: "flex", gap: 8, minHeight: 200 }}>
+                <Button onClick={handleShowThree}>Show three</Button>
+                <Button onClick={handleDismiss}>Dismiss all</Button>
+            </Div>
+        );
+    },
+};
+
+export { Primary, Variants, WithDescription, WithAction, PromiseBased, Loading, CustomDuration, DismissAll };
+
 export default meta;

package/src/components/ui/toaster/Toaster.tsx

@@ -1,105 +1,29 @@
-import React, { createContext, useContext } from "react";
+import React, { useCallback } from "react";
 
-import type { Toast } from "./types";
+import { toast, Toaster as SonnerToaster } from "sonner";
 
-// eslint-disable-next-line @typescript-eslint/no-shadow
-import { Notification } from "./Notification";
+type SonnerToasterProps = React.ComponentProps<typeof SonnerToaster>;
 
-type ToasterFn = (text: string, timeout?: number) => void;
-
-const ToasterContext = createContext<ToasterFn>(() => {
-    throw new Error("Toaster Provider missing in the tree");
-});
-ToasterContext.displayName = "ToasterContext";
-
-const prefix = `${Date.now()}_`;
-let counter = 0;
-
-interface Props {
-    children: React.ReactNode;
+interface ToasterProviderProps extends SonnerToasterProps {
+    children?: React.ReactNode;
 }
-interface State {
-    list: Toast[];
-}
-
-const DEFAULT_TIMEOUT = 5000;
-
-class ToasterProvider extends React.Component<Props, State> {
-    public constructor(props: Props, context: unknown) {
-        super(props, context);
-
-        this.state = {
-            list: [],
-        };
-    }
-
-    private readonly _add = (text: string, timeout = DEFAULT_TIMEOUT) => {
-        this._removeAllToasts();
-
-        const id = prefix + String(counter++);
-        const hide = false;
-
-        this.setState(prev => ({
-            ...prev,
-            list: [...prev.list, {
-                id,
-                text,
-                hide,
-            }],
-        }));
-
-        setTimeout(() => {
-            this.setState(prev => ({
-                ...prev,
-                list: prev.list.map(p => {
-                    if (p.id !== id) {
-                        return p;
-                    }
-                    return {
-                        ...p,
-                        hide: true,
-                    };
-                }),
-            }));
-        }, timeout);
-    };
-
-    private readonly _handleRemove = (id: Toast["id"]) => {
-        this.setState(prev => ({
-            ...prev,
-            list: prev.list.filter(p => p.id !== id),
-        }));
-    };
-
-    private readonly _removeAllToasts = () => {
-        this.setState(prev => ({
-            ...prev,
-            list: prev.list.map(p => {
-                if (p.hide) {
-                    return p;
-                }
-                return {
-                    ...p,
-                    hide: true,
-                };
-            }),
-        }));
-    };
-
-    public override render() {
-        const notifications = this.state.list.map((t) => {
-            return <Notification onRemove={this._handleRemove} key={t.id} toast={t} />;
-        });
-
-        return (
-            <ToasterContext.Provider value={this._add}>
-                {notifications}
-                {this.props.children}
-            </ToasterContext.Provider>
-        );
-    }
-}
-
-const useToaster = () => useContext(ToasterContext);
 
-export { ToasterProvider, useToaster };
+const ToasterProvider: React.FC<ToasterProviderProps> = ({ children, position = "bottom-center", ...rest }) => {
+    return (
+        <>
+            {children}
+            <SonnerToaster position={position} {...rest} />
+        </>
+    );
+};
+
+type ToasterFn = (text: string, timeout?: number) => string | number;
+
+const useToaster = (): ToasterFn => {
+    return useCallback((text, timeout) => {
+        return toast(text, timeout != null ? { duration: timeout } : undefined);
+    }, []);
+};
+
+export { ToasterProvider, useToaster, toast };
+export type { ToasterProviderProps };

package/storybook-static/assets/Action.stories-DBtNlWQo.js

@@ -0,0 +1 @@
+import{A as a,R as n}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const c={title:"Components/UI/Action",component:a,tags:["autodocs","ui"],args:{badge:""},argTypes:{badge:{control:{type:"text"}},href:{type:"string"}}},i={args:{label:"Section name",icon:"checkmark"},render:e=>{const t={...e};return e.label||delete t.label,n.createElement(a,{...t})}},l={args:{label:"I am a button",icon:"checkmark",onClick:()=>{alert("Clicked")}}},m={args:{label:"I am a link",icon:"checkmark",href:"https://example.com"}},s={args:{label:"I am a custom link",icon:"checkmark",to:"/subpage",Link:e=>n.createElement("a",{href:e.href,onClick:t=>{t.preventDefault(),alert("I'd take you to "+e.href)}},e.children)}},k=["Primary","Button","Link","WithCustomLink"];export{l as Button,m as Link,i as Primary,s as WithCustomLink,k as __namedExportsOrder,c as default};

package/storybook-static/assets/Button.stories-DFO8nsTN.js

@@ -0,0 +1 @@
+import{B as t,aC as l,R as e,aI as a}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const c={title:"Components/UI/Button",component:t,tags:["autodocs","ui"]},s={args:{children:"Click me",onClick:()=>{alert("Clicked")}}},o=a("div",{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"1rem"}),u={render:()=>{const n=l.useCallback(()=>{alert("Clicked")},[]);return e.createElement(o,null,e.createElement(t,{onClick:n},"Basic button"),e.createElement(t,{disabled:!0,onClick:n},"Disabled button"),e.createElement(t,{inline:!0,onClick:n},"Inline button"),e.createElement(t,{outline:!0,onClick:n},"Outline button"))}},m=["Primary","MultipleAtOnce"];export{u as MultipleAtOnce,s as Primary,m as __namedExportsOrder,c as default};

package/storybook-static/assets/Card.stories-BoCt66U4.js

@@ -0,0 +1 @@
+import{Z as r,R as e,z as t,aI as a}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const i={title:"Layout/Card",component:r,tags:["autodocs"]},c={render:()=>e.createElement(r,null,e.createElement(t,{vertical:!0,horizontal:!0},"Content inside a basic Card"))},d={render:()=>e.createElement(t.Container,null,e.createElement(r,null,e.createElement(t,{vertical:!0,horizontal:!0},"First Card")),e.createElement(r,null,e.createElement(t,{vertical:!0,horizontal:!0},"Second Card")),e.createElement(r,{variant:"margin"},e.createElement(t,{vertical:!0,horizontal:!0},"Third Card with margin variant")))},s={render:()=>e.createElement(r,{variant:"margin"},e.createElement(t,{vertical:!0,horizontal:!0},"Card with left and right margins"))},n=a(r,{background:"#f0f8ff",borderRadius:"10px",boxShadow:"0 4px 8px rgba(0, 0, 0, 0.1)",border:"1px solid #d0e3ff"}),u={render:()=>e.createElement(n,null,e.createElement(t,{vertical:!0,horizontal:!0},"This card has custom styling"))},m=["Default","MultipleCards","WithMargin","CustomStyled"];export{u as CustomStyled,c as Default,d as MultipleCards,s as WithMargin,m as __namedExportsOrder,i as default};

package/storybook-static/assets/Checkbox.stories-C58YeH4u.js

@@ -0,0 +1 @@
+import{C as t,aC as r,R as e,D as o,ay as d,aI as m}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const E={title:"Components/Form/Checkbox",component:t,tags:["autodocs","form"],argTypes:{color:{control:{type:"color"}},defaultChecked:{control:{type:"boolean"}},checked:{control:{type:"boolean"}},disabled:{control:{type:"boolean"}},readOnly:{control:{type:"boolean"}},error:{control:{type:"boolean"}},onChange:{action:"onChange"}},args:{children:"Check me"}},h={},u=m(t,{"--color":"$colors$green1"}),i={render:l=>{const[n,a]=r.useState(!1),c=r.useCallback(()=>{a(s=>!s)},[]);return e.createElement(e.Fragment,null,e.createElement(o,null,"Red (deprecated prop):"),e.createElement(t,{...l,color:"red"}),e.createElement(o,null,"Blue (css):"),e.createElement(t,{...l,css:{"--color":"$blue5"}}),e.createElement(o,null,"Green (composed):"),e.createElement(u,{...d(l,["ref"])}),e.createElement(o,null,"Always controlled: (checked: ",String(n),")"),e.createElement(t,{...l,checked:n,onChange:c}),e.createElement(o,null,"Always disabled:"),e.createElement(t,{...l,disabled:!0}),e.createElement(o,null,"Always read-only:"),e.createElement(t,{...l,readOnly:!0}))},args:{defaultChecked:!0}},b=["Primary","AllAtOnce"];export{i as AllAtOnce,h as Primary,b as __namedExportsOrder,E as default};

package/storybook-static/assets/Choice.stories-Cf7UbPxn.js

@@ -0,0 +1 @@
+import{a as r,aC as c,R as e,z as l,aI as o}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const h={title:"Components/Form/Choice",component:r,tags:["autodocs","form"]},u=o("div",{display:"flex",flexDirection:"column",gap:"2rem",padding:"1rem"}),v={render:()=>{const t=["Single","Multiple words"],[a,n]=c.useState(t[0]);return e.createElement(l,{vertical:!0,horizontal:!0},e.createElement(r,{values:t,value:a,name:"basic-choice",onChange:n}))}},d={render:()=>{const t=[{label:"Option 1",value:"one"},{label:"Option 2",value:"two"},{label:"Option 3",value:"three"}],[a,n]=c.useState(t[0].value);return e.createElement(l,{vertical:!0,horizontal:!0},e.createElement(r,{values:t,value:a,name:"object-choice",onChange:n}),e.createElement("p",null,"Current value: ",a))}},i=o(r,{"--choice-text":"#59a5c2","--choice-border":"#10a4dc","--choice-bg":"#f9fdff","--choice-active-text":"#145b79","--choice-active-bg":"#ddf5ff"}),E={render:()=>{const t=[{label:"Option 1",value:"one"},{label:"Option 2",value:"two"},{label:"Option 3",value:"three"}],[a,n]=c.useState(t[0].value);return e.createElement(u,null,e.createElement(l,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Default (centered)"),e.createElement(r,{values:t,value:a,name:"default-choice",onChange:n})),e.createElement(l,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Wide variant"),e.createElement(r,{values:t,value:a,name:"wide-choice",onChange:n,wide:!0})),e.createElement(l,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Left aligned variant"),e.createElement(r,{values:t,value:a,name:"left-choice",onChange:n,unaligned:!0})),e.createElement(l,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Custom colors"),e.createElement(i,{values:t,value:a,name:"combined-choice",onChange:n})))}},p=["Basic","WithObjectValues","Variants"];export{v as Basic,E as Variants,d as WithObjectValues,p as __namedExportsOrder,h as default};

package/storybook-static/assets/Color-23OOGO2C-CELuW8GR.js

@@ -0,0 +1 @@
+import{g as de,P as fe,M as ge,s as C,F as be,B as J}from"./DocsRenderer-LL677BLK-BOcEjZ28.js";import{aC as y,R as v,a8 as ve,a4 as L}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";import"./react-18-oqx706Mo.js";var pe=L({"../../../node_modules/color-name/index.js"(r,o){o.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),Q=L({"../../../node_modules/color-convert/conversions.js"(r,o){var s=pe(),h={};for(let e of Object.keys(s))h[s[e]]=e;var u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};o.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:a,labels:t}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:a}),Object.defineProperty(u[e],"labels",{value:t})}u.rgb.hsl=function(e){let a=e[0]/255,t=e[1]/255,n=e[2]/255,l=Math.min(a,t,n),i=Math.max(a,t,n),c=i-l,d,g;i===l?d=0:a===i?d=(t-n)/c:t===i?d=2+(n-a)/c:n===i&&(d=4+(a-t)/c),d=Math.min(d*60,360),d<0&&(d+=360);let b=(l+i)/2;return i===l?g=0:b<=.5?g=c/(i+l):g=c/(2-i-l),[d,g*100,b*100]},u.rgb.hsv=function(e){let a,t,n,l,i,c=e[0]/255,d=e[1]/255,g=e[2]/255,b=Math.max(c,d,g),m=b-Math.min(c,d,g),p=function(_){return(b-_)/6/m+1/2};return m===0?(l=0,i=0):(i=m/b,a=p(c),t=p(d),n=p(g),c===b?l=n-t:d===b?l=1/3+a-n:g===b&&(l=2/3+t-a),l<0?l+=1:l>1&&(l-=1)),[l*360,i*100,b*100]},u.rgb.hwb=function(e){let a=e[0],t=e[1],n=e[2],l=u.rgb.hsl(e)[0],i=1/255*Math.min(a,Math.min(t,n));return n=1-1/255*Math.max(a,Math.max(t,n)),[l,i*100,n*100]},u.rgb.cmyk=function(e){let a=e[0]/255,t=e[1]/255,n=e[2]/255,l=Math.min(1-a,1-t,1-n),i=(1-a-l)/(1-l)||0,c=(1-t-l)/(1-l)||0,d=(1-n-l)/(1-l)||0;return[i*100,c*100,d*100,l*100]};function f(e,a){return(e[0]-a[0])**2+(e[1]-a[1])**2+(e[2]-a[2])**2}u.rgb.keyword=function(e){let a=h[e];if(a)return a;let t=1/0,n;for(let l of Object.keys(s)){let i=s[l],c=f(e,i);c<t&&(t=c,n=l)}return n},u.keyword.rgb=function(e){return s[e]},u.rgb.xyz=function(e){let a=e[0]/255,t=e[1]/255,n=e[2]/255;a=a>.04045?((a+.055)/1.055)**2.4:a/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92;let l=a*.4124+t*.3576+n*.1805,i=a*.2126+t*.7152+n*.0722,c=a*.0193+t*.1192+n*.9505;return[l*100,i*100,c*100]},u.rgb.lab=function(e){let a=u.rgb.xyz(e),t=a[0],n=a[1],l=a[2];t/=95.047,n/=100,l/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,l=l>.008856?l**(1/3):7.787*l+16/116;let i=116*n-16,c=500*(t-n),d=200*(n-l);return[i,c,d]},u.hsl.rgb=function(e){let a=e[0]/360,t=e[1]/100,n=e[2]/100,l,i,c;if(t===0)return c=n*255,[c,c,c];n<.5?l=n*(1+t):l=n+t-n*t;let d=2*n-l,g=[0,0,0];for(let b=0;b<3;b++)i=a+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?c=d+(l-d)*6*i:2*i<1?c=l:3*i<2?c=d+(l-d)*(2/3-i)*6:c=d,g[b]=c*255;return g},u.hsl.hsv=function(e){let a=e[0],t=e[1]/100,n=e[2]/100,l=t,i=Math.max(n,.01);n*=2,t*=n<=1?n:2-n,l*=i<=1?i:2-i;let c=(n+t)/2,d=n===0?2*l/(i+l):2*t/(n+t);return[a,d*100,c*100]},u.hsv.rgb=function(e){let a=e[0]/60,t=e[1]/100,n=e[2]/100,l=Math.floor(a)%6,i=a-Math.floor(a),c=255*n*(1-t),d=255*n*(1-t*i),g=255*n*(1-t*(1-i));switch(n*=255,l){case 0:return[n,g,c];case 1:return[d,n,c];case 2:return[c,n,g];case 3:return[c,d,n];case 4:return[g,c,n];case 5:return[n,c,d]}},u.hsv.hsl=function(e){let a=e[0],t=e[1]/100,n=e[2]/100,l=Math.max(n,.01),i,c;c=(2-t)*n;let d=(2-t)*l;return i=t*l,i/=d<=1?d:2-d,i=i||0,c/=2,[a,i*100,c*100]},u.hwb.rgb=function(e){let a=e[0]/360,t=e[1]/100,n=e[2]/100,l=t+n,i;l>1&&(t/=l,n/=l);let c=Math.floor(6*a),d=1-n;i=6*a-c,(c&1)!==0&&(i=1-i);let g=t+i*(d-t),b,m,p;switch(c){default:case 6:case 0:b=d,m=g,p=t;break;case 1:b=g,m=d,p=t;break;case 2:b=t,m=d,p=g;break;case 3:b=t,m=g,p=d;break;case 4:b=g,m=t,p=d;break;case 5:b=d,m=t,p=g;break}return[b*255,m*255,p*255]},u.cmyk.rgb=function(e){let a=e[0]/100,t=e[1]/100,n=e[2]/100,l=e[3]/100,i=1-Math.min(1,a*(1-l)+l),c=1-Math.min(1,t*(1-l)+l),d=1-Math.min(1,n*(1-l)+l);return[i*255,c*255,d*255]},u.xyz.rgb=function(e){let a=e[0]/100,t=e[1]/100,n=e[2]/100,l,i,c;return l=a*3.2406+t*-1.5372+n*-.4986,i=a*-.9689+t*1.8758+n*.0415,c=a*.0557+t*-.204+n*1.057,l=l>.0031308?1.055*l**(1/2.4)-.055:l*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,l=Math.min(Math.max(0,l),1),i=Math.min(Math.max(0,i),1),c=Math.min(Math.max(0,c),1),[l*255,i*255,c*255]},u.xyz.lab=function(e){let a=e[0],t=e[1],n=e[2];a/=95.047,t/=100,n/=108.883,a=a>.008856?a**(1/3):7.787*a+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116;let l=116*t-16,i=500*(a-t),c=200*(t-n);return[l,i,c]},u.lab.xyz=function(e){let a=e[0],t=e[1],n=e[2],l,i,c;i=(a+16)/116,l=t/500+i,c=i-n/200;let d=i**3,g=l**3,b=c**3;return i=d>.008856?d:(i-16/116)/7.787,l=g>.008856?g:(l-16/116)/7.787,c=b>.008856?b:(c-16/116)/7.787,l*=95.047,i*=100,c*=108.883,[l,i,c]},u.lab.lch=function(e){let a=e[0],t=e[1],n=e[2],l;l=Math.atan2(n,t)*360/2/Math.PI,l<0&&(l+=360);let i=Math.sqrt(t*t+n*n);return[a,i,l]},u.lch.lab=function(e){let a=e[0],t=e[1],n=e[2]/360*2*Math.PI,l=t*Math.cos(n),i=t*Math.sin(n);return[a,l,i]},u.rgb.ansi16=function(e,a=null){let[t,n,l]=e,i=a===null?u.rgb.hsv(e)[2]:a;if(i=Math.round(i/50),i===0)return 30;let c=30+(Math.round(l/255)<<2|Math.round(n/255)<<1|Math.round(t/255));return i===2&&(c+=60),c},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let a=e[0],t=e[1],n=e[2];return a===t&&t===n?a<8?16:a>248?231:Math.round((a-8)/247*24)+232:16+36*Math.round(a/255*5)+6*Math.round(t/255*5)+Math.round(n/255*5)},u.ansi16.rgb=function(e){let a=e%10;if(a===0||a===7)return e>50&&(a+=3.5),a=a/10.5*255,[a,a,a];let t=(~~(e>50)+1)*.5,n=(a&1)*t*255,l=(a>>1&1)*t*255,i=(a>>2&1)*t*255;return[n,l,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let a,t=Math.floor(e/36)/5*255,n=Math.floor((a=e%36)/6)/5*255,l=a%6/5*255;return[t,n,l]},u.rgb.hex=function(e){let a=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(a.length)+a},u.hex.rgb=function(e){let a=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!a)return[0,0,0];let t=a[0];a[0].length===3&&(t=t.split("").map(d=>d+d).join(""));let n=parseInt(t,16),l=n>>16&255,i=n>>8&255,c=n&255;return[l,i,c]},u.rgb.hcg=function(e){let a=e[0]/255,t=e[1]/255,n=e[2]/255,l=Math.max(Math.max(a,t),n),i=Math.min(Math.min(a,t),n),c=l-i,d,g;return c<1?d=i/(1-c):d=0,c<=0?g=0:l===a?g=(t-n)/c%6:l===t?g=2+(n-a)/c:g=4+(a-t)/c,g/=6,g%=1,[g*360,c*100,d*100]},u.hsl.hcg=function(e){let a=e[1]/100,t=e[2]/100,n=t<.5?2*a*t:2*a*(1-t),l=0;return n<1&&(l=(t-.5*n)/(1-n)),[e[0],n*100,l*100]},u.hsv.hcg=function(e){let a=e[1]/100,t=e[2]/100,n=a*t,l=0;return n<1&&(l=(t-n)/(1-n)),[e[0],n*100,l*100]},u.hcg.rgb=function(e){let a=e[0]/360,t=e[1]/100,n=e[2]/100;if(t===0)return[n*255,n*255,n*255];let l=[0,0,0],i=a%1*6,c=i%1,d=1-c,g=0;switch(Math.floor(i)){case 0:l[0]=1,l[1]=c,l[2]=0;break;case 1:l[0]=d,l[1]=1,l[2]=0;break;case 2:l[0]=0,l[1]=1,l[2]=c;break;case 3:l[0]=0,l[1]=d,l[2]=1;break;case 4:l[0]=c,l[1]=0,l[2]=1;break;default:l[0]=1,l[1]=0,l[2]=d}return g=(1-t)*n,[(t*l[0]+g)*255,(t*l[1]+g)*255,(t*l[2]+g)*255]},u.hcg.hsv=function(e){let a=e[1]/100,t=e[2]/100,n=a+t*(1-a),l=0;return n>0&&(l=a/n),[e[0],l*100,n*100]},u.hcg.hsl=function(e){let a=e[1]/100,t=e[2]/100*(1-a)+.5*a,n=0;return t>0&&t<.5?n=a/(2*t):t>=.5&&t<1&&(n=a/(2*(1-t))),[e[0],n*100,t*100]},u.hcg.hwb=function(e){let a=e[1]/100,t=e[2]/100,n=a+t*(1-a);return[e[0],(n-a)*100,(1-n)*100]},u.hwb.hcg=function(e){let a=e[1]/100,t=1-e[2]/100,n=t-a,l=0;return n<1&&(l=(t-n)/(1-n)),[e[0],n*100,l*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let a=Math.round(e[0]/100*255)&255,t=((a<<16)+(a<<8)+a).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),me=L({"../../../node_modules/color-convert/route.js"(r,o){var s=Q();function h(){let a={},t=Object.keys(s);for(let n=t.length,l=0;l<n;l++)a[t[l]]={distance:-1,parent:null};return a}function u(a){let t=h(),n=[a];for(t[a].distance=0;n.length;){let l=n.pop(),i=Object.keys(s[l]);for(let c=i.length,d=0;d<c;d++){let g=i[d],b=t[g];b.distance===-1&&(b.distance=t[l].distance+1,b.parent=l,n.unshift(g))}}return t}function f(a,t){return function(n){return t(a(n))}}function e(a,t){let n=[t[a].parent,a],l=s[t[a].parent][a],i=t[a].parent;for(;t[i].parent;)n.unshift(t[i].parent),l=f(s[t[i].parent][i],l),i=t[i].parent;return l.conversion=n,l}o.exports=function(a){let t=u(a),n={},l=Object.keys(t);for(let i=l.length,c=0;c<i;c++){let d=l[c];t[d].parent!==null&&(n[d]=e(d,t))}return n}}}),ye=L({"../../../node_modules/color-convert/index.js"(r,o){var s=Q(),h=me(),u={},f=Object.keys(s);function e(t){let n=function(...l){let i=l[0];return i==null?i:(i.length>1&&(l=i),t(l))};return"conversion"in t&&(n.conversion=t.conversion),n}function a(t){let n=function(...l){let i=l[0];if(i==null)return i;i.length>1&&(l=i);let c=t(l);if(typeof c=="object")for(let d=c.length,g=0;g<d;g++)c[g]=Math.round(c[g]);return c};return"conversion"in t&&(n.conversion=t.conversion),n}f.forEach(t=>{u[t]={},Object.defineProperty(u[t],"channels",{value:s[t].channels}),Object.defineProperty(u[t],"labels",{value:s[t].labels});let n=h(t);Object.keys(n).forEach(l=>{let i=n[l];u[t][l]=a(i),u[t][l].raw=e(i)})}),o.exports=u}}),k=ve(ye());function xe(r,o,{signal:s,edges:h}={}){let u,f=null,e=h!=null&&h.includes("leading"),a=h==null||h.includes("trailing"),t=()=>{f!==null&&(r.apply(u,f),u=void 0,f=null)},n=()=>{a&&t(),d()},l=null,i=()=>{l!=null&&clearTimeout(l),l=setTimeout(()=>{l=null,n()},o)},c=()=>{l!==null&&(clearTimeout(l),l=null)},d=()=>{c(),u=void 0,f=null},g=()=>{t()},b=function(...m){if(s?.aborted)return;u=this,f=m;let p=l==null;i(),e&&p&&t()};return b.schedule=i,b.cancel=d,b.flush=g,s?.addEventListener("abort",d,{once:!0}),b}function $(){return($=Object.assign||function(r){for(var o=1;o<arguments.length;o++){var s=arguments[o];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(r[h]=s[h])}return r}).apply(this,arguments)}function F(r,o){if(r==null)return{};var s,h,u={},f=Object.keys(r);for(h=0;h<f.length;h++)o.indexOf(s=f[h])>=0||(u[s]=r[s]);return u}function T(r){var o=y.useRef(r),s=y.useRef(function(h){o.current&&o.current(h)});return o.current=r,s.current}var O=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=1),r>s?s:r<o?o:r},S=function(r){return"touches"in r},B=function(r){return r&&r.ownerDocument.defaultView||self},W=function(r,o,s){var h=r.getBoundingClientRect(),u=S(o)?(function(f,e){for(var a=0;a<f.length;a++)if(f[a].identifier===e)return f[a];return f[0]})(o.touches,s):o;return{left:O((u.pageX-(h.left+B(r).pageXOffset))/h.width),top:O((u.pageY-(h.top+B(r).pageYOffset))/h.height)}},U=function(r){!S(r)&&r.preventDefault()},D=v.memo(function(r){var o=r.onMove,s=r.onKey,h=F(r,["onMove","onKey"]),u=y.useRef(null),f=T(o),e=T(s),a=y.useRef(null),t=y.useRef(!1),n=y.useMemo(function(){var d=function(m){U(m),(S(m)?m.touches.length>0:m.buttons>0)&&u.current?f(W(u.current,m,a.current)):b(!1)},g=function(){return b(!1)};function b(m){var p=t.current,_=B(u.current),E=m?_.addEventListener:_.removeEventListener;E(p?"touchmove":"mousemove",d),E(p?"touchend":"mouseup",g)}return[function(m){var p=m.nativeEvent,_=u.current;if(_&&(U(p),!(function(M,j){return j&&!S(M)})(p,t.current)&&_)){if(S(p)){t.current=!0;var E=p.changedTouches||[];E.length&&(a.current=E[0].identifier)}_.focus(),f(W(_,p,a.current)),b(!0)}},function(m){var p=m.which||m.keyCode;p<37||p>40||(m.preventDefault(),e({left:p===39?.05:p===37?-.05:0,top:p===40?.05:p===38?-.05:0}))},b]},[e,f]),l=n[0],i=n[1],c=n[2];return y.useEffect(function(){return c},[c]),v.createElement("div",$({},h,{onTouchStart:l,onMouseDown:l,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),R=function(r){return r.filter(Boolean).join(" ")},G=function(r){var o=r.color,s=r.left,h=r.top,u=h===void 0?.5:h,f=R(["react-colorful__pointer",r.className]);return v.createElement("div",{className:f,style:{top:100*u+"%",left:100*s+"%"}},v.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:o}}))},x=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=Math.pow(10,o)),Math.round(s*r)/s},we={grad:.9,turn:360,rad:360/(2*Math.PI)},ke=function(r){return re(K(r))},K=function(r){return r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?x(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?x(parseInt(r.substring(6,8),16)/255,2):1}},_e=function(r,o){return o===void 0&&(o="deg"),Number(r)*(we[o]||1)},Ee=function(r){var o=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?Me({h:_e(o[1],o[2]),s:Number(o[3]),l:Number(o[4]),a:o[5]===void 0?1:Number(o[5])/(o[6]?100:1)}):{h:0,s:0,v:0,a:1}},Me=function(r){var o=r.s,s=r.l;return{h:r.h,s:(o*=(s<50?s:100-s)/100)>0?2*o/(s+o)*100:0,v:s+o,a:r.a}},Ce=function(r){return Ne(ee(r))},Z=function(r){var o=r.s,s=r.v,h=r.a,u=(200-o)*s/100;return{h:x(r.h),s:x(u>0&&u<200?o*s/100/(u<=100?u:200-u)*100:0),l:x(u/2),a:x(h,2)}},V=function(r){var o=Z(r);return"hsl("+o.h+", "+o.s+"%, "+o.l+"%)"},H=function(r){var o=Z(r);return"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")"},ee=function(r){var o=r.h,s=r.s,h=r.v,u=r.a;o=o/360*6,s/=100,h/=100;var f=Math.floor(o),e=h*(1-s),a=h*(1-(o-f)*s),t=h*(1-(1-o+f)*s),n=f%6;return{r:x(255*[h,a,e,e,t,h][n]),g:x(255*[t,h,h,a,e,e][n]),b:x(255*[e,e,t,h,h,a][n]),a:x(u,2)}},$e=function(r){var o=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?re({r:Number(o[1])/(o[2]?100/255:1),g:Number(o[3])/(o[4]?100/255:1),b:Number(o[5])/(o[6]?100/255:1),a:o[7]===void 0?1:Number(o[7])/(o[8]?100:1)}):{h:0,s:0,v:0,a:1}},z=function(r){var o=r.toString(16);return o.length<2?"0"+o:o},Ne=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=u<1?z(x(255*u)):"";return"#"+z(o)+z(s)+z(h)+f},re=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=Math.max(o,s,h),e=f-Math.min(o,s,h),a=e?f===o?(s-h)/e:f===s?2+(h-o)/e:4+(o-s)/e:0;return{h:x(60*(a<0?a+6:a)),s:x(f?e/f*100:0),v:x(f/255*100),a:u}},te=v.memo(function(r){var o=r.hue,s=r.onChange,h=R(["react-colorful__hue",r.className]);return v.createElement("div",{className:h},v.createElement(D,{onMove:function(u){s({h:360*u.left})},onKey:function(u){s({h:O(o+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(o),"aria-valuemax":"360","aria-valuemin":"0"},v.createElement(G,{className:"react-colorful__hue-pointer",left:o/360,color:V({h:o,s:100,v:100,a:1})})))}),ne=v.memo(function(r){var o=r.hsva,s=r.onChange,h={backgroundColor:V({h:o.h,s:100,v:100,a:1})};return v.createElement("div",{className:"react-colorful__saturation",style:h},v.createElement(D,{onMove:function(u){s({s:100*u.left,v:100-100*u.top})},onKey:function(u){s({s:O(o.s+100*u.left,0,100),v:O(o.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(o.s)+"%, Brightness "+x(o.v)+"%"},v.createElement(G,{className:"react-colorful__saturation-pointer",top:1-o.v/100,left:o.s/100,color:V(o)})))}),ae=function(r,o){if(r===o)return!0;for(var s in r)if(r[s]!==o[s])return!1;return!0},le=function(r,o){return r.replace(/\s/g,"")===o.replace(/\s/g,"")},Oe=function(r,o){return r.toLowerCase()===o.toLowerCase()||ae(K(r),K(o))};function oe(r,o,s){var h=T(s),u=y.useState(function(){return r.toHsva(o)}),f=u[0],e=u[1],a=y.useRef({color:o,hsva:f});y.useEffect(function(){if(!r.equal(o,a.current.color)){var n=r.toHsva(o);a.current={hsva:n,color:o},e(n)}},[o,r]),y.useEffect(function(){var n;ae(f,a.current.hsva)||r.equal(n=r.fromHsva(f),a.current.color)||(a.current={hsva:f,color:n},h(n))},[f,r,h]);var t=y.useCallback(function(n){e(function(l){return Object.assign({},l,n)})},[]);return[f,t]}var Se=typeof window<"u"?y.useLayoutEffect:y.useEffect,Re=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},Y=new Map,ue=function(r){Se(function(){var o=r.current?r.current.ownerDocument:document;if(o!==void 0&&!Y.has(o)){var s=o.createElement("style");s.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,Y.set(o,s);var h=Re();h&&s.setAttribute("nonce",h),o.head.appendChild(s)}},[])},je=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=F(r,["className","colorModel","color","onChange"]),a=y.useRef(null);ue(a);var t=oe(s,u,f),n=t[0],l=t[1],i=R(["react-colorful",o]);return v.createElement("div",$({},e,{ref:a,className:i}),v.createElement(ne,{hsva:n,onChange:l}),v.createElement(te,{hue:n.h,onChange:l,className:"react-colorful__last-control"}))},ze={defaultColor:"000",toHsva:ke,fromHsva:function(r){return Ce({h:r.h,s:r.s,v:r.v,a:1})},equal:Oe},Ie=function(r){return v.createElement(je,$({},r,{colorModel:ze}))},He=function(r){var o=r.className,s=r.hsva,h=r.onChange,u={backgroundImage:"linear-gradient(90deg, "+H(Object.assign({},s,{a:0}))+", "+H(Object.assign({},s,{a:1}))+")"},f=R(["react-colorful__alpha",o]),e=x(100*s.a);return v.createElement("div",{className:f},v.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),v.createElement(D,{onMove:function(a){h({a:a.left})},onKey:function(a){h({a:O(s.a+a.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},v.createElement(G,{className:"react-colorful__alpha-pointer",left:s.a,color:H(s)})))},ie=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=F(r,["className","colorModel","color","onChange"]),a=y.useRef(null);ue(a);var t=oe(s,u,f),n=t[0],l=t[1],i=R(["react-colorful",o]);return v.createElement("div",$({},e,{ref:a,className:i}),v.createElement(ne,{hsva:n,onChange:l}),v.createElement(te,{hue:n.h,onChange:l}),v.createElement(He,{hsva:n,onChange:l,className:"react-colorful__last-control"}))},qe={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:Ee,fromHsva:H,equal:le},Le=function(r){return v.createElement(ie,$({},r,{colorModel:qe}))},Pe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:$e,fromHsva:function(r){var o=ee(r);return"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")"},equal:le},Te=function(r){return v.createElement(ie,$({},r,{colorModel:Pe}))},Be=C.div({position:"relative",maxWidth:250}),Ke=C.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Ve=C.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Xe=r=>`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${r?"white":"black"}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,se=C(J)(({value:r,selected:o,theme:s})=>({width:16,height:16,boxShadow:o?`${s.appBorderColor} 0 0 0 1px inset, ${s.textMutedColor}50 0 0 0 4px`:`${s.appBorderColor} 0 0 0 1px inset`,border:"none",borderRadius:s.appBorderRadius,"&, &:hover":{background:"unset",backgroundColor:"unset",backgroundImage:`linear-gradient(${r}, ${r}), ${Xe(s.base==="dark")}`}})),Fe=C(be.Input)(({theme:r})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:r.typography.fonts.base,'[aria-readonly="true"] > &':{background:r.base==="light"?r.color.lighter:"transparent"}})),De=C(se)(({disabled:r})=>({position:"absolute",top:4,left:4,zIndex:1,cursor:r?"not-allowed":"pointer"})),Ge=C(J)(({theme:r})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:r.input.color})),ce=(r=>(r.RGB="rgb",r.HSL="hsl",r.HEX="hex",r))(ce||{}),P=Object.values(ce),Ae=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,We=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ue=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,X=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Ye=/^\s*#?([0-9a-f]{3})\s*$/i,Je={hex:Ie,rgb:Te,hsl:Le},I={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},he=r=>{let o=r?.match(Ae);if(!o)return[0,0,0,1];let[,s,h,u,f=1]=o;return[s,h,u,f].map(Number)},Qe=r=>{let[o,s,h,u]=he(r),[f,e,a]=k.default.rgb.hsl([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:k.default.rgb.keyword([o,s,h]),colorSpace:"rgb",rgb:r,hsl:`hsla(${f}, ${e}%, ${a}%, ${u})`,hex:`#${k.default.rgb.hex([o,s,h]).toLowerCase()}`}},Ze=r=>{let[o,s,h,u]=he(r),[f,e,a]=k.default.hsl.rgb([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:k.default.hsl.keyword([o,s,h]),colorSpace:"hsl",rgb:`rgba(${f}, ${e}, ${a}, ${u})`,hsl:r,hex:`#${k.default.hsl.hex([o,s,h]).toLowerCase()}`}},er=r=>{let o=r.replace("#",""),s=k.default.keyword.rgb(o)||k.default.hex.rgb(o),h=k.default.rgb.hsl(s),u=r;/[^#a-f0-9]/i.test(r)?u=o:X.test(r)&&(u=`#${o}`);let f=!0;if(u.startsWith("#"))f=X.test(u);else try{k.default.keyword.hex(u)}catch{f=!1}return{valid:f,value:u,keyword:k.default.rgb.keyword(s),colorSpace:"hex",rgb:`rgba(${s[0]}, ${s[1]}, ${s[2]}, 1)`,hsl:`hsla(${h[0]}, ${h[1]}%, ${h[2]}%, 1)`,hex:u}},N=r=>{if(r)return We.test(r)?Qe(r):Ue.test(r)?Ze(r):er(r)},rr=(r,o,s)=>{if(!r||!o?.valid)return I[s];if(s!=="hex")return o?.[s]||I[s];if(!o.hex.startsWith("#"))try{return`#${k.default.keyword.hex(o.hex)}`}catch{return I.hex}let h=o.hex.match(Ye);if(!h)return X.test(o.hex)?o.hex:I.hex;let[u,f,e]=h[1].split("");return`#${u}${u}${f}${f}${e}${e}`},tr=(r,o)=>{let[s,h]=y.useState(r||""),[u,f]=y.useState(()=>N(s)),[e,a]=y.useState(u?.colorSpace||"hex");y.useEffect(()=>{let i=r||"",c=N(i);h(i),f(c),a(c?.colorSpace||"hex")},[r]);let t=y.useMemo(()=>rr(s,u,e).toLowerCase(),[s,u,e]),n=y.useCallback(i=>{let c=N(i),d=c?.value||i||"";h(d),d===""&&(f(void 0),o(void 0)),c&&(f(c),a(c.colorSpace),o(c.value))},[o]),l=y.useCallback(()=>{let i=(P.indexOf(e)+1)%P.length,c=P[i];a(c);let d=u?.[c]||"";h(d),o(d)},[u,e,o]);return{value:s,realValue:t,updateValue:n,color:u,colorSpace:e,cycleColorSpace:l}},q=r=>r.replace(/\s*/,"").toLowerCase(),nr=(r,o,s,h=27)=>{let[u,f]=y.useState(o?.valid?[o]:[]);y.useEffect(()=>{o===void 0&&f([])},[o]);let e=y.useMemo(()=>{let t=(r||[]).map(l=>typeof l=="string"?N(l):l.title?{...N(l.color),keyword:l.title}:N(l.color)).concat(u).filter(Boolean);if(h===0||h===1/0)return t;let n=Number.isInteger(h)&&h>0?h:27;return t.slice(-n)},[r,u,h]),a=y.useCallback(t=>{t?.valid&&(e.some(n=>n&&n[s]&&q(n[s]||"")===q(t[s]||""))||f(n=>n.concat(t)))},[s,e]);return{presets:e,addPreset:a}},ar=({name:r,storyId:o,value:s,onChange:h,onFocus:u,onBlur:f,presetColors:e,maxPresetColors:a,startOpen:t=!1,argType:n})=>{let l=y.useCallback(xe(h,200),[h]),{value:i,realValue:c,updateValue:d,color:g,colorSpace:b,cycleColorSpace:m}=tr(s,l),{presets:p,addPreset:_}=nr(e??[],g,b,a),E=Je[b],M=!!n?.table?.readonly,j=de(r,o);return v.createElement(Be,null,v.createElement("label",{htmlFor:j,className:"sb-sr-only"},r),v.createElement(Fe,{id:j,value:i,onChange:w=>d(w.target.value),onFocus:w=>w.target.select(),readOnly:M,placeholder:"Choose color..."}),v.createElement(fe,{ariaLabel:"Color picker",defaultVisible:t,visible:M?!1:void 0,onVisibleChange:()=>g&&_(g),popover:v.createElement(Ke,null,v.createElement(E,{color:c==="transparent"?"#000000":c,onChange:d,onFocus:u,onBlur:f}),p.length>0&&v.createElement(Ve,null,p.map((w,A)=>v.createElement(se,{key:`${w?.value||A}-${A}`,variant:"ghost",padding:"small",size:"small",ariaLabel:"Pick this color",tooltip:w?.keyword||w?.value||"",value:w?.value||"",selected:!!(g&&w&&w[b]&&q(w[b]||"")===q(g[b])),onClick:()=>w&&d(w.value||"")}))))},v.createElement(De,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Open color picker",value:c,style:{margin:4},disabled:M})),i?v.createElement(Ge,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Cycle through color spaces",disabled:M,onClick:M?void 0:m},v.createElement(ge,null)):null)},sr=ar;export{ar as ColorControl,sr as default};

package/storybook-static/assets/ColorPicker.stories-Dc7-AuPQ.js

@@ -0,0 +1 @@
+import{b as r,aC as o,R as e,z as n,aI as c}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const d={title:"Components/Form/ColorPicker",component:r,tags:["autodocs","form"],argTypes:{variant:{control:{type:"select"},options:[void 0,"pill"]},value:{control:{type:"color"}}}},m=c("div",{display:"flex",flexDirection:"column",gap:"2rem",padding:"1rem"}),i=c("div",{display:"flex",gap:"1rem",alignItems:"center",flexWrap:"wrap"}),v={render:()=>{const[a,l]=o.useState("#3ec234");return e.createElement(n,{vertical:!0,horizontal:!0},e.createElement(i,null,e.createElement(r,{value:a,name:"basic-color",onChange:t=>{l(t.target.value)}}),e.createElement("span",null,"Selected: ",a)))}},p={render:()=>{const[a,l]=o.useState("#008ad2");return e.createElement(n,{vertical:!0,horizontal:!0},e.createElement("div",{style:{width:"200px"}},e.createElement(r,{value:a,name:"pill-color",onChange:t=>{l(t.target.value)},variant:"pill",label:"Choose Color"})),e.createElement("p",null,"Selected: ",a))}},g={render:()=>{const[a,l]=o.useState("#d2f39f");return e.createElement(m,null,e.createElement(n,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Different States"),e.createElement(i,null,e.createElement(r,{value:a,name:"normal",onChange:t=>{l(t.target.value)}}),e.createElement(r,{value:a,name:"disabled",onChange:t=>{l(t.target.value)},disabled:!0}),e.createElement(r,{value:a,name:"readonly",onChange:t=>{l(t.target.value)},readOnly:!0}),e.createElement(r,{value:a,name:"error",onChange:t=>{l(t.target.value)},error:!0}))),e.createElement(n,{vertical:!0,horizontal:!0},e.createElement("h3",null,"Pill States"),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"1rem",maxWidth:"200px"}},e.createElement(r,{value:a,name:"pill-normal",onChange:t=>{l(t.target.value)},variant:"pill",label:"Normal"}),e.createElement(r,{value:a,name:"pill-disabled",onChange:t=>{l(t.target.value)},variant:"pill",label:"Disabled",disabled:!0}),e.createElement(r,{value:a,name:"pill-readOnly",onChange:t=>{l(t.target.value)},variant:"pill",label:"Read only",readOnly:!0}),e.createElement(r,{value:a,name:"pill-error",onChange:t=>{l(t.target.value)},variant:"pill",label:"With Error",error:!0}))))}},E=["Basic","PillVariant","States"];export{v as Basic,p as PillVariant,g as States,E as __namedExportsOrder,d as default};

package/storybook-static/assets/CoveringLoader.stories-DrUQAhI6.js

@@ -0,0 +1 @@
+import{c as t,R as e}from"./iframe-DvhcA1iZ.js";import"./preload-helper-PPVm8Dsz.js";const l={title:"Components/UI/Loader/CoveringLoader",component:t,tags:["autodocs","ui"],args:{show:!1,mode:"before"},argTypes:{show:{control:"boolean"},size:{control:{type:"text"}},mode:{options:["before","after","over"],control:{type:"select"}},inertMode:{options:["block-interaction","cover-element","pass-through"],control:{type:"select"}}}},i={args:{},render:r=>{const n=o=>{console.info("ref of CoveringLoader:",o)},s=o=>{console.info("children div of CoveringLoader:",o)};return e.createElement("div",{className:"parent",style:{background:"red"}},e.createElement(t,{...r,ref:n},e.createElement("div",{style:{background:"#f0f0f0"},ref:s},"some contents",e.createElement("br",null),"some contents Lorem ipsum etc Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quibusdam. some contents",e.createElement("br",null),"some contents",e.createElement("br",null),"some contents",e.createElement("br",null))))}},m=["Primary"];export{i as Primary,m as __namedExportsOrder,l as default};