@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/shadcn/components/ui/alert-dialog.stories.js

@@ -1,39 +1,289 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
 import { Button } from "./button.js";
+function AlertDialogWrapper({ variant = "default", buttons = 1, scrollableContent = false }) {
+    const actionProps = variant === "danger" ? {
+        danger: true
+    } : {};
+    const longContent = /*#__PURE__*/ _jsx(_Fragment, {
+        children: Array.from({
+            length: 20
+        }, (_, i)=>// biome-ignore lint/suspicious/noArrayIndexKey: static content
+            /*#__PURE__*/ _jsxs("p", {
+                children: [
+                    i + 1,
+                    ". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+                ]
+            }, i))
+    });
+    return /*#__PURE__*/ _jsxs(AlertDialog, {
+        defaultOpen: true,
+        children: [
+            /*#__PURE__*/ _jsx(AlertDialogTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "secondary",
+                    children: "Show Dialog"
+                })
+            }),
+            /*#__PURE__*/ _jsxs(AlertDialogContent, {
+                className: scrollableContent ? "h-[calc(100vh-44px)] flex flex-col" : undefined,
+                children: [
+                    /*#__PURE__*/ _jsx(AlertDialogHeader, {
+                        children: /*#__PURE__*/ _jsx(AlertDialogTitle, {
+                            children: "Dialog Title"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDialogDescription, {
+                        className: scrollableContent ? "flex-1 overflow-y-auto" : undefined,
+                        children: scrollableContent ? /*#__PURE__*/ _jsx("div", {
+                            className: "space-y-4",
+                            children: longContent
+                        }) : "This is a dialog description. It provides context about the action."
+                    }),
+                    /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                        children: [
+                            /*#__PURE__*/ _jsx(AlertDialogCancel, {
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-3",
+                                children: [
+                                    buttons === 2 && /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                        variant: "secondary",
+                                        ...actionProps,
+                                        children: "Secondary"
+                                    }),
+                                    /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                        ...actionProps,
+                                        children: variant === "danger" ? "Delete" : "Confirm"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
 const meta = {
-    title: "Component/Alert dialog"
+    title: "Component/Alert dialog",
+    component: AlertDialogWrapper,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "default",
+                "danger"
+            ]
+        },
+        buttons: {
+            control: "select",
+            options: [
+                1,
+                2
+            ]
+        },
+        scrollableContent: {
+            control: "boolean"
+        }
+    },
+    args: {
+        variant: "default",
+        buttons: 1,
+        scrollableContent: false
+    }
 };
 export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ variant = "default", buttons = 1, scrollableContent = false })=>/*#__PURE__*/ _jsx(AlertDialogWrapper, {
+            variant: variant,
+            buttons: buttons,
+            scrollableContent: scrollableContent
+        })
+};
 export const Demo = {
-    render: ()=>/*#__PURE__*/ _jsxs(AlertDialog, {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-wrap gap-4",
             children: [
-                /*#__PURE__*/ _jsx(AlertDialogTrigger, {
-                    asChild: true,
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        variant: "secondary",
-                        children: "Show Dialog"
-                    })
+                /*#__PURE__*/ _jsxs(AlertDialog, {
+                    children: [
+                        /*#__PURE__*/ _jsx(AlertDialogTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                children: "Default"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(AlertDialogContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(AlertDialogHeader, {
+                                    children: /*#__PURE__*/ _jsx(AlertDialogTitle, {
+                                        children: "Confirm Action"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(AlertDialogDescription, {
+                                    children: "Are you sure you want to continue?"
+                                }),
+                                /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AlertDialogCancel, {
+                                            children: "Cancel"
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "flex gap-3",
+                                            children: /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                                children: "Confirm"
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(AlertDialog, {
+                    children: [
+                        /*#__PURE__*/ _jsx(AlertDialogTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                children: "Default (2 buttons)"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(AlertDialogContent, {
+                            children: [
+                                /*#__PURE__*/ _jsx(AlertDialogHeader, {
+                                    children: /*#__PURE__*/ _jsx(AlertDialogTitle, {
+                                        children: "Unsaved Changes"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(AlertDialogDescription, {
+                                    children: "You have unsaved changes. Do you want to save before leaving?"
+                                }),
+                                /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AlertDialogCancel, {
+                                            children: "Cancel"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex gap-3",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                                    variant: "secondary",
+                                                    children: "Don't Save"
+                                                }),
+                                                /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                                    children: "Save"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
                 }),
-                /*#__PURE__*/ _jsxs(AlertDialogContent, {
+                /*#__PURE__*/ _jsxs(AlertDialog, {
                     children: [
-                        /*#__PURE__*/ _jsxs(AlertDialogHeader, {
+                        /*#__PURE__*/ _jsx(AlertDialogTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                children: "Danger"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(AlertDialogContent, {
                             children: [
-                                /*#__PURE__*/ _jsx(AlertDialogTitle, {
-                                    children: "Are you absolutely sure?"
+                                /*#__PURE__*/ _jsx(AlertDialogHeader, {
+                                    children: /*#__PURE__*/ _jsx(AlertDialogTitle, {
+                                        children: "Delete Account"
+                                    })
                                 }),
                                 /*#__PURE__*/ _jsx(AlertDialogDescription, {
-                                    children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers."
+                                    children: "This action cannot be undone. All your data will be permanently deleted."
+                                }),
+                                /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AlertDialogCancel, {
+                                            children: "Cancel"
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "flex gap-3",
+                                            children: /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                                danger: true,
+                                                children: "Delete"
+                                            })
+                                        })
+                                    ]
                                 })
                             ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(AlertDialog, {
+                    children: [
+                        /*#__PURE__*/ _jsx(AlertDialogTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                children: "Scrollable Content"
+                            })
                         }),
-                        /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                        /*#__PURE__*/ _jsxs(AlertDialogContent, {
+                            className: "h-[calc(100vh-44px)] flex flex-col",
                             children: [
-                                /*#__PURE__*/ _jsx(AlertDialogCancel, {
-                                    children: "Cancel"
+                                /*#__PURE__*/ _jsx(AlertDialogHeader, {
+                                    children: /*#__PURE__*/ _jsx(AlertDialogTitle, {
+                                        children: "Terms and Conditions"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(AlertDialogDescription, {
+                                    className: "flex-1 overflow-y-auto",
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        className: "space-y-4",
+                                        children: Array.from({
+                                            length: 20
+                                        }, (_, i)=>// biome-ignore lint/suspicious/noArrayIndexKey: static content
+                                            /*#__PURE__*/ _jsxs("p", {
+                                                children: [
+                                                    i + 1,
+                                                    ". Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+                                                ]
+                                            }, i))
+                                    })
                                 }),
-                                /*#__PURE__*/ _jsx(AlertDialogAction, {
-                                    children: "Continue"
+                                /*#__PURE__*/ _jsxs(AlertDialogFooter, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(AlertDialogCancel, {
+                                            children: "Cancel"
+                                        }),
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: "flex gap-3",
+                                            children: /*#__PURE__*/ _jsx(AlertDialogAction, {
+                                                children: "Accept"
+                                            })
+                                        })
+                                    ]
                                 })
                             ]
                         })

package/dist/src/shadcn/components/ui/alert-dialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/alert-dialog.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"#shadcn/components/ui/alert-dialog\";\nimport { Button } from \"#shadcn/components/ui/button\";\n\nconst meta = {\n\ttitle: \"Component/Alert dialog\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<AlertDialog>\n\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t<Button variant=\"secondary\">Show Dialog</Button>\n\t\t\t</AlertDialogTrigger>\n\t\t\t<AlertDialogContent>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>\n\t\t\t\t\t\tThis action cannot be undone. This will permanently delete your\n\t\t\t\t\t\taccount and remove your data from our servers.\n\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t<AlertDialogAction>Continue</AlertDialogAction>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t),\n} satisfies Story;\n"],"names":["AlertDialog","AlertDialogAction","AlertDialogCancel","AlertDialogContent","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogTitle","AlertDialogTrigger","Button","meta","title","Demo","render","asChild","variant"],"mappings":";AACA,SACCA,WAAW,EACXC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,iBAAiB,EACjBC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,QACZ,oBAAqC;AAC5C,SAASC,MAAM,QAAQ,cAA+B;AAEtD,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,MAACb;;8BACA,KAACQ;oBAAmBM,OAAO;8BAC1B,cAAA,KAACL;wBAAOM,SAAQ;kCAAY;;;8BAE7B,MAACZ;;sCACA,MAACG;;8CACA,KAACC;8CAAiB;;8CAClB,KAACH;8CAAuB;;;;sCAKzB,MAACC;;8CACA,KAACH;8CAAkB;;8CACnB,KAACD;8CAAkB;;;;;;;;AAKxB,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/alert-dialog.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tAlertDialog,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"#shadcn/components/ui/alert-dialog\";\nimport { Button } from \"#shadcn/components/ui/button\";\n\ninterface AlertDialogWrapperProps {\n\tvariant?: \"default\" | \"danger\";\n\tbuttons?: 1 | 2;\n\tscrollableContent?: boolean;\n}\n\nfunction AlertDialogWrapper({\n\tvariant = \"default\",\n\tbuttons = 1,\n\tscrollableContent = false,\n}: AlertDialogWrapperProps) {\n\tconst actionProps = variant === \"danger\" ? { danger: true } : {};\n\n\tconst longContent = (\n\t\t<>\n\t\t\t{Array.from({ length: 20 }, (_, i) => (\n\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: static content\n\t\t\t\t<p key={i}>\n\t\t\t\t\t{i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n\t\t\t\t\tad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n\t\t\t\t\taliquip ex ea commodo consequat. Duis aute irure dolor in\n\t\t\t\t\treprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n\t\t\t\t\tpariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n\t\t\t\t\tculpa qui officia deserunt mollit anim id est laborum.\n\t\t\t\t</p>\n\t\t\t))}\n\t\t</>\n\t);\n\n\treturn (\n\t\t<AlertDialog defaultOpen>\n\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t<Button variant=\"secondary\">Show Dialog</Button>\n\t\t\t</AlertDialogTrigger>\n\t\t\t<AlertDialogContent\n\t\t\t\tclassName={\n\t\t\t\t\tscrollableContent ? \"h-[calc(100vh-44px)] flex flex-col\" : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>Dialog Title</AlertDialogTitle>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogDescription\n\t\t\t\t\tclassName={scrollableContent ? \"flex-1 overflow-y-auto\" : undefined}\n\t\t\t\t>\n\t\t\t\t\t{scrollableContent ? (\n\t\t\t\t\t\t<div className=\"space-y-4\">{longContent}</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t\"This is a dialog description. It provides context about the action.\"\n\t\t\t\t\t)}\n\t\t\t\t</AlertDialogDescription>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t{buttons === 2 && (\n\t\t\t\t\t\t\t<AlertDialogAction variant=\"secondary\" {...actionProps}>\n\t\t\t\t\t\t\t\tSecondary\n\t\t\t\t\t\t\t</AlertDialogAction>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<AlertDialogAction {...actionProps}>\n\t\t\t\t\t\t\t{variant === \"danger\" ? \"Delete\" : \"Confirm\"}\n\t\t\t\t\t\t</AlertDialogAction>\n\t\t\t\t\t</div>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Alert dialog\",\n\tcomponent: AlertDialogWrapper,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tvariant: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"default\", \"danger\"],\n\t\t},\n\t\tbuttons: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [1, 2],\n\t\t},\n\t\tscrollableContent: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t},\n\targs: {\n\t\tvariant: \"default\",\n\t\tbuttons: 1,\n\t\tscrollableContent: false,\n\t},\n} satisfies Meta<typeof AlertDialogWrapper>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({ variant = \"default\", buttons = 1, scrollableContent = false }) => (\n\t\t<AlertDialogWrapper\n\t\t\tvariant={variant}\n\t\t\tbuttons={buttons}\n\t\t\tscrollableContent={scrollableContent}\n\t\t/>\n\t),\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t<AlertDialog>\n\t\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\">Default</Button>\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t\t<AlertDialogContent>\n\t\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t\t<AlertDialogTitle>Confirm Action</AlertDialogTitle>\n\t\t\t\t\t</AlertDialogHeader>\n\t\t\t\t\t<AlertDialogDescription>\n\t\t\t\t\t\tAre you sure you want to continue?\n\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<AlertDialogAction>Confirm</AlertDialogAction>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AlertDialogFooter>\n\t\t\t\t</AlertDialogContent>\n\t\t\t</AlertDialog>\n\n\t\t\t<AlertDialog>\n\t\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\">Default (2 buttons)</Button>\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t\t<AlertDialogContent>\n\t\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t\t<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>\n\t\t\t\t\t</AlertDialogHeader>\n\t\t\t\t\t<AlertDialogDescription>\n\t\t\t\t\t\tYou have unsaved changes. Do you want to save before leaving?\n\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<AlertDialogAction variant=\"secondary\">\n\t\t\t\t\t\t\t\tDon&apos;t Save\n\t\t\t\t\t\t\t</AlertDialogAction>\n\t\t\t\t\t\t\t<AlertDialogAction>Save</AlertDialogAction>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AlertDialogFooter>\n\t\t\t\t</AlertDialogContent>\n\t\t\t</AlertDialog>\n\n\t\t\t<AlertDialog>\n\t\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\">Danger</Button>\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t\t<AlertDialogContent>\n\t\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t\t<AlertDialogTitle>Delete Account</AlertDialogTitle>\n\t\t\t\t\t</AlertDialogHeader>\n\t\t\t\t\t<AlertDialogDescription>\n\t\t\t\t\t\tThis action cannot be undone. All your data will be permanently\n\t\t\t\t\t\tdeleted.\n\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<AlertDialogAction danger>Delete</AlertDialogAction>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AlertDialogFooter>\n\t\t\t\t</AlertDialogContent>\n\t\t\t</AlertDialog>\n\n\t\t\t<AlertDialog>\n\t\t\t\t<AlertDialogTrigger asChild>\n\t\t\t\t\t<Button variant=\"secondary\">Scrollable Content</Button>\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t\t<AlertDialogContent className=\"h-[calc(100vh-44px)] flex flex-col\">\n\t\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t\t<AlertDialogTitle>Terms and Conditions</AlertDialogTitle>\n\t\t\t\t\t</AlertDialogHeader>\n\t\t\t\t\t<AlertDialogDescription className=\"flex-1 overflow-y-auto\">\n\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t{Array.from({ length: 20 }, (_, i) => (\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: static content\n\t\t\t\t\t\t\t\t<p key={i}>\n\t\t\t\t\t\t\t\t\t{i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing\n\t\t\t\t\t\t\t\t\telit. Sed do eiusmod tempor incididunt ut labore et dolore\n\t\t\t\t\t\t\t\t\tmagna aliqua. Ut enim ad minim veniam, quis nostrud\n\t\t\t\t\t\t\t\t\texercitation ullamco laboris nisi ut aliquip ex ea commodo\n\t\t\t\t\t\t\t\t\tconsequat. Duis aute irure dolor in reprehenderit in voluptate\n\t\t\t\t\t\t\t\t\tvelit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n\t\t\t\t\t\t\t\t\tsint occaecat cupidatat non proident, sunt in culpa qui\n\t\t\t\t\t\t\t\t\tofficia deserunt mollit anim id est laborum.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AlertDialogDescription>\n\t\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<AlertDialogAction>Accept</AlertDialogAction>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</AlertDialogFooter>\n\t\t\t\t</AlertDialogContent>\n\t\t\t</AlertDialog>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","AlertDialog","AlertDialogAction","AlertDialogCancel","AlertDialogContent","AlertDialogDescription","AlertDialogFooter","AlertDialogHeader","AlertDialogTitle","AlertDialogTrigger","Button","AlertDialogWrapper","variant","buttons","scrollableContent","actionProps","danger","longContent","Array","from","length","_","i","p","defaultOpen","asChild","className","undefined","div","meta","title","component","parameters","docs","page","argTypes","control","options","args","Default","tags","render","Demo"],"mappings":"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"}

package/dist/src/shadcn/components/ui/alert.d.ts

@@ -1,9 +1,32 @@
-import { type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+declare const variantStyles: {
+    readonly critical: {
+        readonly default: string;
+        readonly vivid: string;
+    };
+    readonly warning: {
+        readonly default: string;
+        readonly vivid: string;
+    };
+    readonly info: {
+        readonly default: string;
+        readonly vivid: string;
+    };
+    readonly neutral: {
+        readonly default: string;
+        readonly vivid: string;
+    };
+    readonly success: {
+        readonly default: string;
+        readonly vivid: string;
+    };
+};
+type AlertVariant = keyof typeof variantStyles;
+declare function Alert({ className, variant, vivid, icon, children, ...props }: React.ComponentProps<"div"> & {
+    variant?: AlertVariant | undefined;
+    vivid?: boolean | undefined;
+    icon?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Alert, AlertTitle, AlertDescription };

package/dist/src/shadcn/components/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACd,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CASlE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;CA6DT,CAAC;AAEX,KAAK,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAE/C,iBAAS,KAAK,CAAC,EACd,SAAS,EACT,OAAgB,EAChB,KAAa,EACb,IAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAChC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC3B,2CA8BA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,iBAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/alert.js

@@ -1,38 +1,69 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
-    variants: {
-        variant: {
-            default: "bg-card text-card-foreground",
-            destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
-        }
+const baseAlertStyles = cn(// Layout
+"relative", "w-full", "flex", "items-start", "gap-[var(--spacing-x1,8px)]", // Shape
+"rounded-[var(--corner-corner-m,6px)]", // Spacing
+"p-[var(--spacing-x2,16px)]", // Typography
+"typo-body", // SVG styles
+"[&>svg]:size-5", "[&>svg]:shrink-0");
+const alertContentStyles = cn(// Layout
+"flex", "flex-col", "gap-[var(--spacing-x1,8px)]", "flex-1", "min-w-0");
+const variantStyles = {
+    critical: {
+        default: cn("bg-bg-error-primary", "text-text-error-primary", "[&>svg]:text-fg-error-primary"),
+        vivid: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand", "[&>svg]:text-fg-primary_on-brand")
     },
-    defaultVariants: {
-        variant: "default"
+    warning: {
+        default: cn("bg-bg-warning-primary", "text-text-warning-primary", "[&>svg]:text-fg-warning-primary"),
+        vivid: cn("bg-bg-warning-primary_inverse", "text-text-warning-primary", "[&>svg]:text-fg-warning-primary")
+    },
+    info: {
+        default: cn("bg-bg-info-primary", "text-text-info-primary", "[&>svg]:text-fg-info-primary"),
+        vivid: cn("bg-bg-info-primary_inverse", "text-text-primary_on-brand", "[&>svg]:text-fg-primary_on-brand")
+    },
+    neutral: {
+        default: cn("bg-bg-neutral-primary", "text-text-primary", "[&>svg]:text-fg-neutral-primary"),
+        vivid: cn("bg-bg-neutral-primary_inverse", "text-text-primary_on-brand", "[&>svg]:text-fg-primary_on-brand")
+    },
+    success: {
+        default: cn("bg-bg-success-secondary", "text-text-primary", "[&>svg]:text-fg-success-primary"),
+        vivid: cn("bg-bg-success-primary_inverse", "text-text-primary_on-brand", "[&>svg]:text-fg-primary_on-brand")
     }
-});
-function Alert({ className, variant, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
+};
+function Alert({ className, variant = "info", vivid = false, icon = true, children, ...props }) {
+    const childrenArray = React.Children.toArray(children);
+    // Find first child that is not AlertTitle or AlertDescription (assumed to be icon)
+    const iconIndex = childrenArray.findIndex((child)=>/*#__PURE__*/ React.isValidElement(child) && child.type !== AlertTitle && child.type !== AlertDescription);
+    const hasIcon = icon && iconIndex !== -1;
+    const iconElement = hasIcon ? childrenArray[iconIndex] : null;
+    const content = hasIcon ? childrenArray.filter((_, index)=>index !== iconIndex) : childrenArray;
+    const variantStyle = variantStyles[variant][vivid ? "vivid" : "default"];
+    return /*#__PURE__*/ _jsxs("div", {
         "data-slot": "alert",
         role: "alert",
-        className: cn(alertVariants({
-            variant
-        }), className),
-        ...props
+        className: cn(baseAlertStyles, variantStyle, className),
+        ...props,
+        children: [
+            iconElement,
+            /*#__PURE__*/ _jsx("div", {
+                className: alertContentStyles,
+                children: content
+            })
+        ]
     });
 }
 function AlertTitle({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
         "data-slot": "alert-title",
-        className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+        className: cn("typo-body", "font-medium", className),
         ...props
     });
 }
 function AlertDescription({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
         "data-slot": "alert-description",
-        className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className),
+        className: cn("typo-body", className),
         ...props
     });
 }

package/dist/src/shadcn/components/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst alertVariants = cva(\n\t\"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-card text-card-foreground\",\n\t\t\t\tdestructive:\n\t\t\t\t\t\"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t},\n\t},\n);\n\nfunction Alert({\n\tclassName,\n\tvariant,\n\t...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert\"\n\t\t\trole=\"alert\"\n\t\t\tclassName={cn(alertVariants({ variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-title\"\n\t\t\tclassName={cn(\n\t\t\t\t\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDescription({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-description\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n"],"names":["cva","cn","alertVariants","variants","variant","default","destructive","defaultVariants","Alert","className","props","div","data-slot","role","AlertTitle","AlertDescription"],"mappings":";AAAA,SAASA,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,gBAAgBF,IACrB,qOACA;IACCG,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,aACC;QACF;IACD;IACAC,iBAAiB;QAChBH,SAAS;IACV;AACD;AAGD,SAASI,MAAM,EACdC,SAAS,EACTL,OAAO,EACP,GAAGM,OAC+D;IAClE,qBACC,KAACC;QACAC,aAAU;QACVC,MAAK;QACLJ,WAAWR,GAAGC,cAAc;YAAEE;QAAQ,IAAIK;QACzC,GAAGC,KAAK;;AAGZ;AAEA,SAASI,WAAW,EAAEL,SAAS,EAAE,GAAGC,OAAoC;IACvE,qBACC,KAACC;QACAC,aAAU;QACVH,WAAWR,GACV,+DACAQ;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASK,iBAAiB,EACzBN,SAAS,EACT,GAAGC,OAC0B;IAC7B,qBACC,KAACC;QACAC,aAAU;QACVH,WAAWR,GACV,kGACAQ;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASF,KAAK,EAAEM,UAAU,EAAEC,gBAAgB,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/alert.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst baseAlertStyles = cn(\n\t// Layout\n\t\"relative\",\n\t\"w-full\",\n\t\"flex\",\n\t\"items-start\",\n\t\"gap-[var(--spacing-x1,8px)]\",\n\t// Shape\n\t\"rounded-[var(--corner-corner-m,6px)]\",\n\t// Spacing\n\t\"p-[var(--spacing-x2,16px)]\",\n\t// Typography\n\t\"typo-body\",\n\t// SVG styles\n\t\"[&>svg]:size-5\",\n\t\"[&>svg]:shrink-0\",\n);\n\nconst alertContentStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"flex-col\",\n\t\"gap-[var(--spacing-x1,8px)]\",\n\t\"flex-1\",\n\t\"min-w-0\",\n);\n\nconst variantStyles = {\n\tcritical: {\n\t\tdefault: cn(\n\t\t\t\"bg-bg-error-primary\",\n\t\t\t\"text-text-error-primary\",\n\t\t\t\"[&>svg]:text-fg-error-primary\",\n\t\t),\n\t\tvivid: cn(\n\t\t\t\"bg-bg-error-primary_inverse\",\n\t\t\t\"text-text-primary_on-brand\",\n\t\t\t\"[&>svg]:text-fg-primary_on-brand\",\n\t\t),\n\t},\n\twarning: {\n\t\tdefault: cn(\n\t\t\t\"bg-bg-warning-primary\",\n\t\t\t\"text-text-warning-primary\",\n\t\t\t\"[&>svg]:text-fg-warning-primary\",\n\t\t),\n\t\tvivid: cn(\n\t\t\t\"bg-bg-warning-primary_inverse\",\n\t\t\t\"text-text-warning-primary\",\n\t\t\t\"[&>svg]:text-fg-warning-primary\",\n\t\t),\n\t},\n\tinfo: {\n\t\tdefault: cn(\n\t\t\t\"bg-bg-info-primary\",\n\t\t\t\"text-text-info-primary\",\n\t\t\t\"[&>svg]:text-fg-info-primary\",\n\t\t),\n\t\tvivid: cn(\n\t\t\t\"bg-bg-info-primary_inverse\",\n\t\t\t\"text-text-primary_on-brand\",\n\t\t\t\"[&>svg]:text-fg-primary_on-brand\",\n\t\t),\n\t},\n\tneutral: {\n\t\tdefault: cn(\n\t\t\t\"bg-bg-neutral-primary\",\n\t\t\t\"text-text-primary\",\n\t\t\t\"[&>svg]:text-fg-neutral-primary\",\n\t\t),\n\t\tvivid: cn(\n\t\t\t\"bg-bg-neutral-primary_inverse\",\n\t\t\t\"text-text-primary_on-brand\",\n\t\t\t\"[&>svg]:text-fg-primary_on-brand\",\n\t\t),\n\t},\n\tsuccess: {\n\t\tdefault: cn(\n\t\t\t\"bg-bg-success-secondary\",\n\t\t\t\"text-text-primary\",\n\t\t\t\"[&>svg]:text-fg-success-primary\",\n\t\t),\n\t\tvivid: cn(\n\t\t\t\"bg-bg-success-primary_inverse\",\n\t\t\t\"text-text-primary_on-brand\",\n\t\t\t\"[&>svg]:text-fg-primary_on-brand\",\n\t\t),\n\t},\n} as const;\n\ntype AlertVariant = keyof typeof variantStyles;\n\nfunction Alert({\n\tclassName,\n\tvariant = \"info\",\n\tvivid = false,\n\ticon = true,\n\tchildren,\n\t...props\n}: React.ComponentProps<\"div\"> & {\n\tvariant?: AlertVariant | undefined;\n\tvivid?: boolean | undefined;\n\ticon?: boolean | undefined;\n}) {\n\tconst childrenArray = React.Children.toArray(children);\n\n\t// Find first child that is not AlertTitle or AlertDescription (assumed to be icon)\n\tconst iconIndex = childrenArray.findIndex(\n\t\t(child) =>\n\t\t\tReact.isValidElement(child) &&\n\t\t\tchild.type !== AlertTitle &&\n\t\t\tchild.type !== AlertDescription,\n\t);\n\n\tconst hasIcon = icon && iconIndex !== -1;\n\tconst iconElement = hasIcon ? childrenArray[iconIndex] : null;\n\tconst content = hasIcon\n\t\t? childrenArray.filter((_, index) => index !== iconIndex)\n\t\t: childrenArray;\n\n\tconst variantStyle = variantStyles[variant][vivid ? \"vivid\" : \"default\"];\n\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert\"\n\t\t\trole=\"alert\"\n\t\t\tclassName={cn(baseAlertStyles, variantStyle, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement}\n\t\t\t<div className={alertContentStyles}>{content}</div>\n\t\t</div>\n\t);\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-title\"\n\t\t\tclassName={cn(\"typo-body\", \"font-medium\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDescription({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-description\"\n\t\t\tclassName={cn(\"typo-body\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Alert, AlertTitle, AlertDescription };\n"],"names":["React","cn","baseAlertStyles","alertContentStyles","variantStyles","critical","default","vivid","warning","info","neutral","success","Alert","className","variant","icon","children","props","childrenArray","Children","toArray","iconIndex","findIndex","child","isValidElement","type","AlertTitle","AlertDescription","hasIcon","iconElement","content","filter","_","index","variantStyle","div","data-slot","role"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,kBAAkBD,GACvB,SAAS;AACT,YACA,UACA,QACA,eACA,+BACA,QAAQ;AACR,wCACA,UAAU;AACV,8BACA,aAAa;AACb,aACA,aAAa;AACb,kBACA;AAGD,MAAME,qBAAqBF,GAC1B,SAAS;AACT,QACA,YACA,+BACA,UACA;AAGD,MAAMG,gBAAgB;IACrBC,UAAU;QACTC,SAASL,GACR,uBACA,2BACA;QAEDM,OAAON,GACN,+BACA,8BACA;IAEF;IACAO,SAAS;QACRF,SAASL,GACR,yBACA,6BACA;QAEDM,OAAON,GACN,iCACA,6BACA;IAEF;IACAQ,MAAM;QACLH,SAASL,GACR,sBACA,0BACA;QAEDM,OAAON,GACN,8BACA,8BACA;IAEF;IACAS,SAAS;QACRJ,SAASL,GACR,yBACA,qBACA;QAEDM,OAAON,GACN,iCACA,8BACA;IAEF;IACAU,SAAS;QACRL,SAASL,GACR,2BACA,qBACA;QAEDM,OAAON,GACN,iCACA,8BACA;IAEF;AACD;AAIA,SAASW,MAAM,EACdC,SAAS,EACTC,UAAU,MAAM,EAChBP,QAAQ,KAAK,EACbQ,OAAO,IAAI,EACXC,QAAQ,EACR,GAAGC,OAKH;IACA,MAAMC,gBAAgBlB,MAAMmB,QAAQ,CAACC,OAAO,CAACJ;IAE7C,mFAAmF;IACnF,MAAMK,YAAYH,cAAcI,SAAS,CACxC,CAACC,sBACAvB,MAAMwB,cAAc,CAACD,UACrBA,MAAME,IAAI,KAAKC,cACfH,MAAME,IAAI,KAAKE;IAGjB,MAAMC,UAAUb,QAAQM,cAAc,CAAC;IACvC,MAAMQ,cAAcD,UAAUV,aAAa,CAACG,UAAU,GAAG;IACzD,MAAMS,UAAUF,UACbV,cAAca,MAAM,CAAC,CAACC,GAAGC,QAAUA,UAAUZ,aAC7CH;IAEH,MAAMgB,eAAe9B,aAAa,CAACU,QAAQ,CAACP,QAAQ,UAAU,UAAU;IAExE,qBACC,MAAC4B;QACAC,aAAU;QACVC,MAAK;QACLxB,WAAWZ,GAAGC,iBAAiBgC,cAAcrB;QAC5C,GAAGI,KAAK;;YAERY;0BACD,KAACM;gBAAItB,WAAWV;0BAAqB2B;;;;AAGxC;AAEA,SAASJ,WAAW,EAAEb,SAAS,EAAE,GAAGI,OAAoC;IACvE,qBACC,KAACkB;QACAC,aAAU;QACVvB,WAAWZ,GAAG,aAAa,eAAeY;QACzC,GAAGI,KAAK;;AAGZ;AAEA,SAASU,iBAAiB,EACzBd,SAAS,EACT,GAAGI,OAC0B;IAC7B,qBACC,KAACkB;QACAC,aAAU;QACVvB,WAAWZ,GAAG,aAAaY;QAC1B,GAAGI,KAAK;;AAGZ;AAEA,SAASL,KAAK,EAAEc,UAAU,EAAEC,gBAAgB,GAAG"}