@jbpark/ui-kit 2.0.1 → 2.1.0

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

@@ -1,26 +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, 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";
@@ -29,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: {
@@ -64,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"),
@@ -88,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,
@@ -104,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 = () => {} }) => {
@@ -174,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();
@@ -204,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
@@ -259,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",
@@ -306,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
@@ -333,74 +689,129 @@ var TextArea_default = TextArea;
 
 //#endregion
 //#region src/components/atoms/Input/index.tsx
-const Input = ({ ...props }) => {
-	return /* @__PURE__ */ jsx(Input$1, { ...props });
-};
-Input.Search = Search_default;
-Input.TextArea = TextArea_default;
-var Input_default = Input;
-
-//#endregion
-//#region src/core/popover.tsx
-const Popover$1 = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent = 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.displayName = PopoverPrimitive.Content.displayName;
+const { Input: Core$3 } = input_exports;
+const Input = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Core$3, { ...props });
+};
+Input.Search = Search_default;
+Input.TextArea = TextArea_default;
+var Input_default = Input;
 
 //#endregion
 //#region src/components/atoms/Popover/index.tsx
-const Popover = ({ title, content, children }) => {
-	return /* @__PURE__ */ jsxs(Popover$1, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+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: "start",
-		children: [title && typeof title === "string" ? /* @__PURE__ */ jsx(Typography_default.Title, {
-			level: 5,
-			children: title
-		}) : title, content]
+		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/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;
-
 //#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),
@@ -412,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 }) => {
@@ -445,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;
 };
@@ -457,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,
@@ -492,33 +894,11 @@ const Spin = ({ spinning, className, ...props }) => {
 };
 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)
-		})
-	});
-}
-
 //#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) => {
@@ -535,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
 		})]
@@ -546,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(() => {
@@ -4680,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;
@@ -4782,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,
@@ -4805,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
+				}))
 			]
 		})
 	});
@@ -4877,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
@@ -4903,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 = [];