@jbpark/ui-kit 2.0.0 → 2.1.0

package/dist/{src-C3CveHCK.mjs → src-Da3Y-f7V.mjs}

@@ -1,25 +1,26 @@
-import { t as cn } from "./utils-DEenfsJ-.mjs";
-import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
+import { n as renderConditional, t as cn } from "./utils-CssUrKWE.mjs";
+import { t as Typography_default } from "./Typography-DJSakhLz.mjs";
 import { ArrowUp, Check, ChevronDown, CircleQuestionMark, CircleX, Info, Loader2, LoaderCircle, OctagonAlert, OctagonX, Search, Square, SquareCheck, X, XIcon } from "lucide-react";
 import * as React$1 from "react";
-import React, { Children, createElement, forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, { Children, createElement, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Drawer } from "vaul";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { useIntersectionObserver, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { useIntersectionObserver, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "motion/react";
 import { useResponsiveSize } from "@jbpark/use-hooks";
 import { useGSAP } from "@gsap/react";
-import { Drawer } from "vaul";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { v4 } from "uuid";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Autoplay, EffectCards, Navigation, Scrollbar } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -28,6 +29,61 @@ import "swiper/css/effect-cards";
 import "swiper/css/navigation";
 import "swiper/css/scrollbar";
 
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __exportAll = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+//#region src/core/accordion.tsx
+var accordion_exports = /* @__PURE__ */ __exportAll({
+	Accordion: () => Accordion$1,
+	AccordionContent: () => AccordionContent$1,
+	AccordionItem: () => AccordionItem$1,
+	AccordionTrigger: () => AccordionTrigger$1
+});
+const Accordion$1 = AccordionPrimitive.Root;
+const AccordionItem$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
+	ref,
+	className: cn("border-b", className),
+	...props
+}));
+AccordionItem$1.displayName = "AccordionItem";
+const AccordionTrigger$1 = React$1.forwardRef(({ expandIcon, className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
+	className: "flex",
+	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
+		ref,
+		className: cn(`flex flex-1 items-center justify-between py-4 text-left text-sm
+        font-medium transition-all hover:underline
+        [&[data-state=open]>svg]:rotate-180`, className),
+		...props,
+		children: [children, expandIcon || /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform\n            duration-200" })]
+	})
+}));
+AccordionTrigger$1.displayName = AccordionPrimitive.Trigger.displayName;
+const AccordionContent$1 = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
+	ref,
+	className: "data-[state=closed]:animate-accordion-up\n      data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		className: cn("pt-0 pb-4", className),
+		children
+	})
+}));
+AccordionContent$1.displayName = AccordionPrimitive.Content.displayName;
+
+//#endregion
 //#region src/core/button.tsx
 const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
 	variants: {
@@ -63,8 +119,363 @@ function Button$2({ className, variant, size, asChild = false, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/core/checkbox.tsx
+var checkbox_exports = /* @__PURE__ */ __exportAll({ Checkbox: () => Checkbox$1 });
+const Checkbox$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
+	ref,
+	className: cn(`peer border-primary focus-visible:ring-ring
+      data-[state=checked]:bg-primary
+      data-[state=checked]:text-primary-foreground grid h-4 w-4 shrink-0
+      place-content-center rounded-sm border shadow focus-visible:ring-1
+      focus-visible:outline-none disabled:cursor-not-allowed
+      disabled:opacity-50`, className),
+	...props,
+	children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
+		className: cn("grid place-content-center text-current"),
+		children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+	})
+}));
+Checkbox$1.displayName = CheckboxPrimitive.Root.displayName;
+
+//#endregion
+//#region src/core/dialog.tsx
+var dialog_exports = /* @__PURE__ */ __exportAll({
+	Dialog: () => Dialog$1,
+	DialogClose: () => DialogClose,
+	DialogContent: () => DialogContent$1,
+	DialogDescription: () => DialogDescription$1,
+	DialogFooter: () => DialogFooter$1,
+	DialogHeader: () => DialogHeader$1,
+	DialogOverlay: () => DialogOverlay,
+	DialogPortal: () => DialogPortal,
+	DialogTitle: () => DialogTitle$1,
+	DialogTrigger: () => DialogTrigger
+});
+function Dialog$1({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+		"data-slot": "dialog-portal",
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn(`data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
+        z-50 bg-black/50`, className),
+		...props
+	});
+}
+function DialogContent$1({ className, children, showCloseButton = true, classNames, closeIcon, closable, container, onCancel, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, {
+		"data-slot": "dialog-portal",
+		container,
+		children: [/* @__PURE__ */ jsx(DialogOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			"data-slot": "dialog-content",
+			className: cn(`bg-background data-[state=open]:animate-in
+          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid
+          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]
+          gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg`, className),
+			...props,
+			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+				"data-slot": "dialog-close",
+				className: "ring-offset-background focus:ring-ring\n              data-[state=open]:bg-accent\n              data-[state=open]:text-muted-foreground absolute top-4 right-4\n              rounded-xs opacity-70 transition-opacity hover:opacity-100\n              focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n              disabled:pointer-events-none [&_svg]:pointer-events-none\n              [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				disabled: typeof closable === "object" && closable.disabled,
+				onClick: onCancel,
+				children: [closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})]
+		})]
+	});
+}
+function DialogHeader$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function DialogFooter$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function DialogTitle$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-lg leading-none font-semibold", className),
+		...props
+	});
+}
+function DialogDescription$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/core/drawer.tsx
+var drawer_exports = /* @__PURE__ */ __exportAll({
+	Drawer: () => Drawer$2,
+	DrawerClose: () => DrawerClose,
+	DrawerContent: () => DrawerContent$1,
+	DrawerDescription: () => DrawerDescription$1,
+	DrawerFooter: () => DrawerFooter$1,
+	DrawerHeader: () => DrawerHeader$1,
+	DrawerOverlay: () => DrawerOverlay,
+	DrawerPortal: () => DrawerPortal,
+	DrawerTitle: () => DrawerTitle$1,
+	DrawerTrigger: () => DrawerTrigger
+});
+function Drawer$2({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		"data-slot": "drawer",
+		...props
+	});
+}
+function DrawerTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Overlay, {
+		"data-slot": "drawer-overlay",
+		className: cn(`data-[state=open]:animate-in data-[state=closed]:animate-out
+        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
+        z-50 bg-black/50`, className),
+		...props
+	});
+}
+function DrawerContent$1({ className, classNames = {}, handlebar, mask, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask, !mask && "hidden") }), /* @__PURE__ */ jsxs(Drawer.Content, {
+			"data-slot": "drawer-content",
+			className: cn("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", `data-[vaul-drawer-direction=top]:inset-x-0
+          data-[vaul-drawer-direction=top]:top-0
+          data-[vaul-drawer-direction=top]:mb-24
+          data-[vaul-drawer-direction=top]:max-h-[80vh]
+          data-[vaul-drawer-direction=top]:rounded-b-lg
+          data-[vaul-drawer-direction=top]:border-b`, `data-[vaul-drawer-direction=bottom]:inset-x-0
+          data-[vaul-drawer-direction=bottom]:bottom-0
+          data-[vaul-drawer-direction=bottom]:mt-24
+          data-[vaul-drawer-direction=bottom]:max-h-[80vh]
+          data-[vaul-drawer-direction=bottom]:rounded-t-lg
+          data-[vaul-drawer-direction=bottom]:border-t`, `data-[vaul-drawer-direction=right]:inset-y-0
+          data-[vaul-drawer-direction=right]:right-0
+          data-[vaul-drawer-direction=right]:w-3/4
+          data-[vaul-drawer-direction=right]:border-l
+          data-[vaul-drawer-direction=right]:sm:max-w-sm`, `data-[vaul-drawer-direction=left]:inset-y-0
+          data-[vaul-drawer-direction=left]:left-0
+          data-[vaul-drawer-direction=left]:w-3/4
+          data-[vaul-drawer-direction=left]:border-r
+          data-[vaul-drawer-direction=left]:sm:max-w-sm`, className),
+			...props,
+			children: [/* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full
+            group-data-[vaul-drawer-direction=bottom]/drawer-content:block`, classNames?.handlebar, !handlebar && "hidden") }), children]
+		})]
+	});
+}
+function DrawerHeader$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn(`flex flex-col gap-0.5 p-4
+        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center
+        group-data-[vaul-drawer-direction=top]/drawer-content:text-center
+        md:gap-1.5 md:text-left`, className),
+		...props
+	});
+}
+function DrawerFooter$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		...props
+	});
+}
+function DrawerTitle$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: cn("text-foreground font-semibold", className),
+		...props
+	});
+}
+function DrawerDescription$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/core/input.tsx
+var input_exports = /* @__PURE__ */ __exportAll({ Input: () => Input$1 });
+const Input$1 = React$1.forwardRef(({ className, type, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		className: cn(`border-input file:text-foreground placeholder:text-muted-foreground
+          focus-visible:ring-ring flex h-9 w-full rounded-md border
+          bg-transparent px-3 py-1 text-base shadow-sm transition-colors
+          file:border-0 file:bg-transparent file:text-sm file:font-medium
+          focus-visible:ring-1 focus-visible:outline-none
+          disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
+		ref,
+		...props
+	});
+});
+Input$1.displayName = "Input";
+
+//#endregion
+//#region src/core/label.tsx
+var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label$1 });
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	ref,
+	className: cn(labelVariants(), className),
+	...props
+}));
+Label$1.displayName = LabelPrimitive.Root.displayName;
+
+//#endregion
+//#region src/core/popover.tsx
+var popover_exports = /* @__PURE__ */ __exportAll({
+	Popover: () => Popover$1,
+	PopoverAnchor: () => PopoverAnchor,
+	PopoverContent: () => PopoverContent$1,
+	PopoverTrigger: () => PopoverTrigger$1
+});
+const Popover$1 = PopoverPrimitive.Root;
+const PopoverTrigger$1 = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent$1 = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+	ref,
+	align,
+	sideOffset,
+	className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+        data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+        data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+        data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
+        data-[side=left]:slide-in-from-right-2
+        data-[side=right]:slide-in-from-left-2
+        data-[side=top]:slide-in-from-bottom-2 z-50 w-72
+        origin-[--radix-popover-content-transform-origin] rounded-md border p-4
+        shadow-md outline-none`, className),
+	...props
+}) }));
+PopoverContent$1.displayName = PopoverPrimitive.Content.displayName;
+
+//#endregion
+//#region src/core/progress.tsx
+var progress_exports = /* @__PURE__ */ __exportAll({ Progress: () => Progress$1 });
+const Progress$1 = React$1.forwardRef(({ className, barClassName, barStyle, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+	ref,
+	className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+	...props,
+	children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+		className: cn("bg-primary h-full w-full flex-1 transition-all", barClassName),
+		style: {
+			transform: `translateX(-${100 - (value || 0)}%)`,
+			...barStyle
+		}
+	})
+}));
+Progress$1.displayName = ProgressPrimitive.Root.displayName;
+
+//#endregion
+//#region src/core/skeleton.tsx
+var skeleton_exports = /* @__PURE__ */ __exportAll({ Skeleton: () => Skeleton$1 });
+function Skeleton$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-accent animate-pulse rounded-md", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/core/switch.tsx
+var switch_exports = /* @__PURE__ */ __exportAll({ Switch: () => Switch$1 });
+function Switch$1({ className, handleClassName, ...props }) {
+	return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
+		"data-slot": "switch",
+		className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
+        focus-visible:border-ring focus-visible:ring-ring/50
+        dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8
+        shrink-0 items-center rounded-full border border-transparent shadow-xs
+        transition-all outline-none focus-visible:ring-[3px]
+        disabled:cursor-not-allowed disabled:opacity-50`, className),
+		...props,
+		children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
+			"data-slot": "switch-thumb",
+			className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
+          dark:data-[state=checked]:bg-primary-foreground pointer-events-none
+          block size-4 rounded-full ring-0 transition-transform
+          data-[state=checked]:translate-x-[calc(100%-2px)]
+          data-[state=unchecked]:translate-x-0`, handleClassName)
+		})
+	});
+}
+
+//#endregion
+//#region src/core/textarea.tsx
+var textarea_exports = /* @__PURE__ */ __exportAll({ Textarea: () => Textarea });
+const Textarea = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn(`border-input placeholder:text-muted-foreground focus-visible:ring-ring
+        flex min-h-15 w-full rounded-md border bg-transparent px-3 py-2
+        text-base shadow-sm focus-visible:ring-1 focus-visible:outline-none
+        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
+		ref,
+		...props
+	});
+});
+Textarea.displayName = "Textarea";
+
 //#endregion
 //#region src/components/atoms/Button/index.tsx
+const Core$6 = Button$2;
 const variantClasses = {
 	solid: "",
 	outlined: cn("border border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
@@ -87,7 +498,8 @@ const Button$1 = ({ icon, className, variant = "solid", size = "medium", color =
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
-	return /* @__PURE__ */ jsxs(Button$2, {
+	const displayIcon = loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon;
+	return /* @__PURE__ */ jsxs(Core$6, {
 		disabled,
 		variant: "default",
 		"data-color": computedColor,
@@ -103,39 +515,11 @@ const Button$1 = ({ icon, className, variant = "solid", size = "medium", color =
 			onMouseDown?.(e);
 		},
 		...props,
-		children: [loading ? typeof loading === "object" ? loading.icon : /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : icon, children]
+		children: [displayIcon, children]
 	});
 };
 var Button_default$1 = Button$1;
 
-//#endregion
-//#region src/core/checkbox.tsx
-const Checkbox$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
-	ref,
-	className: cn(`peer border-primary focus-visible:ring-ring
-      data-[state=checked]:bg-primary
-      data-[state=checked]:text-primary-foreground grid h-4 w-4 shrink-0
-      place-content-center rounded-sm border shadow focus-visible:ring-1
-      focus-visible:outline-none disabled:cursor-not-allowed
-      disabled:opacity-50`, className),
-	...props,
-	children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
-		className: cn("grid place-content-center text-current"),
-		children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-	})
-}));
-Checkbox$1.displayName = CheckboxPrimitive.Root.displayName;
-
-//#endregion
-//#region src/core/label.tsx
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label$1 = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, {
-	ref,
-	className: cn(labelVariants(), className),
-	...props
-}));
-Label$1.displayName = LabelPrimitive.Root.displayName;
-
 //#endregion
 //#region src/components/atoms/Checkbox/Group/index.tsx
 const Group = ({ direction = "vertical", placement = "left", className, classNames = {}, options: _options, onChange = () => {} }) => {
@@ -173,6 +557,8 @@ var Group_default = Group;
 
 //#endregion
 //#region src/components/atoms/Checkbox/index.tsx
+const { Checkbox: CoreCheckbox } = checkbox_exports;
+const { Label: CoreLabel } = label_exports;
 const Checkbox = ({ placement = "left", value = "", children, className, icons, checked: _checked, onChange: _onChange = () => {}, ...props }) => {
 	const [checked, setChecked] = useState(false);
 	const reactId = useId();
@@ -203,12 +589,12 @@ const Checkbox = ({ placement = "left", value = "", children, className, icons,
 			htmlFor: id,
 			children
 		})
-	] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Checkbox$1, {
+	] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CoreCheckbox, {
 		id,
 		checked,
 		className: "cursor-pointer",
 		onCheckedChange: onChange
-	}), children && /* @__PURE__ */ jsx(Label$1, {
+	}), children && /* @__PURE__ */ jsx(CoreLabel, {
 		htmlFor: id,
 		className: "cursor-pointer text-left",
 		children
@@ -258,31 +644,15 @@ const FloatButton = ({ className, children, ...props }) => {
 FloatButton.BackTop = BackTop_default;
 var FloatButton_default = FloatButton;
 
-//#endregion
-//#region src/core/input.tsx
-const Input$1 = React$1.forwardRef(({ className, type, ...props }, ref) => {
-	return /* @__PURE__ */ jsx("input", {
-		type,
-		className: cn(`border-input file:text-foreground placeholder:text-muted-foreground
-          focus-visible:ring-ring flex h-9 w-full rounded-md border
-          bg-transparent px-3 py-1 text-base shadow-sm transition-colors
-          file:border-0 file:bg-transparent file:text-sm file:font-medium
-          focus-visible:ring-1 focus-visible:outline-none
-          disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
-		ref,
-		...props
-	});
-});
-Input$1.displayName = "Input";
-
 //#endregion
 //#region src/components/atoms/Input/Search/index.tsx
+const { Input: Core$5 } = input_exports;
 const Search$1 = forwardRef(({ className, value, allowClear = true, onChange = () => {}, onPressEnter, ...props }, ref) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative flex items-center gap-x-2", "rounded-md", "p-3", className),
 		children: [
 			/* @__PURE__ */ jsx(Search, { className: "absolute size-5" }),
-			/* @__PURE__ */ jsx(Input$1, {
+			/* @__PURE__ */ jsx(Core$5, {
 				ref,
 				inputMode: "search",
 				type: "search",
@@ -305,24 +675,11 @@ const Search$1 = forwardRef(({ className, value, allowClear = true, onChange = (
 Search$1.displayName = "Search";
 var Search_default = Search$1;
 
-//#endregion
-//#region src/core/textarea.tsx
-const Textarea = React$1.forwardRef(({ className, ...props }, ref) => {
-	return /* @__PURE__ */ jsx("textarea", {
-		className: cn(`border-input placeholder:text-muted-foreground focus-visible:ring-ring
-        flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2
-        text-base shadow-sm focus-visible:ring-1 focus-visible:outline-none
-        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`, className),
-		ref,
-		...props
-	});
-});
-Textarea.displayName = "Textarea";
-
 //#endregion
 //#region src/components/atoms/Input/TextArea/index.tsx
+const { Textarea: Core$4 } = textarea_exports;
 const TextArea = ({ className, ref, ...props }) => {
-	return /* @__PURE__ */ jsx(Textarea, {
+	return /* @__PURE__ */ jsx(Core$4, {
 		ref,
 		className: cn(className),
 		...props
@@ -332,36 +689,129 @@ var TextArea_default = TextArea;
 
 //#endregion
 //#region src/components/atoms/Input/index.tsx
+const { Input: Core$3 } = input_exports;
 const Input = ({ ...props }) => {
-	return /* @__PURE__ */ jsx(Input$1, { ...props });
+	return /* @__PURE__ */ jsx(Core$3, { ...props });
 };
 Input.Search = Search_default;
 Input.TextArea = TextArea_default;
 var Input_default = Input;
 
 //#endregion
-//#region src/core/progress.tsx
-const Progress$1 = React$1.forwardRef(({ className, barClassName, barStyle, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
-	ref,
-	className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
-	...props,
-	children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
-		className: cn("bg-primary h-full w-full flex-1 transition-all", barClassName),
-		style: {
-			transform: `translateX(-${100 - (value || 0)}%)`,
-			...barStyle
-		}
-	})
-}));
-Progress$1.displayName = ProgressPrimitive.Root.displayName;
+//#region src/components/atoms/Popover/index.tsx
+const { Popover: CorePopover, PopoverContent, PopoverTrigger } = popover_exports;
+const placementMap = {
+	top: {
+		side: "top",
+		align: "center"
+	},
+	left: {
+		side: "left",
+		align: "center"
+	},
+	right: {
+		side: "right",
+		align: "center"
+	},
+	bottom: {
+		side: "bottom",
+		align: "center"
+	},
+	topLeft: {
+		side: "top",
+		align: "start"
+	},
+	topRight: {
+		side: "top",
+		align: "end"
+	},
+	bottomLeft: {
+		side: "bottom",
+		align: "start"
+	},
+	bottomRight: {
+		side: "bottom",
+		align: "end"
+	},
+	leftTop: {
+		side: "left",
+		align: "start"
+	},
+	leftBottom: {
+		side: "left",
+		align: "end"
+	},
+	rightTop: {
+		side: "right",
+		align: "start"
+	},
+	rightBottom: {
+		side: "right",
+		align: "end"
+	}
+};
+const arrowBase = "absolute h-0 w-0 drop-shadow-md";
+const arrowShape = {
+	vertical: "border-l-8 border-r-8 border-l-transparent border-r-transparent",
+	horizontal: "border-t-8 border-b-8 border-t-transparent border-b-transparent"
+};
+const arrowAlign = {
+	center: {
+		x: "left-1/2 -translate-x-1/2",
+		y: "top-1/2 -translate-y-1/2"
+	},
+	start: {
+		x: "left-4",
+		y: "top-4"
+	},
+	end: {
+		x: "right-4",
+		y: "bottom-4"
+	}
+};
+const arrowStyles = {
+	top: cn(arrowShape.vertical, arrowAlign.center.x, "top-full border-t-8 border-t-white"),
+	topLeft: cn(arrowShape.vertical, arrowAlign.start.x, "top-full border-t-8 border-t-white"),
+	topRight: cn(arrowShape.vertical, arrowAlign.end.x, "top-full border-t-8 border-t-white"),
+	bottom: cn(arrowShape.vertical, arrowAlign.center.x, "bottom-full border-b-8 border-b-white"),
+	bottomLeft: cn(arrowShape.vertical, arrowAlign.start.x, "bottom-full border-b-8 border-b-white"),
+	bottomRight: cn(arrowShape.vertical, arrowAlign.end.x, "bottom-full border-b-8 border-b-white"),
+	left: cn(arrowShape.horizontal, arrowAlign.center.y, "left-full border-l-8 border-l-white"),
+	leftTop: cn(arrowShape.horizontal, arrowAlign.start.y, "left-full border-l-8 border-l-white"),
+	leftBottom: cn(arrowShape.horizontal, arrowAlign.end.y, "left-full border-l-8 border-l-white"),
+	right: cn(arrowShape.horizontal, arrowAlign.center.y, "right-full border-r-8 border-r-white"),
+	rightTop: cn(arrowShape.horizontal, arrowAlign.start.y, "right-full border-r-8 border-r-white"),
+	rightBottom: cn(arrowShape.horizontal, arrowAlign.end.y, "right-full border-r-8 border-r-white")
+};
+const Popover = ({ title, placement = "top", className, content, children }) => {
+	return /* @__PURE__ */ jsxs(CorePopover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: placementMap[placement].align,
+		side: placementMap[placement].side,
+		sideOffset: 16,
+		className: cn("relative w-auto", className),
+		children: [
+			renderConditional(title, (v) => /* @__PURE__ */ jsx(Typography_default.Title, {
+				level: 6,
+				children: v
+			})),
+			content,
+			/* @__PURE__ */ jsx("div", { className: cn(arrowBase, arrowStyles[placement]) })
+		]
+	})] });
+};
+var Popover_default = Popover;
 
 //#endregion
 //#region src/components/atoms/Progress/index.tsx
+const { Progress: Core$2 } = progress_exports;
 const Progress = ({ value, className, direction = "horizontal", classNames }) => {
 	const isHorizontal = direction === "horizontal";
 	const dimension = isHorizontal ? "width" : "height";
 	const percent = isNaN(value) ? 0 : value;
-	return /* @__PURE__ */ jsx(Progress$1, {
+	return /* @__PURE__ */ jsx(Core$2, {
 		value,
 		className: cn(isHorizontal ? "h-4 w-full" : "flex h-full w-4 flex-col justify-end", className, classNames?.background),
 		barClassName: cn("flex-none", classNames?.bar),
@@ -373,16 +823,6 @@ const Progress = ({ value, className, direction = "horizontal", classNames }) =>
 };
 var Progress_default = Progress;
 
-//#endregion
-//#region src/core/skeleton.tsx
-function Skeleton$1({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "skeleton",
-		className: cn("bg-accent animate-pulse rounded-md", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/atoms/Skeleton/Button/index.tsx
 const Button = ({ className, ...props }) => {
@@ -406,6 +846,7 @@ var Node_default = Node;
 
 //#endregion
 //#region src/components/atoms/Skeleton/index.tsx
+const { Skeleton: Core$1 } = skeleton_exports;
 const getValueAtIndex = (value, index) => {
 	return Array.isArray(value) ? value[index] ?? value[0] : value;
 };
@@ -418,13 +859,13 @@ const Skeleton = ({ active = true, loading = true, avatar, size = "default", dir
 	if (!loading) return children;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center gap-3"),
-		children: [avatar && /* @__PURE__ */ jsx(Skeleton$1, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
+		children: [avatar && /* @__PURE__ */ jsx(Core$1, { className: cn("h-12 w-12", "rounded-xl", !active && "animate-none", classNames.avatar) }), /* @__PURE__ */ jsx("div", {
 			className: cn("flex grow", direction === "vertical" && "flex-col", classNames.wrapper),
 			style: { gap },
 			children: Array.from({ length: count }).map((_, index) => {
 				const itemWidth = getValueAtIndex(width, index);
 				const itemHeight = getValueAtIndex(height, index);
-				return /* @__PURE__ */ jsx(Skeleton$1, {
+				return /* @__PURE__ */ jsx(Core$1, {
 					className: cn("rounded-md", !active && "animate-none", SIZES[size], className, classNames.item),
 					style: {
 						...style,
@@ -449,37 +890,15 @@ const Spin = ({ spinning, className, ...props }) => {
 		...props,
 		children: /* @__PURE__ */ jsx(Loader2, { className: cn("animate-spin", className) })
 	});
-	return null;
-};
-var Spin_default = Spin;
-
-//#endregion
-//#region src/core/switch.tsx
-function Switch$1({ className, handleClassName, ...props }) {
-	return /* @__PURE__ */ jsx(SwitchPrimitive.Root, {
-		"data-slot": "switch",
-		className: cn(`peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input
-        focus-visible:border-ring focus-visible:ring-ring/50
-        dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8
-        shrink-0 items-center rounded-full border border-transparent shadow-xs
-        transition-all outline-none focus-visible:ring-[3px]
-        disabled:cursor-not-allowed disabled:opacity-50`, className),
-		...props,
-		children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, {
-			"data-slot": "switch-thumb",
-			className: cn(`bg-background dark:data-[state=unchecked]:bg-foreground
-          dark:data-[state=checked]:bg-primary-foreground pointer-events-none
-          block size-4 rounded-full ring-0 transition-transform
-          data-[state=checked]:translate-x-[calc(100%-2px)]
-          data-[state=unchecked]:translate-x-0`, handleClassName)
-		})
-	});
-}
+	return null;
+};
+var Spin_default = Spin;
 
 //#endregion
 //#region src/components/atoms/Switch/index.tsx
+const { Switch: Core } = switch_exports;
 const Switch = ({ onChange, className, classNames, ...props }) => {
-	return /* @__PURE__ */ jsx(Switch$1, {
+	return /* @__PURE__ */ jsx(Core, {
 		className: cn(className, classNames?.track),
 		handleClassName: cn(classNames?.handle),
 		onCheckedChange: (checked) => {
@@ -496,10 +915,10 @@ const Card = ({ title, children, className, classNames, variant = "outlined", ..
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("w-full", "rounded-lg p-4", "bg-white shadow-sm transition-all", variant === "outlined" && "border border-gray-200", className),
 		...props,
-		children: [title && /* @__PURE__ */ jsx("div", {
+		children: [renderConditional(title, (v) => /* @__PURE__ */ jsx("div", {
 			className: cn("mb-4 font-bold", classNames?.title),
-			children: title
-		}), /* @__PURE__ */ jsx("div", {
+			children: v
+		})), /* @__PURE__ */ jsx("div", {
 			className: cn(classNames?.body),
 			children
 		})]
@@ -507,40 +926,9 @@ const Card = ({ title, children, className, classNames, variant = "outlined", ..
 };
 var Card_default = Card;
 
-//#endregion
-//#region src/core/accordion.tsx
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
-	ref,
-	className: cn("border-b", className),
-	...props
-}));
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React$1.forwardRef(({ expandIcon, className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
-	className: "flex",
-	children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
-		ref,
-		className: cn(`flex flex-1 items-center justify-between py-4 text-left text-sm
-        font-medium transition-all hover:underline
-        [&[data-state=open]>svg]:rotate-180`, className),
-		...props,
-		children: [children, expandIcon || /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform\n            duration-200" })]
-	})
-}));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
-	ref,
-	className: "data-[state=closed]:animate-accordion-up\n      data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-	...props,
-	children: /* @__PURE__ */ jsx("div", {
-		className: cn("pt-0 pb-4", className),
-		children
-	})
-}));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
 //#endregion
 //#region src/components/molecules/Collapse/index.tsx
+const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } = accordion_exports;
 const Collapse = ({ expandIcon, accordion = false, items: _items = [], className, classNames, defaultActiveKey }) => {
 	const [items, setItems] = useState([]);
 	useEffect(() => {
@@ -574,24 +962,7 @@ const Collapse = ({ expandIcon, accordion = false, items: _items = [], className
 var Collapse_default = Collapse;
 
 //#endregion
-//#region src/components/molecules/Menu/index.tsx
-const MENU_CLASSNAMES = [
-	"p-0",
-	"bg-white",
-	"shadow-md",
-	"rounded-md"
-];
-const OPEN_CLASSNAMES = ["underline", "underline-offset-8"];
-const HOVER_CLASSNAMES = ["hover:underline", "hover:underline-offset-8"];
-const OFFSET = [8, 8];
-const INLINE_OFFSET = 16;
-function findKey(menu, targetKeys) {
-	if (targetKeys.includes(menu.key)) return true;
-	if (menu.children && Array.isArray(menu.children)) {
-		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
-	}
-	return false;
-}
+//#region src/components/molecules/Menu/Item/Label/index.tsx
 const Label = ({ children, level = 4, className, ...props }) => {
 	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography_default.Text, {
 		level,
@@ -601,94 +972,39 @@ const Label = ({ children, level = 4, className, ...props }) => {
 	});
 	return children;
 };
-const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, children, selectedKeys = [], fullSize, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, ...props }) => {
+var Label_default = Label;
+
+//#endregion
+//#region src/components/molecules/Menu/Item/index.tsx
+const OFFSET = [8, 8];
+const INLINE_OFFSET = 16;
+const STYLES = {
+	hover: { classes: ["hover:underline", "hover:underline-offset-8"] },
+	open: { classes: ["underline", "underline-offset-8"] }
+};
+const getItemClasses = (root, isHorizontal, isInline, hasChildren, customClasses) => cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
+	"h-full",
+	"rounded-none border-transparent",
+	hasChildren && "hover:border-current",
+	isHorizontal ? "border-b-2" : "border-r-2",
+	isInline && "border-none"
+] : ["rounded-md", ...STYLES.hover.classes], customClasses);
+const Item$2 = ({ itemKey, keyPath, root = false, mode, label, children, selectedKeys = [], selectionMap, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, onSelect, ...props }) => {
 	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
-	});
 	const itemRef = useRef(null);
 	const isHorizontal = mode === "horizontal";
 	const isInline = mode === "inline";
 	const [left, top] = offset;
+	const selected = selectionMap?.get(itemKey) ?? false;
 	const item = {
 		...props,
 		label,
 		key: itemKey,
 		children
 	};
-	const itemClassNames = cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
-		"h-full",
-		"rounded-none border-transparent",
-		!!children?.length && "hover:border-current",
-		isHorizontal ? "border-b-2" : "border-r-2",
-		isInline && "border-none",
-		classNames?.rootItem
-	] : [
-		"rounded-md",
-		...HOVER_CLASSNAMES,
-		classNames?.item
-	]);
-	const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4", ...fullSize ? [
-		...MENU_CLASSNAMES,
-		"fixed flex justify-center items-start",
-		isHorizontal ? "inset-x-0 w-screen" : "inset-y-0 h-screen"
-	] : []);
-	const childrenContainerStyle = fullSize ? isHorizontal ? {
-		top: position.top,
-		marginTop: top
-	} : {
-		left: position.left,
-		marginLeft: left
-	} : isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
-	useEffect(() => {
-		if (!itemRef.current) return;
-		const $item = itemRef.current;
-		const onResize = () => {
-			setPosition({
-				top: $item.offsetTop + $item.offsetHeight,
-				left: $item.offsetLeft + $item.offsetWidth
-			});
-		};
-		onResize();
-		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
-	}, []);
-	if (!root && fullSize) return /* @__PURE__ */ jsxs("li", {
-		className: cn("basis-1/6", "min-w-[180px]"),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, "justify-center"),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: itemKey,
-					keyPath,
-					item
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				className: "font-semibold",
-				children: label
-			})
-		}), /* @__PURE__ */ jsx("ul", { children: children?.map((child) => /* @__PURE__ */ jsx("li", {
-			className: cn(itemClassNames, "justify-center", ...findKey(child, selectedKeys) ? [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: child.key,
-					keyPath: [...keyPath, child.key],
-					item: child
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				level: 5,
-				className: "text-center text-wrap",
-				children: child.label
-			})
-		}, child.key)) })]
-	});
+	const itemClassNames = getItemClasses(root, isHorizontal, isInline, !!children?.length, root ? classNames?.rootItem : classNames?.item);
+	const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4");
+	const childrenContainerStyle = isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
 	return /* @__PURE__ */ jsxs("li", {
 		ref: itemRef,
 		className: cn("group", "relative", root && isHorizontal ? "inline-block" : "block"),
@@ -701,23 +1017,29 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
 			setOpen(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, ...findKey(item, selectedKeys) ? root ? ["border-current"] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : root && !!children?.length ? ["group-hover:border-current"] : []),
+			role: "menuitem",
+			"aria-expanded": children?.length ? open : void 0,
+			"aria-haspopup": children?.length ? "menu" : void 0,
+			"aria-selected": selected,
+			className: cn(itemClassNames, ...selected ? root ? ["border-current"] : [...STYLES.open.classes, ...STYLES.hover.classes] : root && !!children?.length ? ["group-hover:border-current"] : []),
 			style: root ? styles?.rootItem : styles?.item,
 			onClick: (e) => {
 				e.stopPropagation();
 				if (isInline) setOpen(!open);
-				onClick?.({
+				const params = {
 					domEvent: e,
 					key: itemKey,
 					keyPath,
 					item
-				});
+				};
+				onClick?.(params);
+				if (!selected) onSelect?.(params);
 			},
 			children: /* @__PURE__ */ jsxs("div", {
 				className: cn("w-full", "inline-flex items-center justify-between"),
 				children: [
-					/* @__PURE__ */ jsx(Label, {
-						className: cn(classNames?.label, root && classNames?.rootItem, ...findKey(item, selectedKeys) ? root ? [] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
+					/* @__PURE__ */ jsx(Label_default, {
+						className: cn(classNames?.label),
 						style: styles?.label,
 						children: label
 					}),
@@ -742,59 +1064,85 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
 			} : { opacity: 0 },
 			transition: { duration: .2 },
 			children: /* @__PURE__ */ jsx("ul", {
-				className: cn(fullSize ? [
-					"h-auto",
-					"flex flex-nowrap gap-y-4",
-					"p-8"
-				] : MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
+				className: cn(MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
 				style: styles?.subMenu,
 				children: children.map((child) => /* @__PURE__ */ createElement(Item$2, {
 					...child,
 					key: child.key,
 					itemKey: child.key,
 					keyPath: [...keyPath, child.key],
+					selectionMap,
 					mode,
 					selectedKeys,
-					fullSize,
 					classNames,
 					styles,
 					offset,
 					inlineOffset,
-					onClick
+					onClick,
+					onSelect
 				}))
 			})
 		}) })]
 	});
 };
-const Menu = ({ items, mode = "vertical", fullSize = false, defaultSelectedKeys: _defaultSelectedKeys = [], selectedKeys: _selectedKeys = [], className, classNames, styles, offset, inlineOffset, onClick = () => {}, ...props }) => {
-	const [selectedKeys, setSelectedKeys] = useState(_defaultSelectedKeys);
-	useEffect(() => {
-		if (!_defaultSelectedKeys.length) return;
-		setSelectedKeys(_defaultSelectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_defaultSelectedKeys]);
-	useEffect(() => {
-		if (!_selectedKeys.length) return;
-		setSelectedKeys(_selectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_selectedKeys]);
+var Item_default$2 = Item$2;
+
+//#endregion
+//#region src/components/molecules/Menu/index.tsx
+const MENU_CLASSNAMES = [
+	"p-0",
+	"bg-white",
+	"shadow-md",
+	"rounded-md"
+];
+function buildSelectionMap(items, selectedKeysSet) {
+	const map = /* @__PURE__ */ new Map();
+	const dfs = (node) => {
+		const self = selectedKeysSet.has(node.key);
+		const hasSelectedChild = node.children?.some((child) => dfs(child)) ?? false;
+		const isSelected = self || hasSelectedChild;
+		map.set(node.key, isSelected);
+		return isSelected;
+	};
+	items.forEach(dfs);
+	return map;
+}
+function findKey(menu, targetKeys) {
+	if (targetKeys.has(menu.key)) return true;
+	if (menu.children && Array.isArray(menu.children)) {
+		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
+	}
+	return false;
+}
+const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
+	const isControlled = _selectedKeys !== void 0;
+	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);
+	const selectedKeys = isControlled ? _selectedKeys : uncontrolledSelectedKeys;
+	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
+	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
+	const onSelect = (params) => {
+		if (!isControlled) setUncontrolledSelectedKeys([params.key]);
+		_onSelect?.(params);
+	};
 	return /* @__PURE__ */ jsx("ul", {
+		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
 		...props,
-		children: items?.map((item) => /* @__PURE__ */ createElement(Item$2, {
+		children: items?.map((item) => /* @__PURE__ */ createElement(Item_default$2, {
 			root: true,
 			...item,
 			key: item.key,
 			itemKey: item.key,
 			keyPath: [item.key],
 			selectedKeys,
+			selectionMap,
 			mode,
-			fullSize,
 			classNames,
 			styles,
 			offset,
 			inlineOffset,
-			onClick
+			onClick,
+			onSelect
 		}))
 	});
 };
@@ -4681,93 +5029,9 @@ const Space = ({ loading, loader, children, size = "middle", orientation = "hori
 };
 var Space_default = Space;
 
-//#endregion
-//#region src/core/drawer.tsx
-function Drawer$2({ ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Root, {
-		"data-slot": "drawer",
-		...props
-	});
-}
-function DrawerPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Portal, {
-		"data-slot": "drawer-portal",
-		...props
-	});
-}
-function DrawerOverlay({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Overlay, {
-		"data-slot": "drawer-overlay",
-		className: cn(`data-[state=open]:animate-in data-[state=closed]:animate-out
-        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
-        z-50 bg-black/50`, className),
-		...props
-	});
-}
-function DrawerContent({ className, classNames = {}, handlebar, mask, children, ...props }) {
-	return /* @__PURE__ */ jsxs(DrawerPortal, {
-		"data-slot": "drawer-portal",
-		children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask, !mask && "hidden") }), /* @__PURE__ */ jsxs(Drawer.Content, {
-			"data-slot": "drawer-content",
-			className: cn("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", `data-[vaul-drawer-direction=top]:inset-x-0
-          data-[vaul-drawer-direction=top]:top-0
-          data-[vaul-drawer-direction=top]:mb-24
-          data-[vaul-drawer-direction=top]:max-h-[80vh]
-          data-[vaul-drawer-direction=top]:rounded-b-lg
-          data-[vaul-drawer-direction=top]:border-b`, `data-[vaul-drawer-direction=bottom]:inset-x-0
-          data-[vaul-drawer-direction=bottom]:bottom-0
-          data-[vaul-drawer-direction=bottom]:mt-24
-          data-[vaul-drawer-direction=bottom]:max-h-[80vh]
-          data-[vaul-drawer-direction=bottom]:rounded-t-lg
-          data-[vaul-drawer-direction=bottom]:border-t`, `data-[vaul-drawer-direction=right]:inset-y-0
-          data-[vaul-drawer-direction=right]:right-0
-          data-[vaul-drawer-direction=right]:w-3/4
-          data-[vaul-drawer-direction=right]:border-l
-          data-[vaul-drawer-direction=right]:sm:max-w-sm`, `data-[vaul-drawer-direction=left]:inset-y-0
-          data-[vaul-drawer-direction=left]:left-0
-          data-[vaul-drawer-direction=left]:w-3/4
-          data-[vaul-drawer-direction=left]:border-r
-          data-[vaul-drawer-direction=left]:sm:max-w-sm`, className),
-			...props,
-			children: [/* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full
-            group-data-[vaul-drawer-direction=bottom]/drawer-content:block`, classNames?.handlebar, !handlebar && "hidden") }), children]
-		})]
-	});
-}
-function DrawerHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "drawer-header",
-		className: cn(`flex flex-col gap-0.5 p-4
-        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center
-        group-data-[vaul-drawer-direction=top]/drawer-content:text-center
-        md:gap-1.5 md:text-left`, className),
-		...props
-	});
-}
-function DrawerFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "drawer-footer",
-		className: cn("mt-auto flex flex-col gap-2 p-4", className),
-		...props
-	});
-}
-function DrawerTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Title, {
-		"data-slot": "drawer-title",
-		className: cn("text-foreground font-semibold", className),
-		...props
-	});
-}
-function DrawerDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Description, {
-		"data-slot": "drawer-description",
-		className: cn("text-muted-foreground text-sm", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/organisms/Drawer/index.tsx
+const { DrawerContent, Drawer: DrawerCore, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } = drawer_exports;
 const Drawer$1 = ({ open, title, footer, closable = true, closeIcon, direction = "bottom", maskClosable = true, handlebar = true, draggable = false, rounded = false, mask = true, className, classNames, style, children, container, onClose, ...props }) => {
 	useEffect(() => {
 		if (!open) return;
@@ -4783,7 +5047,7 @@ const Drawer$1 = ({ open, title, footer, closable = true, closeIcon, direction =
 		}
 	}, [open, mask]);
 	if (typeof window === "undefined") return null;
-	return /* @__PURE__ */ jsx(Drawer$2, {
+	return /* @__PURE__ */ jsx(DrawerCore, {
 		open,
 		direction,
 		handleOnly: !draggable,
@@ -4806,21 +5070,21 @@ const Drawer$1 = ({ open, title, footer, closable = true, closeIcon, direction =
 					className: cn(classNames?.header, !title && "p-0"),
 					children: [/* @__PURE__ */ jsxs(DrawerTitle, {
 						className: cn("flex justify-between", classNames?.title),
-						children: [/* @__PURE__ */ jsx("span", { children: title }), closable && /* @__PURE__ */ jsx("span", {
-							className: cn("absolute right-5 top-3 cursor-pointer", classNames?.close),
+						children: [/* @__PURE__ */ jsx("span", { children: title }), renderConditional(closable ? closeIcon || /* @__PURE__ */ jsx(X, {}) : null, (v) => /* @__PURE__ */ jsx("span", {
+							className: cn("absolute top-3 right-5 cursor-pointer", classNames?.close),
 							onClick: onClose,
-							children: closeIcon || /* @__PURE__ */ jsx(X, {})
-						})]
+							children: v
+						}))]
 					}), /* @__PURE__ */ jsx(DrawerDescription, { className: "hidden" })]
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: cn("overflow-auto p-5", classNames?.body),
 					children
 				}),
-				footer && /* @__PURE__ */ jsx(DrawerFooter, {
+				renderConditional(footer, (v) => /* @__PURE__ */ jsx(DrawerFooter, {
 					className: cn(classNames?.footer),
-					children: footer
-				})
+					children: v
+				}))
 			]
 		})
 	});
@@ -4878,10 +5142,10 @@ const List = ({ loading, loaderProps, loader, header, title, empty, scroll, data
 		className: cn(className),
 		...props,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: cn(classNames?.title),
-				children: title
-			}),
+			renderConditional(title, (v) => /* @__PURE__ */ jsx("h2", {
+				className: cn("px-1.5 py-4", "text-black-90 text-lg leading-5.75 font-bold"),
+				children: v
+			})),
 			/* @__PURE__ */ jsx("div", {
 				className: cn(classNames?.header),
 				children: header
@@ -4904,86 +5168,9 @@ const List = ({ loading, loaderProps, loader, header, title, empty, scroll, data
 List.Item = Item_default;
 var List_default = List;
 
-//#endregion
-//#region src/core/dialog.tsx
-function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
-		"data-slot": "dialog",
-		...props
-	});
-}
-function DialogPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
-		"data-slot": "dialog-portal",
-		...props
-	});
-}
-function DialogOverlay({ className, ...props }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
-		"data-slot": "dialog-overlay",
-		className: cn(`data-[state=open]:animate-in data-[state=closed]:animate-out
-        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
-        z-50 bg-black/50`, className),
-		...props
-	});
-}
-function DialogContent({ className, children, showCloseButton = true, classNames, closeIcon, closable, container, onCancel, ...props }) {
-	return /* @__PURE__ */ jsxs(DialogPortal, {
-		"data-slot": "dialog-portal",
-		container,
-		children: [/* @__PURE__ */ jsx(DialogOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-			"data-slot": "dialog-content",
-			className: cn(`bg-background data-[state=open]:animate-in
-          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
-          data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid
-          w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]
-          gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg`, className),
-			...props,
-			children: [children, showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
-				"data-slot": "dialog-close",
-				className: "ring-offset-background focus:ring-ring\n              data-[state=open]:bg-accent\n              data-[state=open]:text-muted-foreground absolute top-4 right-4\n              rounded-xs opacity-70 transition-opacity hover:opacity-100\n              focus:ring-2 focus:ring-offset-2 focus:outline-hidden\n              disabled:pointer-events-none [&_svg]:pointer-events-none\n              [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				disabled: typeof closable === "object" && closable.disabled,
-				onClick: onCancel,
-				children: [closeIcon || /* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})]
-		})]
-	});
-}
-function DialogHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
-		...props
-	});
-}
-function DialogFooter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-footer",
-		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
-		...props
-	});
-}
-function DialogTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
-		"data-slot": "dialog-title",
-		className: cn("text-lg leading-none font-semibold", className),
-		...props
-	});
-}
-function DialogDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
-		"data-slot": "dialog-description",
-		className: cn("text-muted-foreground text-sm", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/organisms/Modal/index.tsx
+const { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } = dialog_exports;
 const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
 let modalRoot = null;
 let modalStack = [];
@@ -5277,4 +5464,4 @@ Layout.Sider = Sider_default;
 var Layout_default = Layout;
 
 //#endregion
-export { Input_default as _, Drawer_default as a, Button_default$1 as b, Dropdown_default as c, Collapse_default as d, Card_default as f, Progress_default as g, Skeleton_default as h, List_default as i, Menu_default as l, Spin_default as m, Swiper_default as n, Space_default as o, Switch_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, findKey as u, FloatButton_default as v, Checkbox_default as y };
+export { Button_default$1 as C, Checkbox_default as S, Skeleton_default as _, Drawer_default as a, Input_default as b, Dropdown_default as c, buildSelectionMap as d, findKey as f, Spin_default as g, Switch_default as h, List_default as i, MENU_CLASSNAMES as l, Card_default as m, Swiper_default as n, Space_default as o, Collapse_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, Menu_default as u, Progress_default as v, FloatButton_default as x, Popover_default as y };