@refinn/core-ui 0.1.9 → 0.1.11

package/dist/index.js

@@ -715,163 +715,22 @@ var Button = forwardRef7(
 );
 Button.displayName = "Button";
 
-// src/components/BottomSheet/BottomSheet.tsx
-import React, { useEffect, useState as useState2, useCallback as useCallback2, forwardRef as forwardRef8 } from "react";
-import { createPortal } from "react-dom";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var BottomSheet = forwardRef8(
-  (_a, ref) => {
-    var _b = _a, {
-      isForceOpen = false,
-      setIsForceOpen,
-      isClosedAble = true,
-      children,
-      startModalBtn,
-      stopModalBtn,
-      afterStopBtn,
-      size = "md",
-      modalTitle = "\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D",
-      modalDesc = "\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22",
-      className = ""
-    } = _b, rest = __objRest(_b, [
-      "isForceOpen",
-      "setIsForceOpen",
-      "isClosedAble",
-      "children",
-      "startModalBtn",
-      "stopModalBtn",
-      "afterStopBtn",
-      "size",
-      "modalTitle",
-      "modalDesc",
-      "className"
-    ]);
-    const [isOpen, setIsOpen] = useState2(false);
-    const [shouldRender, setShouldRender] = useState2(false);
-    const [animate, setAnimate] = useState2(false);
-    useEffect(() => {
-      if (isOpen) {
-        setShouldRender(true);
-        setTimeout(() => setAnimate(true), 10);
-      } else {
-        setAnimate(false);
-        const timer = setTimeout(() => setShouldRender(false), 300);
-        return () => clearTimeout(timer);
-      }
-    }, [isOpen]);
-    useEffect(() => {
-      if (isForceOpen) {
-        setIsOpen(true);
-      } else {
-        setIsOpen(false);
-      }
-    }, [isForceOpen]);
-    const handleStartClick = useCallback2(
-      (e) => {
-        var _a2, _b2;
-        (_b2 = startModalBtn == null ? void 0 : (_a2 = startModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
-        setIsForceOpen == null ? void 0 : setIsForceOpen(true);
-        setIsOpen(true);
-      },
-      [startModalBtn]
-    );
-    const handleStopClick = useCallback2(
-      (e) => {
-        var _a2, _b2;
-        (_b2 = stopModalBtn == null ? void 0 : (_a2 = stopModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
-        setIsForceOpen == null ? void 0 : setIsForceOpen(false);
-        setIsOpen(false);
-      },
-      [stopModalBtn]
-    );
-    const handleCloseClick = () => {
-      setIsForceOpen == null ? void 0 : setIsForceOpen(false);
-      setIsOpen(false);
-    };
-    return /* @__PURE__ */ jsxs8("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && React.cloneElement(startModalBtn, {
-        onClick: handleStartClick
-      }),
-      shouldRender && createPortal(
-        /* @__PURE__ */ jsxs8(
-          "div",
-          {
-            className: `fixed inset-0 z-15000 flex items-end justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
-            "aria-modal": "true",
-            role: "dialog",
-            children: [
-              /* @__PURE__ */ jsx8(
-                "div",
-                {
-                  className: "absolute inset-0 bg-black/40",
-                  onClick: () => isClosedAble ? handleCloseClick() : null,
-                  "aria-label": "Close modal"
-                }
-              ),
-              /* @__PURE__ */ jsxs8(
-                "div",
-                {
-                  className: `flex flex-col z-10 w-full rounded-t-xl bg-white pt-8 pb-16 px-16 shadow-lg transform transition-all duration-300 
-                ${size === "sm" ? "h-auto max-h-auto" : size === "md" ? "h-full max-h-[85vh]" : "h-full max-h-screen rounded-t-none!"}
-                ${animate ? "scale-100 translate-y-0" : "scale-95 translate-y-full"}`,
-                  children: [
-                    /* @__PURE__ */ jsxs8("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
-                      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col px-8 max-w-225", children: [
-                        /* @__PURE__ */ jsx8("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
-                        /* @__PURE__ */ jsx8("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
-                      ] }),
-                      /* @__PURE__ */ jsx8(
-                        "i",
-                        {
-                          className: "fi fi-br-cross-small flex text-xl text-gray-600 w-44 h-44 absolute top-0 right-0 p-12",
-                          onClick: () => handleCloseClick()
-                        }
-                      ),
-                      /* @__PURE__ */ jsx8(
-                        "div",
-                        {
-                          className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
-                          onClick: () => handleCloseClick(),
-                          children: "x"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs8("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
-                      children,
-                      stopModalBtn && React.cloneElement(stopModalBtn, {
-                        onClick: handleStopClick
-                      }),
-                      afterStopBtn && afterStopBtn
-                    ] })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        document.body
-      )
-    ] });
-  }
-);
-BottomSheet.displayName = "BottomSheet";
-
 // src/components/Checkbox/Checkbox.tsx
 import {
-  forwardRef as forwardRef9,
+  forwardRef as forwardRef8,
   useId as useId2,
-  useState as useState3
+  useState as useState2
 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M13.333 4.667 6 12l-3.333-3.333",
@@ -885,14 +744,14 @@ function CheckIcon({ className }) {
   );
 }
 function IndeterminateIcon({ className }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M3.333 8h9.334",
@@ -904,7 +763,7 @@ function IndeterminateIcon({ className }) {
     }
   );
 }
-var Checkbox = forwardRef9(
+var Checkbox = forwardRef8(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -929,15 +788,15 @@ var Checkbox = forwardRef9(
     ]);
     const reactId = useId2();
     const inputId = id != null ? id : reactId;
-    const [isChecked, setIsChecked] = useState3(defaultChecked != null ? defaultChecked : false);
-    return /* @__PURE__ */ jsxs9(
+    const [isChecked, setIsChecked] = useState2(defaultChecked != null ? defaultChecked : false);
+    return /* @__PURE__ */ jsxs8(
       "label",
       {
         htmlFor: inputId,
         className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
         children: [
-          /* @__PURE__ */ jsxs9("div", { className: "relative mr-16", children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs8("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ jsx8(
               "input",
               __spreadValues({
                 ref,
@@ -954,16 +813,16 @@ var Checkbox = forwardRef9(
                 className: "sr-only"
               }, rest)
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx8(
               "div",
               {
                 className: `box m-6 flex h-20 w-20 rounded-md items-center justify-center border ${contrast ? isChecked || indeterminate ? "border-white bg-white" : "border-white" : isChecked || indeterminate ? "bg-static-icon-brand border-static-icon-brand" : "border-static-icon-primary"}`,
-                children: isChecked ? /* @__PURE__ */ jsx9(
+                children: isChecked ? /* @__PURE__ */ jsx8(
                   CheckIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
                   }
-                ) : indeterminate ? /* @__PURE__ */ jsx9(
+                ) : indeterminate ? /* @__PURE__ */ jsx8(
                   IndeterminateIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
@@ -972,15 +831,15 @@ var Checkbox = forwardRef9(
               }
             )
           ] }),
-          (label || description) && /* @__PURE__ */ jsxs9("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ jsx9(
+          (label || description) && /* @__PURE__ */ jsxs8("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsx8(
               "span",
               {
                 className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
                 children: label
               }
             ),
-            description && /* @__PURE__ */ jsx9(
+            description && /* @__PURE__ */ jsx8(
               "span",
               {
                 className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
@@ -997,9 +856,9 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Chip/Chip.tsx
 import {
-  forwardRef as forwardRef10
+  forwardRef as forwardRef9
 } from "react";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var sizeClasses4 = {
   sm: "h-32 text-label-medium px-12 py-6",
   md: "h-40 text-label-large px-16 py-10",
@@ -1018,7 +877,7 @@ var isDarkClasses = {
   true: "!bg-chip-background-black-active !text-chip-text-inverse",
   false: "!bg-chip-background-active !text-chip-text-inverse"
 };
-var Chip = forwardRef10(
+var Chip = forwardRef9(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -1054,14 +913,14 @@ var Chip = forwardRef10(
       className,
       isSelected ? darkClass : ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs9(
       "div",
       __spreadProps(__spreadValues({
         ref,
         className: containerClasses
       }, rest), {
         children: [
-          icon ? icon : src && /* @__PURE__ */ jsx10("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
+          icon ? icon : src && /* @__PURE__ */ jsx9("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
           label
         ]
       })
@@ -1071,143 +930,459 @@ var Chip = forwardRef10(
 Chip.displayName = "Chip";
 
 // src/components/Dialog/Dialog.tsx
-import React2, {
+import {
+  forwardRef as forwardRef11,
+  useEffect,
+  useState as useState4
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/components/IconButton/IconButton.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var sizeClasses5 = {
+  xs: "h-24 w-24",
+  s: "h-32 w-32",
+  m: "h-40 w-40",
+  l: "h-48 w-48"
+};
+var iconSizeClasses2 = {
+  xs: "h-16 w-16",
+  s: "h-20 w-20",
+  m: "h-20 w-20",
+  l: "h-24 w-24"
+};
+var IconButton = forwardRef10(
+  (_a, ref) => {
+    var _b = _a, { icon, size = "s", danger = false, disabled = false, className = "" } = _b, rest = __objRest(_b, ["icon", "size", "danger", "disabled", "className"]);
+    const classes = [
+      "inline-flex shrink-0 items-center justify-center rounded-full transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-icon-button-border-focus",
+      sizeClasses5[size],
+      disabled ? "cursor-not-allowed text-icon-button-icon-disabled" : danger ? "cursor-pointer text-icon-button-icon-danger hover:bg-icon-button-background-hover active:bg-icon-button-background-active" : "cursor-pointer text-icon-button-icon-primary hover:bg-icon-button-background-hover active:bg-icon-button-background-active",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx10("button", __spreadProps(__spreadValues({ ref, type: "button", disabled, className: classes }, rest), { children: /* @__PURE__ */ jsx10("span", { className: `shrink-0 flex items-center justify-center ${iconSizeClasses2[size]}`, children: icon }) }));
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/Dialog/Dialog.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function CloseIcon2({ className }) {
+  return /* @__PURE__ */ jsx11("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function WarningIcon2({ className }) {
+  return /* @__PURE__ */ jsx11("svg", { className, width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("path", { d: "M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z" }) });
+}
+function useMountTransition(open, duration = 300) {
+  const [mounted, setMounted] = useState4(open);
+  const [animate, setAnimate] = useState4(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      let raf2 = 0;
+      const raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setAnimate(true));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }
+    setAnimate(false);
+    const timer = setTimeout(() => setMounted(false), duration);
+    return () => clearTimeout(timer);
+  }, [open, duration]);
+  return { mounted, animate };
+}
+function DialogAction({
+  action,
+  variant,
+  orderClass
+}) {
+  if (!action) return null;
+  const _a = action, { label, className = "" } = _a, rest = __objRest(_a, ["label", "className"]);
+  return /* @__PURE__ */ jsx11(Button, __spreadProps(__spreadValues({ variant, size: "lg", className: `w-full lg:w-auto ${orderClass} ${className}` }, rest), { children: label }));
+}
+var Dialog = forwardRef11(
+  (_a, ref) => {
+    var _b = _a, {
+      open,
+      onOpenChange,
+      display = "centered",
+      artwork,
+      title,
+      subtitle,
+      warning = false,
+      closable = true,
+      backdrop = true,
+      children,
+      dismiss,
+      secondary,
+      confirm,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "open",
+      "onOpenChange",
+      "display",
+      "artwork",
+      "title",
+      "subtitle",
+      "warning",
+      "closable",
+      "backdrop",
+      "children",
+      "dismiss",
+      "secondary",
+      "confirm",
+      "className"
+    ]);
+    const { mounted, animate } = useMountTransition(open);
+    useEffect(() => {
+      if (!open || !closable) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") onOpenChange == null ? void 0 : onOpenChange(false);
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, closable, onOpenChange]);
+    if (!mounted) return null;
+    const handleClose = () => onOpenChange == null ? void 0 : onOpenChange(false);
+    const handleBackdropMouseDown = (e) => {
+      if (closable && e.target === e.currentTarget) handleClose();
+    };
+    const showHeader = Boolean(title || subtitle || warning || closable);
+    const footerCount = [dismiss, secondary, confirm].filter(Boolean).length;
+    const showFooter = footerCount > 0;
+    const splitDismissLeft = footerCount === 3;
+    const mobileTransition = display === "centered" ? animate ? "scale-100 opacity-100" : "scale-95 opacity-0" : animate ? "translate-y-0" : "translate-y-full";
+    const desktopTransition = animate ? "lg:scale-100 lg:opacity-100 lg:translate-y-0" : "lg:scale-95 lg:opacity-0 lg:translate-y-0";
+    return createPortal(
+      /* @__PURE__ */ jsx11(
+        "div",
+        {
+          className: [
+            "fixed inset-0 z-15000 flex flex-col",
+            backdrop ? "bg-dialog-background-backdrop" : "",
+            "transition-opacity duration-300",
+            animate ? "opacity-100" : "opacity-0",
+            display === "slide-up" ? "items-center justify-end" : "",
+            display === "full" ? "items-start justify-end" : "",
+            display === "centered" ? "items-center justify-center px-24" : "",
+            "lg:items-center lg:justify-center lg:px-0"
+          ].filter(Boolean).join(" "),
+          role: "presentation",
+          onMouseDown: handleBackdropMouseDown,
+          children: /* @__PURE__ */ jsxs10(
+            "div",
+            __spreadProps(__spreadValues({
+              ref,
+              role: "dialog",
+              "aria-modal": "true",
+              className: [
+                "relative flex w-full flex-col overflow-hidden bg-dialog-background-primary",
+                display === "centered" ? "rounded-12" : "rounded-t-12",
+                "max-h-[85vh]",
+                display === "full" ? "max-w-479 flex-1" : "max-w-479",
+                "lg:min-w-0 lg:w-480 lg:max-w-480 lg:flex-none lg:rounded-16 lg:max-h-[85vh]",
+                "transition-all duration-300",
+                mobileTransition,
+                desktopTransition,
+                className
+              ].filter(Boolean).join(" "),
+              onMouseDown: (e) => e.stopPropagation()
+            }, rest), {
+              children: [
+                artwork ? /* @__PURE__ */ jsxs10("div", { className: "relative shrink-0 bg-background-tertiary", children: [
+                  closable && /* @__PURE__ */ jsx11("div", { className: "absolute right-24 top-20", children: /* @__PURE__ */ jsx11(
+                    IconButton,
+                    {
+                      icon: /* @__PURE__ */ jsx11(CloseIcon2, { className: "h-24 w-24" }),
+                      size: "m",
+                      "aria-label": "\u0E1B\u0E34\u0E14",
+                      onClick: handleClose,
+                      className: "bg-icon-button-background-dark-transparent-enabled hover:bg-icon-button-background-dark-transparent-hover active:bg-icon-button-background-dark-transparent-active text-icon-button-icon-inverse!"
+                    }
+                  ) }),
+                  artwork
+                ] }) : null,
+                showHeader && /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center gap-8 bg-dialog-background-primary px-16 pb-12 pt-16 lg:px-24 lg:pb-12 lg:pt-20", children: [
+                  /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 items-start gap-8", children: [
+                    warning && /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center pt-2", children: /* @__PURE__ */ jsx11(WarningIcon2, { className: "h-20 w-20 text-dialog-icon-warning lg:h-24 lg:w-24" }) }),
+                    /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                      title && /* @__PURE__ */ jsx11("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
+                      subtitle && !artwork && /* @__PURE__ */ jsx11("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
+                    ] })
+                  ] }),
+                  closable && !artwork && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+                    /* @__PURE__ */ jsx11(
+                      IconButton,
+                      {
+                        icon: /* @__PURE__ */ jsx11(CloseIcon2, { className: "h-20 w-20" }),
+                        size: "s",
+                        "aria-label": "\u0E1B\u0E34\u0E14",
+                        onClick: handleClose,
+                        className: "bg-icon-button-background-enabled lg:hidden!"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      IconButton,
+                      {
+                        icon: /* @__PURE__ */ jsx11(CloseIcon2, { className: "h-24 w-24" }),
+                        size: "m",
+                        "aria-label": "\u0E1B\u0E34\u0E14",
+                        onClick: handleClose,
+                        className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx11("div", { className: "flex-1 overflow-y-auto bg-dialog-background-primary px-16 py-12 text-body-small text-dialog-text-primary lg:px-24 lg:text-body-regular", children }),
+                showFooter && /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 flex-col gap-8 bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end lg:px-24 lg:pb-24", children: [
+                  /* @__PURE__ */ jsx11(
+                    DialogAction,
+                    {
+                      action: dismiss,
+                      variant: "tertiary",
+                      orderClass: `order-3 lg:order-1 ${splitDismissLeft ? "lg:mr-auto" : ""}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx11(DialogAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
+                  /* @__PURE__ */ jsx11(DialogAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" })
+                ] })
+              ]
+            })
+          )
+        }
+      ),
+      document.body
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+
+// src/components/Drawer/Drawer.tsx
+import {
+  forwardRef as forwardRef12,
   useEffect as useEffect2,
-  useState as useState5,
-  useCallback as useCallback3,
-  forwardRef as forwardRef11
+  useState as useState5
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var Dialog = forwardRef11(
-  ({
-    isForceOpen = false,
-    setIsForceOpen,
-    isClosedAble = true,
-    isCloseIcon = true,
-    children,
-    startModalBtn,
-    stopModalBtn,
-    afterStopBtn,
-    p = "20",
-    maxW = "md"
-  }, ref) => {
-    const [isOpen, setIsOpen] = useState5(false);
-    const [isRender, setIsRender] = useState5(false);
-    const [animate, setAnimate] = useState5(false);
-    useEffect2(() => {
-      if (isOpen) {
-        setIsRender(true);
-        setTimeout(() => setAnimate(true), 10);
-      } else {
-        setAnimate(false);
-        const timer = setTimeout(() => setIsRender(false), 300);
-        return () => clearTimeout(timer);
-      }
-    }, [isOpen]);
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function CloseIcon3({ className }) {
+  return /* @__PURE__ */ jsx12("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function useMountTransition2(open, duration = 300) {
+  const [mounted, setMounted] = useState5(open);
+  const [animate, setAnimate] = useState5(open);
+  useEffect2(() => {
+    if (open) {
+      setMounted(true);
+      let raf2 = 0;
+      const raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setAnimate(true));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }
+    setAnimate(false);
+    const timer = setTimeout(() => setMounted(false), duration);
+    return () => clearTimeout(timer);
+  }, [open, duration]);
+  return { mounted, animate };
+}
+function DrawerAction({
+  action,
+  variant,
+  orderClass
+}) {
+  if (!action) return null;
+  const _a = action, { label, className = "" } = _a, rest = __objRest(_a, ["label", "className"]);
+  return /* @__PURE__ */ jsx12(
+    Button,
+    __spreadProps(__spreadValues({
+      variant,
+      size: "lg",
+      className: `w-full lg:w-auto ${orderClass} ${className}`
+    }, rest), {
+      children: label
+    })
+  );
+}
+var Drawer = forwardRef12(
+  (_a, ref) => {
+    var _b = _a, {
+      open,
+      onOpenChange,
+      title,
+      subtitle,
+      closable = true,
+      backdrop = true,
+      fullScreen = false,
+      header,
+      background = "primary",
+      children,
+      dismiss,
+      secondary,
+      confirm,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "open",
+      "onOpenChange",
+      "title",
+      "subtitle",
+      "closable",
+      "backdrop",
+      "fullScreen",
+      "header",
+      "background",
+      "children",
+      "dismiss",
+      "secondary",
+      "confirm",
+      "className"
+    ]);
+    const { mounted, animate } = useMountTransition2(open);
     useEffect2(() => {
-      if (isForceOpen) {
-        setIsOpen(true);
-      } else {
-        setIsOpen(false);
-      }
-    }, [isForceOpen]);
-    const handleStartClick = useCallback3(
-      (e) => {
-        var _a, _b;
-        (_b = startModalBtn == null ? void 0 : (_a = startModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
-        setIsForceOpen == null ? void 0 : setIsForceOpen(true);
-        setIsOpen(true);
-      },
-      [startModalBtn]
-    );
-    const handleStopClick = useCallback3(
-      (e) => {
-        var _a, _b;
-        (_b = stopModalBtn == null ? void 0 : (_a = stopModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
-        setIsForceOpen == null ? void 0 : setIsForceOpen(false);
-        setIsOpen(false);
-      },
-      [stopModalBtn]
-    );
-    const handleCloseClick = () => {
-      setIsForceOpen == null ? void 0 : setIsForceOpen(false);
-      setIsOpen(false);
+      if (!open || !closable) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") onOpenChange == null ? void 0 : onOpenChange(false);
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [open, closable, onOpenChange]);
+    if (!mounted) return null;
+    const handleClose = () => onOpenChange == null ? void 0 : onOpenChange(false);
+    const handleBackdropMouseDown = (e) => {
+      if (closable && e.target === e.currentTarget) handleClose();
     };
-    return /* @__PURE__ */ jsxs11("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && React2.cloneElement(startModalBtn, {
-        onClick: handleStartClick
-      }),
-      isRender && createPortal2(
-        /* @__PURE__ */ jsxs11(
-          "div",
-          {
-            className: `fixed inset-0 z-15000 flex items-center justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
-            "aria-modal": "true",
-            role: "dialog",
-            children: [
-              /* @__PURE__ */ jsx11(
-                "div",
-                {
-                  className: "absolute inset-0 bg-black/40",
-                  onClick: () => isClosedAble ? handleCloseClick() : null,
-                  "aria-label": "Close modal"
-                }
-              ),
-              /* @__PURE__ */ jsxs11(
-                "div",
-                {
-                  className: `relative z-10 w-[calc(100%-40px)] max-w-${maxW} rounded-xl bg-white p-${p || "20"} shadow-lg transform transition-all duration-300 ${animate ? "scale-100 opacity-100" : "scale-95 opacity-0"}`,
-                  children: [
-                    isCloseIcon && /* @__PURE__ */ jsx11(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "20",
-                        height: "20",
-                        viewBox: "0 0 20 20",
-                        fill: "none",
-                        className: "text-gray-900 flex h-20 w-20 items-center justify-center absolute right-16 top-16 cursor-pointer",
-                        onMouseDown: (e) => {
-                          e.preventDefault();
-                          handleCloseClick();
-                        },
-                        children: /* @__PURE__ */ jsx11(
-                          "path",
+    const showHeader = header != null ? header : Boolean(title || subtitle || closable);
+    const showFooter = Boolean(dismiss || secondary || confirm);
+    const allActions = Boolean(dismiss && secondary && confirm);
+    return createPortal2(
+      /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: [
+            "fixed inset-0 z-15000 flex flex-col items-end justify-center",
+            backdrop ? "bg-dialog-background-backdrop" : "",
+            "transition-opacity duration-300",
+            animate ? "opacity-100" : "opacity-0"
+          ].filter(Boolean).join(" "),
+          role: "presentation",
+          onMouseDown: handleBackdropMouseDown,
+          children: /* @__PURE__ */ jsxs11(
+            "div",
+            __spreadProps(__spreadValues({
+              ref,
+              role: "dialog",
+              "aria-modal": "true",
+              className: [
+                "relative flex h-full w-full flex-col overflow-hidden bg-dialog-background-primary",
+                "transition-transform duration-300",
+                animate ? "translate-y-0" : "translate-y-full",
+                fullScreen ? "" : [
+                  "lg:translate-y-0",
+                  animate ? "lg:translate-x-0" : "lg:translate-x-full"
+                ].join(" "),
+                fullScreen ? "lg:w-full" : "lg:w-480 lg:min-w-480 lg:max-w-640",
+                className
+              ].filter(Boolean).join(" "),
+              onMouseDown: (e) => e.stopPropagation()
+            }, rest), {
+              children: [
+                showHeader && /* @__PURE__ */ jsxs11(
+                  "div",
+                  {
+                    className: [
+                      "flex shrink-0 items-center gap-8 border-b border-border-subtle bg-dialog-background-primary px-16 pb-12 pt-16",
+                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-16 lg:pt-20"
+                    ].join(" "),
+                    children: [
+                      /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+                        title && /* @__PURE__ */ jsx12("p", { className: "text-heading-3 text-dialog-text-primary lg:text-heading-3-md", children: title }),
+                        subtitle && /* @__PURE__ */ jsx12("p", { className: "text-body-small text-dialog-text-secondary", children: subtitle })
+                      ] }),
+                      closable && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                        /* @__PURE__ */ jsx12(
+                          IconButton,
                           {
-                            d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
-                            fill: "#111827"
+                            icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-20 w-20" }),
+                            size: "s",
+                            "aria-label": "\u0E1B\u0E34\u0E14",
+                            onClick: handleClose,
+                            className: "bg-icon-button-background-enabled lg:hidden!"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx12(
+                          IconButton,
+                          {
+                            icon: /* @__PURE__ */ jsx12(CloseIcon3, { className: "h-24 w-24" }),
+                            size: fullScreen ? "l" : "m",
+                            "aria-label": "\u0E1B\u0E34\u0E14",
+                            onClick: handleClose,
+                            className: "hidden! bg-icon-button-background-enabled lg:inline-flex!"
                           }
                         )
-                      }
-                    ),
-                    children,
-                    stopModalBtn && React2.cloneElement(stopModalBtn, {
-                      onClick: handleStopClick
-                    }),
-                    afterStopBtn && afterStopBtn
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        document.body
-      )
-    ] });
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx12(
+                  "div",
+                  {
+                    className: [
+                      "flex-1 overflow-y-auto p-16 text-body-regular text-dialog-text-primary",
+                      background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary",
+                      fullScreen ? "lg:px-112 lg:py-24" : "lg:p-24"
+                    ].join(" "),
+                    children
+                  }
+                ),
+                showFooter && /* @__PURE__ */ jsx12(
+                  "div",
+                  {
+                    className: [
+                      "flex shrink-0 flex-col gap-8 border-t border-border-subtle bg-dialog-background-primary px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
+                      fullScreen ? "lg:gap-16 lg:px-112 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
+                    ].join(" "),
+                    children: allActions ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
+                      /* @__PURE__ */ jsxs11("div", { className: "contents gap-8 lg:order-2 lg:ml-auto lg:flex lg:items-center", children: [
+                        /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1" }),
+                        /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2" })
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                      /* @__PURE__ */ jsx12(DrawerAction, { action: secondary, variant: "secondary", orderClass: "order-1 lg:order-2" }),
+                      /* @__PURE__ */ jsx12(DrawerAction, { action: confirm, variant: "primary", orderClass: "order-2 lg:order-3" }),
+                      /* @__PURE__ */ jsx12(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
+                    ] })
+                  }
+                )
+              ]
+            })
+          )
+        }
+      ),
+      document.body
+    );
   }
 );
-Dialog.displayName = "Dialog";
+Drawer.displayName = "Drawer";
 
 // src/components/Dropdown/Dropdown.tsx
 import {
-  useState as useState6,
-  useRef,
   useEffect as useEffect3,
-  forwardRef as forwardRef12
+  useId as useId3,
+  useRef,
+  useState as useState6,
+  forwardRef as forwardRef13
 } from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var IconDanger = () => /* @__PURE__ */ jsx12(
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var IconDanger = () => /* @__PURE__ */ jsx13(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1215,7 +1390,7 @@ var IconDanger = () => /* @__PURE__ */ jsx12(
     height: "20",
     viewBox: "0 0 20 20",
     fill: "none",
-    children: /* @__PURE__ */ jsx12(
+    children: /* @__PURE__ */ jsx13(
       "path",
       {
         d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
@@ -1225,7 +1400,7 @@ var IconDanger = () => /* @__PURE__ */ jsx12(
   }
 );
 function IconCheck({ className }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1234,7 +1409,7 @@ function IconCheck({ className }) {
       viewBox: "0 0 20 20",
       fill: "none",
       className,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "path",
         {
           d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
@@ -1245,7 +1420,7 @@ function IconCheck({ className }) {
   );
 }
 function ChevronDown({ className }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1254,7 +1429,7 @@ function ChevronDown({ className }) {
       viewBox: "0 0 20 20",
       fill: "none",
       className,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx13(
         "path",
         {
           d: "M14.7119 8.0625L10 12.7744L5.28809 8.0625L6.0625 7.28809L10 11.2256L13.9375 7.28809L14.7119 8.0625Z",
@@ -1264,16 +1439,17 @@ function ChevronDown({ className }) {
     }
   );
 }
-var Dropdown = forwardRef12(
+var Dropdown = forwardRef13(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
+      variant = "default",
       error,
       label,
       placeholder,
-      isDisabled = false,
-      isSearchable = false,
-      isTextCenter = false,
+      helperText,
+      disabled = false,
+      textCenter = false,
       value,
       setValue,
       dropDownItems = [
@@ -1286,168 +1462,248 @@ var Dropdown = forwardRef12(
       className = ""
     } = _b, rest = __objRest(_b, [
       "size",
+      "variant",
       "error",
       "label",
       "placeholder",
-      "isDisabled",
-      "isSearchable",
-      "isTextCenter",
+      "helperText",
+      "disabled",
+      "textCenter",
       "value",
       "setValue",
       "dropDownItems",
       "className"
     ]);
+    const isCombobox = variant === "combobox";
+    const iconButtonSize = size === "lg" ? "m" : "s";
     const [isOpen, setIsOpen] = useState6(false);
-    const [search, setSearch] = useState6("");
+    const [isFocused, setIsFocused] = useState6(false);
+    const [query, setQuery] = useState6(value.label || "");
+    const [filterText, setFilterText] = useState6("");
     const dropdownRef = useRef(null);
-    const filteredItems = dropDownItems.filter(
-      (item) => item.label.toLowerCase().includes(search.toLowerCase())
-    );
+    const inputRef = useRef(null);
+    const listboxId = useId3();
+    const [prevLabel, setPrevLabel] = useState6(value.label);
+    if (value.label !== prevLabel) {
+      setPrevLabel(value.label);
+      setQuery(value.label || "");
+    }
+    const filteredItems = isCombobox ? dropDownItems.filter(
+      (item) => item.label.toLowerCase().includes(filterText.toLowerCase())
+    ) : dropDownItems;
     useEffect3(() => {
       function handleClickOutside(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
           setIsOpen(false);
+          if (isCombobox) setQuery(value.label || "");
         }
       }
       document.addEventListener("mousedown", handleClickOutside);
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
       };
-    }, []);
-    return /* @__PURE__ */ jsxs12("div", { className: "w-full", children: [
-      label ? /* @__PURE__ */ jsx12(
+    }, [isCombobox, value.label]);
+    const triggerClassName = `w-full rounded-6 text-body-small px-16 inline-flex gap-8 items-center border
+      ${size === "lg" ? "h-48 py-16" : "h-40 py-12"}
+      ${!isCombobox ? disabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer" : ""}
+      ${disabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "bg-dropdown-background-enabled border-dropdown-border-danger ring-1 ring-inset ring-dropdown-border-danger" : isOpen ? "bg-dropdown-background-enabled border-dropdown-border-active ring-1 ring-inset ring-dropdown-border-active" : isFocused ? "bg-dropdown-background-enabled border-dropdown-border-focus ring-1 ring-inset ring-dropdown-border-focus" : "bg-dropdown-background-enabled border-dropdown-border-enabled hover:border-dropdown-border-hover"}
+      ${className}`;
+    return /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
+      label ? /* @__PURE__ */ jsx13(
         "p",
         {
-          className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
+          className: `text-label-medium text-left items-left font-medium ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
           children: label
         }
-      ) : /* @__PURE__ */ jsx12(Fragment2, {}),
+      ) : /* @__PURE__ */ jsx13(Fragment4, {}),
       /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
-        /* @__PURE__ */ jsxs12(
+        isCombobox ? /* @__PURE__ */ jsxs12(
           "div",
           __spreadProps(__spreadValues({
             ref
           }, rest), {
-            onClick: () => !isDisabled && setIsOpen(!isOpen),
-            className: `w-full rounded-md text-body-small px-16  text-center inline-flex gap-8 items-center border **:focus:outline-none focus:border-2 focus:px-15 focus:py-9
-            ${size === "lg" ? "py-12" : "py-8"}
-            ${isDisabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer"}
-            ${isDisabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "border-red-600 bg-dropdown-background-enabled focus:border-red-600" : value ? "text-dropdown-text-primary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active " : "text-dropdown-text-secondary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active "}
-            ${className}`,
+            onClick: () => {
+              var _a2;
+              return !disabled && ((_a2 = inputRef.current) == null ? void 0 : _a2.focus());
+            },
+            className: triggerClassName,
             children: [
-              /* @__PURE__ */ jsx12(
-                "p",
+              /* @__PURE__ */ jsx13(
+                "input",
                 {
-                  className: `grow truncate ${isTextCenter ? "text-center" : "text-start"}`,
-                  children: value.label || placeholder
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": isOpen,
+                  "aria-controls": listboxId,
+                  disabled,
+                  placeholder,
+                  value: query,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    setFilterText(e.target.value);
+                    setIsOpen(true);
+                  },
+                  onFocus: () => {
+                    setIsFocused(true);
+                    setIsOpen(true);
+                    setFilterText("");
+                  },
+                  onBlur: () => setIsFocused(false),
+                  onKeyDown: (e) => {
+                    if (!disabled && e.key === "Escape") {
+                      setIsOpen(false);
+                      setQuery(value.label || "");
+                    }
+                  },
+                  className: `grow w-full min-w-0 bg-transparent focus:outline-none ${disabled ? "text-dropdown-text-disabled cursor-not-allowed" : "text-dropdown-text-primary cursor-text"}`
                 }
               ),
-              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-8", children: [
-                isDisabled ? /* @__PURE__ */ jsx12(Fragment2, {}) : error ? /* @__PURE__ */ jsx12(IconDanger, {}) : /* @__PURE__ */ jsx12(Fragment2, {}),
-                /* @__PURE__ */ jsx12(
-                  ChevronDown,
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4", children: [
+                disabled ? /* @__PURE__ */ jsx13(Fragment4, {}) : error ? /* @__PURE__ */ jsx13(IconDanger, {}) : /* @__PURE__ */ jsx13(Fragment4, {}),
+                /* @__PURE__ */ jsx13(
+                  IconButton,
                   {
-                    className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
+                    size: iconButtonSize,
+                    disabled,
+                    tabIndex: -1,
+                    "aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
+                    icon: /* @__PURE__ */ jsx13(
+                      ChevronDown,
+                      {
+                        className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
+                      }
+                    ),
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: (e) => {
+                      var _a2;
+                      e.stopPropagation();
+                      if (disabled) return;
+                      if (isOpen) {
+                        setIsOpen(false);
+                        setQuery(value.label || "");
+                      } else {
+                        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+                      }
+                    }
                   }
                 )
               ] })
             ]
           })
-        ),
-        /* @__PURE__ */ jsxs12(
+        ) : /* @__PURE__ */ jsxs12(
           "div",
-          {
-            id: "dropdownSearch",
-            className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-8 absolute z-10000 bg-white-100 rounded-lg shadow-base w-9/10 min-w-fit flex-col`,
+          __spreadProps(__spreadValues({
+            ref
+          }, rest), {
+            tabIndex: disabled ? -1 : 0,
+            role: "button",
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            onFocus: (e) => {
+              var _a2;
+              setIsFocused(true);
+              (_a2 = rest.onFocus) == null ? void 0 : _a2.call(rest, e);
+            },
+            onBlur: (e) => {
+              var _a2;
+              setIsFocused(false);
+              (_a2 = rest.onBlur) == null ? void 0 : _a2.call(rest, e);
+            },
+            onKeyDown: (e) => {
+              var _a2;
+              if (disabled) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setIsOpen((prev) => !prev);
+              } else if (e.key === "Escape") {
+                setIsOpen(false);
+              }
+              (_a2 = rest.onKeyDown) == null ? void 0 : _a2.call(rest, e);
+            },
+            className: `focus:outline-none ${triggerClassName}`,
             children: [
-              isSearchable ? /* @__PURE__ */ jsxs12("div", { className: "p-3", children: [
-                /* @__PURE__ */ jsx12("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
-                /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ jsxs12(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "20",
-                      height: "20",
-                      viewBox: "0 0 20 20",
-                      fill: "none",
-                      children: [
-                        /* @__PURE__ */ jsx12(
-                          "mask",
-                          {
-                            id: "mask0_3218_5077",
-                            style: { maskType: "alpha" },
-                            maskUnits: "userSpaceOnUse",
-                            x: "0",
-                            y: "0",
-                            width: "20",
-                            height: "20",
-                            children: /* @__PURE__ */ jsx12("rect", { width: "20", height: "20", fill: "#D9D9D9" })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx12("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ jsx12(
-                          "path",
-                          {
-                            d: "M15.8894 16.6476L10.9263 11.6842C10.5096 12.0005 10.0527 12.2454 9.55563 12.419C9.05855 12.5926 8.54556 12.6794 8.01667 12.6794C6.7182 12.6794 5.61354 12.2241 4.70271 11.3134C3.79202 10.4026 3.33667 9.29811 3.33667 8.00005C3.33667 6.702 3.79202 5.59755 4.70271 4.68672C5.61354 3.77603 6.71799 3.32068 8.01604 3.32068C9.3141 3.32068 10.4185 3.77603 11.3294 4.68672C12.2401 5.59755 12.6954 6.70221 12.6954 8.00068C12.6954 8.54554 12.606 9.06651 12.4271 9.56359C12.2481 10.0608 12.0058 10.5097 11.7002 10.9103L16.6633 15.8734L15.8894 16.6476ZM8.01604 11.5963C9.02035 11.5963 9.87077 11.248 10.5673 10.5513C11.264 9.85478 11.6123 9.00436 11.6123 8.00005C11.6123 6.99575 11.264 6.14533 10.5673 5.4488C9.87077 4.75214 9.02035 4.4038 8.01604 4.4038C7.01174 4.4038 6.16132 4.75214 5.46479 5.4488C4.76813 6.14533 4.41979 6.99575 4.41979 8.00005C4.41979 9.00436 4.76813 9.85478 5.46479 10.5513C6.16132 11.248 7.01174 11.5963 8.01604 11.5963Z",
-                            fill: "#111827"
-                          }
-                        ) })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx12(
-                    "input",
-                    {
-                      type: "text",
-                      className: "block w-full p-8 ps-40 text-body-small text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-bubblegum focus:border-bubblegum",
-                      placeholder: "Search...",
-                      value: search,
-                      onChange: (e) => setSearch(e.target.value)
-                    }
-                  )
-                ] })
-              ] }) : /* @__PURE__ */ jsx12(Fragment2, {}),
-              /* @__PURE__ */ jsx12(
-                "ul",
+              /* @__PURE__ */ jsx13(
+                "p",
                 {
-                  className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
-                  "aria-labelledby": "dropdownSearchButton",
-                  children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs12(
-                    "div",
-                    {
-                      onClick: () => {
-                        setValue(item);
-                        setSearch("");
-                        setIsOpen(false);
-                      },
-                      className: "relative text-gray-900 py-12 px-16 rounded-sm text-label-medium hover:bg-gray-100 flex items-center justify-between gap-12",
-                      children: [
-                        /* @__PURE__ */ jsx12("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
-                        value.value === item.value && /* @__PURE__ */ jsx12(IconCheck, { className: "h-20 w-20" })
-                      ]
-                    }
-                  ) }, idx)) : /* @__PURE__ */ jsx12("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
+                  className: `grow truncate ${textCenter ? "text-center" : "text-start"}`,
+                  children: value.label || placeholder
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-4", children: [
+                disabled ? /* @__PURE__ */ jsx13(Fragment4, {}) : error ? /* @__PURE__ */ jsx13(IconDanger, {}) : /* @__PURE__ */ jsx13(Fragment4, {}),
+                /* @__PURE__ */ jsx13(
+                  IconButton,
+                  {
+                    size: iconButtonSize,
+                    disabled,
+                    tabIndex: -1,
+                    "aria-label": "\u0E40\u0E1B\u0E34\u0E14/\u0E1B\u0E34\u0E14\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E15\u0E31\u0E27\u0E40\u0E25\u0E37\u0E2D\u0E01",
+                    icon: /* @__PURE__ */ jsx13(
+                      ChevronDown,
+                      {
+                        className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
+                      }
+                    ),
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      if (!disabled) setIsOpen((prev) => !prev);
+                    }
+                  }
+                )
+              ] })
             ]
+          })
+        ),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-0 absolute z-10000 bg-dropdown-background-enabled rounded-6 shadow-base w-full flex-col pt-4 overflow-hidden`,
+            children: /* @__PURE__ */ jsx13(
+              "ul",
+              {
+                id: isCombobox ? listboxId : void 0,
+                role: isCombobox ? "listbox" : void 0,
+                className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
+                children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsxs12(
+                  "div",
+                  {
+                    onClick: () => {
+                      setValue(item);
+                      if (isCombobox) setQuery(item.label);
+                      setIsOpen(false);
+                    },
+                    className: "relative h-48 py-8 px-16 border-t border-gray-50 text-label-medium hover:bg-dropdown-background-hover active:bg-dropdown-background-active flex items-center justify-between gap-12",
+                    children: [
+                      /* @__PURE__ */ jsx13("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
+                      value.value === item.value && /* @__PURE__ */ jsx13(IconCheck, { className: "h-20 w-20" })
+                    ]
+                  }
+                ) }, idx)) : /* @__PURE__ */ jsx13("li", { className: "px-16 py-8 text-label-medium text-dropdown-text-secondary", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" })
+              }
+            )
           }
         )
       ] }),
-      error ? /* @__PURE__ */ jsx12(
+      error ? /* @__PURE__ */ jsx13("p", { className: "text-caption-caption text-left items-left text-dropdown-text-danger", children: error }) : helperText ? /* @__PURE__ */ jsx13(
         "p",
         {
-          className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
-          children: error
+          className: `text-caption-caption text-left items-left ${disabled ? "text-dropdown-text-disabled" : "text-dropdown-text-secondary"}`,
+          children: helperText
         }
-      ) : /* @__PURE__ */ jsx12(Fragment2, {})
+      ) : /* @__PURE__ */ jsx13(Fragment4, {})
     ] });
   }
 );
 Dropdown.displayName = "Dropdown";
 
 // src/components/FinancialLogo/FinancialLogo.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var inlineClasses2 = {
   info: "bg-alert-inline-info-bg border-alert-inline-info-border text-alert-text-primary",
   success: "bg-alert-inline-success-bg border-alert-inline-success-border text-alert-text-primary",
@@ -1477,34 +1733,34 @@ var inlineIconClasses2 = {
   common: "text-alert-inline-common-icon"
 };
 function InfoIcon2({ className }) {
-  return /* @__PURE__ */ jsx13("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6h.01M9 10h1v4h1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx14("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6h.01M9 10h1v4h1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function SuccessIcon2({ className }) {
   return /* @__PURE__ */ jsxs13("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx13("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx13("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    /* @__PURE__ */ jsx14("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx14("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
-function WarningIcon2({ className }) {
-  return /* @__PURE__ */ jsx13("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M8.57 3.22 1.53 15.5a1.67 1.67 0 0 0 1.43 2.5h14.08a1.67 1.67 0 0 0 1.43-2.5L11.43 3.22a1.67 1.67 0 0 0-2.86 0ZM10 7.5v3.33M10 14.17h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function WarningIcon3({ className }) {
+  return /* @__PURE__ */ jsx14("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M8.57 3.22 1.53 15.5a1.67 1.67 0 0 0 1.43 2.5h14.08a1.67 1.67 0 0 0 1.43-2.5L11.43 3.22a1.67 1.67 0 0 0-2.86 0ZM10 7.5v3.33M10 14.17h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function DangerIcon2({ className }) {
-  return /* @__PURE__ */ jsx13("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM12.5 7.5l-5 5M7.5 7.5l5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx14("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM12.5 7.5l-5 5M7.5 7.5l5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function CommonIcon({ className }) {
-  return /* @__PURE__ */ jsx13("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6v4M10 14h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx14("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6v4M10 14h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function CloseIcon2({ className }) {
-  return /* @__PURE__ */ jsx13("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function CloseIcon4({ className }) {
+  return /* @__PURE__ */ jsx14("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx14("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 var defaultIcons2 = {
   info: InfoIcon2,
   success: SuccessIcon2,
-  warning: WarningIcon2,
+  warning: WarningIcon3,
   danger: DangerIcon2,
   common: CommonIcon
 };
-var FinancialLogo = forwardRef13(
+var FinancialLogo = forwardRef14(
   (_a, ref) => {
     var _b = _a, {
       variant = "info",
@@ -1541,21 +1797,21 @@ var FinancialLogo = forwardRef13(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs13("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      /* @__PURE__ */ jsx13("span", { className: `shrink-0 mt-2 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ jsx13(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ jsx14("span", { className: `shrink-0 mt-2 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ jsx14(DefaultIcon, { className: "h-20 w-20" }) }),
       /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium leading-20", children: title }),
-        description && /* @__PURE__ */ jsx13("p", { className: `text-sm leading-20 ${descColorClass} ${title ? "mt-4" : ""}`, children: description }),
+        title && /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium leading-20", children: title }),
+        description && /* @__PURE__ */ jsx14("p", { className: `text-sm leading-20 ${descColorClass} ${title ? "mt-4" : ""}`, children: description }),
         children
       ] }),
-      action && /* @__PURE__ */ jsx13("div", { className: `${actionClass} underline text-sm font-medium`, children: action }),
-      onClose && /* @__PURE__ */ jsx13(
+      action && /* @__PURE__ */ jsx14("div", { className: `${actionClass} underline text-sm font-medium`, children: action }),
+      onClose && /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
           onClick: onClose,
           className: `shrink-0 p-2 rounded transition-colors ${closeColorClass}`,
           "aria-label": "Close",
-          children: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-16 w-16" })
+          children: /* @__PURE__ */ jsx14(CloseIcon4, { className: "h-16 w-16" })
         }
       )
     ] }));
@@ -1564,9 +1820,9 @@ var FinancialLogo = forwardRef13(
 FinancialLogo.displayName = "FinancialLogo";
 
 // src/components/Icon/Icon.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var Icon = forwardRef14(
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Icon = forwardRef15(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1594,7 +1850,7 @@ var Icon = forwardRef14(
       "material-symbols-outlined select-none shrink-0 inline-block leading-none",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "span",
       __spreadProps(__spreadValues({
         ref,
@@ -1617,8 +1873,8 @@ var Icon = forwardRef14(
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var linkStyleClasses = {
   brand: "font-sans text-link-text-enabled",
   white: "font-sans text-link-text-enabled-inverse",
@@ -1641,11 +1897,11 @@ var iconVariantClasses = {
 };
 function SuccessIcon3({ className }) {
   return /* @__PURE__ */ jsxs14("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx15("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx15("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    /* @__PURE__ */ jsx16("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx16("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
-var Link = forwardRef15(
+var Link = forwardRef16(
   (_a, ref) => {
     var _b = _a, {
       variant = "sm",
@@ -1677,8 +1933,8 @@ var Link = forwardRef15(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs14("div", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
-      /* @__PURE__ */ jsx15("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
-      icon && !isInline ? /* @__PURE__ */ jsx15(SuccessIcon3, { className: iconClass }) : null
+      /* @__PURE__ */ jsx16("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
+      icon && !isInline ? /* @__PURE__ */ jsx16(SuccessIcon3, { className: iconClass }) : null
     ] }));
   }
 );
@@ -1686,11 +1942,11 @@ Link.displayName = "Link";
 
 // src/components/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef16,
-  useId as useId3
+  forwardRef as forwardRef17,
+  useId as useId4
 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var Radio = forwardRef16(
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var Radio = forwardRef17(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -1715,9 +1971,9 @@ var Radio = forwardRef16(
       "id",
       "name"
     ]);
-    const reactId = useId3();
+    const reactId = useId4();
     const inputId = id != null ? id : reactId;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       "div",
       {
         className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
@@ -1728,7 +1984,7 @@ var Radio = forwardRef16(
             className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
             children: [
               /* @__PURE__ */ jsxs15("div", { children: [
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   "input",
                   __spreadValues({
                     ref,
@@ -1741,14 +1997,14 @@ var Radio = forwardRef16(
                     name
                   }, rest)
                 ),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx17(
                   "div",
                   {
                     className: `relative box flex items-center justify-center rounded-full border-2 group bg-white 
                 ${size === "sm" ? "h-16 w-16 my-4 ml-3 mr-3" : "m-3 h-20 w-20 text-label-large"} 
                 ${error ? "border-red-500" : "border-gray-600 peer-checked:border-blue-600 peer-disabled:border-gray-400!"}
               `,
-                    children: /* @__PURE__ */ jsx16(
+                    children: /* @__PURE__ */ jsx17(
                       "span",
                       {
                         className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
@@ -1764,7 +2020,7 @@ var Radio = forwardRef16(
                 {
                   className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
                   children: [
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx17(
                       "p",
                       {
                         className: `
@@ -1774,7 +2030,7 @@ var Radio = forwardRef16(
                         children: label
                       }
                     ),
-                    /* @__PURE__ */ jsx16(
+                    /* @__PURE__ */ jsx17(
                       "p",
                       {
                         className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
@@ -1795,19 +2051,19 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentControl/SegmentControl.tsx
 import {
-  forwardRef as forwardRef17
+  forwardRef as forwardRef18
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var SegmentControl = forwardRef17(
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SegmentControl = forwardRef18(
   (_a, ref) => {
     var _b = _a, { size = "md", items, selected, setSelected, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "className"]);
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       "div",
       __spreadProps(__spreadValues({
         ref,
         className: `bg-background-tertiary rounded-full flex flex-row items-center justify-center p-4 gap-4 ${className}`
       }, rest), {
-        children: items.map((item) => /* @__PURE__ */ jsx17(
+        children: items.map((item) => /* @__PURE__ */ jsx18(
           "div",
           {
             onClick: () => setSelected == null ? void 0 : setSelected(item.value),
@@ -1825,12 +2081,12 @@ SegmentControl.displayName = "SegmentControl";
 
 // src/components/Slider/Slider.tsx
 import {
-  forwardRef as forwardRef18,
-  useCallback as useCallback4,
-  useId as useId4,
+  forwardRef as forwardRef19,
+  useCallback as useCallback2,
+  useId as useId5,
   useState as useState8
 } from "react";
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 var sizeConfig = {
   small: {
     trackH: "h-4",
@@ -1871,7 +2127,7 @@ function ChevronGlyphs({ size, color }) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M4.75 3.25L2.25 6L4.75 8.75",
@@ -1881,7 +2137,7 @@ function ChevronGlyphs({ size, color }) {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19(
           "path",
           {
             d: "M7.25 3.25L9.75 6L7.25 8.75",
@@ -1895,7 +2151,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = forwardRef18(
+var Slider = forwardRef19(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -1930,7 +2186,7 @@ var Slider = forwardRef18(
       "onChange",
       "aria-label"
     ]);
-    const reactId = useId4();
+    const reactId = useId5();
     const inputId = id != null ? id : reactId;
     const sz = sizeConfig[size];
     const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
@@ -1938,7 +2194,7 @@ var Slider = forwardRef18(
     const isControlled = controlledValue !== void 0;
     const [internalValue, setInternalValue] = useState8(defaultValue != null ? defaultValue : min);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const handleChange = useCallback4(
+    const handleChange = useCallback2(
       (e) => {
         const val = Number(e.target.value);
         if (!isControlled) {
@@ -1964,7 +2220,7 @@ var Slider = forwardRef18(
         className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
         children: [
           (label || showValue && !disabled) && /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between", children: [
-            label && /* @__PURE__ */ jsx18(
+            label && /* @__PURE__ */ jsx19(
               "label",
               {
                 htmlFor: inputId,
@@ -1977,7 +2233,7 @@ var Slider = forwardRef18(
                 children: label
               }
             ),
-            showValue && /* @__PURE__ */ jsx18(
+            showValue && /* @__PURE__ */ jsx19(
               "span",
               {
                 className: [sz.description, "tabular-nums", labelColor].join(" "),
@@ -1994,7 +2250,7 @@ var Slider = forwardRef18(
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               ].join(" "),
               children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "div",
                   {
                     className: [
@@ -2004,14 +2260,14 @@ var Slider = forwardRef18(
                     ].join(" ")
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "div",
                   {
                     className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
                     style: { width: `calc(${percent}% + ${fillOffset}px)` }
                   }
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "input",
                   __spreadValues({
                     ref,
@@ -2032,7 +2288,7 @@ var Slider = forwardRef18(
                     ].join(" ")
                   }, rest)
                 ),
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   "div",
                   {
                     className: [
@@ -2045,13 +2301,13 @@ var Slider = forwardRef18(
                       !disabled && "peer-hover:shadow-medium"
                     ].filter(Boolean).join(" "),
                     style: { left: `calc(${percent}% - ${thumbOffset}px)` },
-                    children: /* @__PURE__ */ jsx18(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
+                    children: /* @__PURE__ */ jsx19(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
                   }
                 )
               ]
             }
           ),
-          description && /* @__PURE__ */ jsx18(
+          description && /* @__PURE__ */ jsx19(
             "span",
             {
               id: ariaDescriptionId,
@@ -2067,9 +2323,9 @@ var Slider = forwardRef18(
 Slider.displayName = "Slider";
 
 // src/components/Tab/Tab.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Tab = forwardRef19(
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Tab = forwardRef20(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -2088,7 +2344,7 @@ var Tab = forwardRef19(
       "setSelected",
       "className"
     ]);
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       "div",
       __spreadProps(__spreadValues({
         ref,
@@ -2108,140 +2364,180 @@ Tab.displayName = "Tab";
 // src/components/TextArea/TextArea.tsx
 import {
   useState as useState9,
-  forwardRef as forwardRef20
+  forwardRef as forwardRef21
 } from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var TextArea = forwardRef20(
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var TextArea = forwardRef21(
   (_a, ref) => {
     var _b = _a, {
-      maxText = 500,
-      height = 100,
       error,
       label,
       placeholder,
-      description,
-      icon,
-      isDisabled = false,
-      isLoading = false,
-      isVertify = false,
-      isClearable = true,
-      disabled,
+      helperText,
+      optional = false,
+      success = false,
+      pending = false,
+      clearable = true,
+      disabled = false,
+      showCounter = true,
+      maxLength = 500,
+      height = 100,
       value,
-      onChange
+      onChange,
+      onFocus,
+      onBlur,
+      className
     } = _b, props = __objRest(_b, [
-      "maxText",
-      "height",
       "error",
       "label",
       "placeholder",
-      "description",
-      "icon",
-      "isDisabled",
-      "isLoading",
-      "isVertify",
-      "isClearable",
+      "helperText",
+      "optional",
+      "success",
+      "pending",
+      "clearable",
       "disabled",
+      "showCounter",
+      "maxLength",
+      "height",
       "value",
-      "onChange"
+      "onChange",
+      "onFocus",
+      "onBlur",
+      "className"
     ]);
+    var _a2;
     const [isFocused, setIsFocused] = useState9(false);
-    return /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs17("div", { className: "w-full flex justify-between items-center ", children: [
-        label ? /* @__PURE__ */ jsx20(
+    const isActive = isFocused && !!value;
+    return /* @__PURE__ */ jsxs17("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
+      label || showCounter ? /* @__PURE__ */ jsxs17("div", { className: "w-full flex justify-between items-center gap-8", children: [
+        label ? /* @__PURE__ */ jsxs17(
           "p",
           {
-            className: `text-label-medium text-left items-left ${isDisabled || disabled ? "text-gray-400" : "text-gray-900"}`,
-            children: label
+            className: `text-label-medium text-left items-left flex gap-4 ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-primary"}`,
+            children: [
+              label,
+              optional && /* @__PURE__ */ jsx21("span", { className: "text-text-area-text-secondary", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
+            ]
           }
-        ) : /* @__PURE__ */ jsx20(Fragment3, {}),
-        maxText ? /* @__PURE__ */ jsxs17("p", { className: "text-gray-400 text-caption-caption", children: [
-          " ",
-          (value == null ? void 0 : value.length) || 0,
-          " / ",
-          maxText
-        ] }) : /* @__PURE__ */ jsx20(Fragment3, {})
-      ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ jsx20(
-          "textarea",
-          __spreadValues({
-            ref,
-            name: "text-input",
-            placeholder,
-            disabled: isDisabled || disabled || isLoading,
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-            value,
-            onChange,
-            className: `w-full min-h-${height} focus:min-h-${height - 2} pt-12 pb-8 pr-44 pl-16 focus:pt-11 focus:pb-7 focus:pr-43 focus:pl-15 border border-gray-300 text-base rounded-md focus:outline-none focus:ring-1 focus:m-1 focus:w-[calc(100%-2px)] ${isDisabled || disabled ? "bg-gray-50 text-gray-400" : error ? "bg-white text-gray-900 border-red-500 focus:border-red-500 focus:ring-red-500" : "bg-white text-gray-900 focus:border-blue-600 focus:ring-blue-600"}`
-          }, props)
-        ),
-        isLoading ? /* @__PURE__ */ jsx20(
-          Loading,
+        ) : /* @__PURE__ */ jsx21("span", {}),
+        showCounter && /* @__PURE__ */ jsxs17(
+          "p",
           {
-            size: "sm",
-            className: `absolute right-12 top-12`
+            className: `shrink-0 text-caption-caption ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-tertiary"}`,
+            children: [
+              (_a2 = value == null ? void 0 : value.length) != null ? _a2 : 0,
+              "/",
+              maxLength
+            ]
           }
-        ) : isClearable && isFocused && value ? /* @__PURE__ */ jsx20(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-gray-900 flex h-20 w-20 items-center justify-center absolute right-12 top-12",
-            onMouseDown: (e) => {
-              e.preventDefault();
-              onChange == null ? void 0 : onChange({ target: { value: "" } });
-            },
-            children: /* @__PURE__ */ jsx20(
-              "path",
+        )
+      ] }) : /* @__PURE__ */ jsx21(Fragment5, {}),
+      /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: `relative w-full rounded-6 border ${disabled ? "bg-text-area-background-disabled border-text-area-border-disabled" : error ? `bg-text-area-background-enabled border-text-area-border-danger ${isFocused ? "ring-1 ring-inset ring-text-area-border-danger" : ""}` : isActive ? "bg-text-area-background-enabled border-text-area-border-active ring-1 ring-inset ring-text-area-border-active" : isFocused ? "bg-text-area-background-enabled border-text-area-border-focus ring-1 ring-inset ring-text-area-border-focus" : "bg-text-area-background-enabled border-text-area-border-enabled hover:border-text-area-border-hover"} ${className != null ? className : ""}`,
+          children: [
+            /* @__PURE__ */ jsx21(
+              "textarea",
+              __spreadValues({
+                ref,
+                placeholder,
+                disabled: disabled || pending,
+                maxLength,
+                style: { height },
+                onFocus: (e) => {
+                  setIsFocused(true);
+                  onFocus == null ? void 0 : onFocus(e);
+                },
+                onBlur: (e) => {
+                  setIsFocused(false);
+                  onBlur == null ? void 0 : onBlur(e);
+                },
+                value,
+                onChange,
+                className: `block w-full min-w-0 pt-12 pb-8 pl-16 pr-48 text-body-small bg-transparent focus:outline-none placeholder:text-text-area-text-tertiary ${disabled ? "resize-none text-text-area-text-disabled" : "resize-y text-text-area-text-primary"}`
+              }, props)
+            ),
+            pending ? /* @__PURE__ */ jsx21(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ jsx21(
+              IconButton,
               {
-                d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
-                fill: "#111827"
+                size: "s",
+                "aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
+                className: "absolute right-6 top-6",
+                icon: /* @__PURE__ */ jsx21(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    children: /* @__PURE__ */ jsx21(
+                      "path",
+                      {
+                        d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
+                        fill: "currentColor"
+                      }
+                    )
+                  }
+                ),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                },
+                onClick: () => {
+                  onChange == null ? void 0 : onChange({
+                    target: { value: "" }
+                  });
+                }
               }
-            )
-          }
-        ) : isVertify ? /* @__PURE__ */ jsx20(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-green-600 flex h-20 w-20 items-center justify-center absolute right-12 top-12",
-            children: /* @__PURE__ */ jsx20(
-              "path",
+            ) : success ? /* @__PURE__ */ jsx21(
+              "svg",
               {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
-                fill: "#16A34A"
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 20 20",
+                fill: "none",
+                className: "shrink-0 text-accent-success flex h-20 w-20 items-center justify-center absolute right-12 top-12",
+                children: /* @__PURE__ */ jsx21(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    clipRule: "evenodd",
+                    d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
+                    fill: "currentColor"
+                  }
+                )
               }
-            )
-          }
-        ) : error ? /* @__PURE__ */ jsx20(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-red-500 flex h-20 w-20 items-center justify-center absolute right-12 top-12",
-            children: /* @__PURE__ */ jsx20(
-              "path",
+            ) : error ? /* @__PURE__ */ jsx21(
+              "svg",
               {
-                d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
-                fill: "#EF4444"
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "20",
+                height: "20",
+                viewBox: "0 0 20 20",
+                fill: "none",
+                className: "shrink-0 text-text-area-text-danger flex h-20 w-20 items-center justify-center absolute right-12 top-12",
+                children: /* @__PURE__ */ jsx21(
+                  "path",
+                  {
+                    d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
+                    fill: "currentColor"
+                  }
+                )
               }
-            )
-          }
-        ) : /* @__PURE__ */ jsx20(Fragment3, {})
-      ] }),
-      error ? /* @__PURE__ */ jsx20("p", { className: "text-caption-caption text-left items-left text-red-600", children: error }) : description ? /* @__PURE__ */ jsx20("p", { className: "text-caption-caption text-left items-left text-gray-600", children: description }) : /* @__PURE__ */ jsx20(Fragment3, {})
+            ) : /* @__PURE__ */ jsx21(Fragment5, {})
+          ]
+        }
+      ),
+      error ? /* @__PURE__ */ jsx21("p", { className: "text-caption-caption text-left items-left text-text-area-text-danger", children: error }) : helperText ? /* @__PURE__ */ jsx21(
+        "p",
+        {
+          className: `text-caption-caption text-left items-left ${disabled ? "text-text-area-text-disabled" : "text-text-area-text-secondary"}`,
+          children: helperText
+        }
+      ) : /* @__PURE__ */ jsx21(Fragment5, {})
     ] });
   }
 );
@@ -2250,164 +2546,223 @@ TextArea.displayName = "TextArea";
 // src/components/TextField/TextField.tsx
 import {
   useState as useState10,
-  forwardRef as forwardRef21
+  useRef as useRef2,
+  useImperativeHandle,
+  forwardRef as forwardRef22
 } from "react";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var TextField = forwardRef21(
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var TextField = forwardRef22(
   (_a, ref) => {
     var _b = _a, {
-      inputSize,
+      size = "md",
       error,
       label,
       placeholder,
-      description,
-      icon,
-      isDisabled = false,
-      isLoading = false,
-      isVertify = false,
-      isUnrequired = false,
-      isClearable = true,
-      disabled,
+      helperText,
+      prefix,
+      suffix,
+      optional = false,
+      success = false,
+      pending = false,
+      clearable = true,
+      disabled = false,
       type,
       value,
-      onChange
+      onChange,
+      onFocus,
+      onBlur,
+      className
     } = _b, props = __objRest(_b, [
-      "inputSize",
+      "size",
       "error",
       "label",
       "placeholder",
-      "description",
-      "icon",
-      "isDisabled",
-      "isLoading",
-      "isVertify",
-      "isUnrequired",
-      "isClearable",
+      "helperText",
+      "prefix",
+      "suffix",
+      "optional",
+      "success",
+      "pending",
+      "clearable",
       "disabled",
       "type",
       "value",
-      "onChange"
+      "onChange",
+      "onFocus",
+      "onBlur",
+      "className"
     ]);
     const [isFocused, setIsFocused] = useState10(false);
-    return /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-col gap-4", children: [
+    const isActive = isFocused && !!value;
+    const iconButtonSize = size === "lg" ? "m" : "s";
+    const inputRef = useRef2(null);
+    useImperativeHandle(ref, () => inputRef.current);
+    return /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
       label ? /* @__PURE__ */ jsxs18(
         "p",
         {
-          className: `text-label-medium text-left items-left ${isDisabled || disabled ? "text-gray-400" : "text-gray-900"}`,
+          className: `text-label-medium text-left items-left flex gap-4 ${disabled ? "text-text-field-text-disabled" : "text-text-field-text-primary"}`,
           children: [
             label,
-            " ",
-            isUnrequired && /* @__PURE__ */ jsx21("span", { className: "text-gray-400", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
+            optional && /* @__PURE__ */ jsx22("span", { className: "text-text-field-text-secondary", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
           ]
         }
-      ) : /* @__PURE__ */ jsx21(Fragment4, {}),
-      /* @__PURE__ */ jsxs18("div", { className: "relative w-full", children: [
-        icon && icon,
-        /* @__PURE__ */ jsx21(
-          "input",
-          __spreadValues({
-            ref,
-            type: type || "text",
-            placeholder,
-            disabled: isDisabled || disabled || isLoading,
-            onFocus: () => setIsFocused(true),
-            onBlur: () => setIsFocused(false),
-            value,
-            onChange,
-            className: `w-full ${icon ? "pl-40 focus:pl-39" : "pl-16 focus:pl-15"} pr-16 focus:pr-15 ${inputSize === "md" ? "py-8 focus:py-7" : "py-12 focus:py-11"} border border-gray-300 text-base rounded-md focus:outline-none focus:ring-1 focus:m-1 focus:w-[calc(100%-2px)] ${isDisabled || disabled ? "bg-gray-50 text-gray-400" : error ? "bg-white text-gray-900 border-red-500 focus:border-red-500 focus:ring-red-500" : "bg-white text-gray-900 focus:border-blue-600 focus:ring-blue-600"}`
-          }, props)
-        ),
-        isLoading ? /* @__PURE__ */ jsx21(
-          Loading,
-          {
-            size: "sm",
-            className: `absolute right-16 top-1/2 -translate-y-1/2`
-          }
-        ) : isClearable && isFocused && value ? /* @__PURE__ */ jsx21(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-gray-900 flex h-20 w-20 items-center justify-center absolute right-16 top-1/2 -translate-y-1/2",
-            onMouseDown: (e) => {
+      ) : /* @__PURE__ */ jsx22(Fragment6, {}),
+      /* @__PURE__ */ jsxs18(
+        "div",
+        {
+          className: `flex items-center gap-8 w-full rounded-6 border ${size === "lg" ? "h-48 py-16" : "h-40 py-12"} px-16 ${disabled ? "cursor-not-allowed" : "cursor-text"} ${disabled ? "bg-text-field-background-disabled border-text-field-border-disabled" : error ? `bg-text-field-background-enabled border-text-field-border-danger ${isFocused ? "ring-1 ring-inset ring-text-field-border-danger" : ""}` : isActive ? "bg-text-field-background-enabled border-text-field-border-active ring-1 ring-inset ring-text-field-border-active" : isFocused ? "bg-text-field-background-enabled border-text-field-border-focus ring-1 ring-inset ring-text-field-border-focus" : "bg-text-field-background-enabled border-text-field-border-enabled hover:border-text-field-border-hover"} ${className != null ? className : ""}`,
+          onMouseDown: (e) => {
+            var _a2;
+            if (e.target !== inputRef.current && !disabled) {
               e.preventDefault();
-              onChange == null ? void 0 : onChange({ target: { value: "" } });
-            },
-            children: /* @__PURE__ */ jsx21(
-              "path",
+              (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+            }
+          },
+          children: [
+            prefix && /* @__PURE__ */ jsx22(
+              "span",
               {
-                d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
-                fill: "#111827"
+                className: `shrink-0 ${disabled ? "text-static-icon-disabled" : "text-static-icon-primary"}`,
+                children: prefix
               }
-            )
-          }
-        ) : isVertify ? /* @__PURE__ */ jsx21(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-green-600 flex h-20 w-20 items-center justify-center absolute right-16 top-1/2 -translate-y-1/2",
-            children: /* @__PURE__ */ jsx21(
-              "path",
+            ),
+            /* @__PURE__ */ jsx22(
+              "input",
+              __spreadValues({
+                ref: inputRef,
+                type: type || "text",
+                placeholder,
+                disabled: disabled || pending,
+                onFocus: (e) => {
+                  setIsFocused(true);
+                  onFocus == null ? void 0 : onFocus(e);
+                },
+                onBlur: (e) => {
+                  setIsFocused(false);
+                  onBlur == null ? void 0 : onBlur(e);
+                },
+                value,
+                onChange,
+                className: `w-full min-w-0 text-body-small bg-transparent focus:outline-none placeholder:text-text-field-text-tertiary ${disabled ? "text-text-field-text-disabled" : "text-text-field-text-primary"}`
+              }, props)
+            ),
+            suffix && /* @__PURE__ */ jsx22(
+              "span",
               {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
-                fill: "#16A34A"
+                className: `shrink-0 ${disabled ? "text-static-icon-disabled" : "text-static-icon-primary"}`,
+                children: suffix
               }
-            )
-          }
-        ) : error ? /* @__PURE__ */ jsx21(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            fill: "none",
-            className: "text-red-500 flex h-20 w-20 items-center justify-center absolute right-16 top-1/2 -translate-y-1/2",
-            children: /* @__PURE__ */ jsx21(
-              "path",
+            ),
+            (pending || clearable || success || error) && /* @__PURE__ */ jsx22(
+              "span",
               {
-                d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
-                fill: "#EF4444"
+                className: `shrink-0 flex items-center justify-center ${size === "lg" ? "h-40 w-40" : "h-32 w-32"}`,
+                children: pending ? /* @__PURE__ */ jsx22(Loading, { size: "sm" }) : clearable && isFocused && value ? /* @__PURE__ */ jsx22(
+                  IconButton,
+                  {
+                    size: iconButtonSize,
+                    "aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
+                    icon: /* @__PURE__ */ jsx22(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        children: /* @__PURE__ */ jsx22(
+                          "path",
+                          {
+                            d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
+                            fill: "currentColor"
+                          }
+                        )
+                      }
+                    ),
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                    },
+                    onClick: () => {
+                      onChange == null ? void 0 : onChange({
+                        target: { value: "" }
+                      });
+                    }
+                  }
+                ) : success ? /* @__PURE__ */ jsx22(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    className: "text-accent-success flex h-20 w-20 items-center justify-center",
+                    children: /* @__PURE__ */ jsx22(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        clipRule: "evenodd",
+                        d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
+                        fill: "currentColor"
+                      }
+                    )
+                  }
+                ) : error ? /* @__PURE__ */ jsx22(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    className: "text-text-field-text-danger flex h-20 w-20 items-center justify-center",
+                    children: /* @__PURE__ */ jsx22(
+                      "path",
+                      {
+                        d: "M10.0078 2.41699C11.0548 2.41699 12.0363 2.61407 12.9512 3.00879C13.8657 3.40341 14.6687 3.94646 15.3604 4.6377C16.0522 5.32922 16.5962 6.13426 16.9912 7.05176C17.386 7.96936 17.583 8.95002 17.583 9.99316C17.583 11.0363 17.3859 12.0187 16.9912 12.9404C16.5966 13.862 16.0536 14.6687 15.3623 15.3604C14.6708 16.0522 13.8657 16.5962 12.9482 16.9912C12.0306 17.386 11.05 17.583 10.0068 17.583C8.96373 17.583 7.9813 17.3859 7.05957 16.9912C6.13798 16.5966 5.33135 16.0536 4.63965 15.3623C3.94784 14.6708 3.40379 13.8642 3.00879 12.9434C2.61398 12.0228 2.41703 11.039 2.41699 9.99219C2.41699 8.94524 2.61407 7.96369 3.00879 7.04883C3.40341 6.13429 3.94646 5.33128 4.6377 4.63965C5.32922 3.94784 6.13581 3.40379 7.05664 3.00879C7.97723 2.61398 8.961 2.41703 10.0078 2.41699ZM10.0039 12.5967C9.83828 12.5968 9.69804 12.6527 9.58301 12.7646C9.46793 12.8769 9.41016 13.0159 9.41016 13.1816C9.4102 13.3472 9.46621 13.4875 9.57812 13.6025C9.69035 13.7177 9.83026 13.7754 9.99609 13.7754C10.1617 13.7753 10.302 13.7195 10.417 13.6074C10.5321 13.4952 10.5898 13.3562 10.5898 13.1904C10.5898 13.0246 10.534 12.8837 10.4219 12.7686C10.3097 12.6536 10.1697 12.5967 10.0039 12.5967ZM9.45801 11.0645H10.542V6.06445H9.45801V11.0645Z",
+                        fill: "currentColor"
+                      }
+                    )
+                  }
+                ) : null
               }
             )
-          }
-        ) : /* @__PURE__ */ jsx21(Fragment4, {})
-      ] }),
-      error ? /* @__PURE__ */ jsx21("p", { className: "text-caption-caption text-left items-left text-red-600", children: error }) : description ? /* @__PURE__ */ jsx21("p", { className: "text-caption-caption text-left items-left text-gray-600", children: description }) : /* @__PURE__ */ jsx21(Fragment4, {})
+          ]
+        }
+      ),
+      error ? /* @__PURE__ */ jsx22("p", { className: "text-caption-caption text-left items-left text-text-field-text-danger", children: error }) : helperText ? /* @__PURE__ */ jsx22(
+        "p",
+        {
+          className: `text-caption-caption text-left items-left ${disabled ? "text-text-field-text-disabled" : "text-text-field-text-secondary"}`,
+          children: helperText
+        }
+      ) : /* @__PURE__ */ jsx22(Fragment6, {})
     ] });
   }
 );
 TextField.displayName = "TextField";
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { forwardRef as forwardRef23 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function CheckCircleIcon({ className }) {
   return /* @__PURE__ */ jsxs19("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx22("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx22("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    /* @__PURE__ */ jsx23("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx23("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
 function ProgressIcon({ className }) {
-  return /* @__PURE__ */ jsx22(Loading, { size: "sm", className });
+  return /* @__PURE__ */ jsx23(Loading, { size: "sm", className });
 }
 function ErrorIcon({ className }) {
   return /* @__PURE__ */ jsxs19("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx22("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx22("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    /* @__PURE__ */ jsx23("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx23("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
-function CloseIcon3({ className }) {
-  return /* @__PURE__ */ jsx22("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function CloseIcon5({ className }) {
+  return /* @__PURE__ */ jsx23("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 var defaultIcons3 = {
   default: CheckCircleIcon,
@@ -2424,7 +2779,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = forwardRef22(
+var Toast = forwardRef23(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -2453,9 +2808,9 @@ var Toast = forwardRef22(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs19("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      icon && /* @__PURE__ */ jsx22("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ jsx22(DefaultIcon, { className: "h-20 w-20" }) }),
-      /* @__PURE__ */ jsx22("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
-      actionLabel && onAction && /* @__PURE__ */ jsx22(
+      icon && /* @__PURE__ */ jsx23("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ jsx23(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ jsx23("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
+      actionLabel && onAction && /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
@@ -2464,14 +2819,14 @@ var Toast = forwardRef22(
           children: actionLabel
         }
       ),
-      onDismiss && /* @__PURE__ */ jsx22(
+      onDismiss && /* @__PURE__ */ jsx23(
         "button",
         {
           type: "button",
           onClick: onDismiss,
           className: "shrink-0 p-4 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
           "aria-label": "Dismiss",
-          children: /* @__PURE__ */ jsx22(CloseIcon3, { className: "h-16 w-16" })
+          children: /* @__PURE__ */ jsx23(CloseIcon5, { className: "h-16 w-16" })
         }
       )
     ] }));
@@ -2480,9 +2835,9 @@ var Toast = forwardRef22(
 Toast.displayName = "Toast";
 
 // src/components/ToggleSwitch/ToggleSwitch.tsx
-import { forwardRef as forwardRef23 } from "react";
-import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
-var ToggleSwitch = forwardRef23(
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+var ToggleSwitch = forwardRef24(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2504,7 +2859,7 @@ var ToggleSwitch = forwardRef23(
         className: `inline-flex items-center ${className}`
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             "input",
             {
               type: "checkbox",
@@ -2514,7 +2869,7 @@ var ToggleSwitch = forwardRef23(
               onChange: () => !isDisabled && (setIsSelected == null ? void 0 : setIsSelected(!isSelected))
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24(
             "div",
             {
               className: `${isDisabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer hover:bg-gray-300 hover:peer-checked:bg-green-700"} relative w-48 h-26 bg-gray-200 rounded-full peer-checked:after:translate-x-22 rtl:peer-checked:after:-translate-x-22 peer-checked:after:border-white after:content-[''] after:absolute after:top-4 after:left-4 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-18 after:w-18 after:transition-all peer-checked:bg-green-600 `
@@ -2530,12 +2885,12 @@ ToggleSwitch.displayName = "ToggleSwitch";
 // src/components/Tooltip/Tooltip.tsx
 import {
   useState as useState11,
-  useEffect as useEffect6,
-  useRef as useRef4,
-  forwardRef as forwardRef24
+  useEffect as useEffect4,
+  useRef as useRef3,
+  forwardRef as forwardRef25
 } from "react";
-import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
-var Tooltip = forwardRef24(
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var Tooltip = forwardRef25(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -2552,10 +2907,10 @@ var Tooltip = forwardRef24(
       "position",
       "className"
     ]);
-    const wrapperRef = useRef4(null);
+    const wrapperRef = useRef3(null);
     const [isVisible, setIsVisible] = useState11(false);
     const [isHovered, setIsHovered] = useState11(false);
-    useEffect6(() => {
+    useEffect4(() => {
       const handleClickOutside = (event) => {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
           setIsVisible(false);
@@ -2574,7 +2929,7 @@ var Tooltip = forwardRef24(
         ref
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             "div",
             {
               ref: wrapperRef,
@@ -2596,20 +2951,20 @@ var Tooltip = forwardRef24(
             {
               className: `min-w-100 max-w-300 whitespace-nowrap rounded bg-gray-900 text-white ${size === "lg" ? "text-body-regular py-12 px-16" : size === "md" ? "text-body-small px-12 pt-10 pb-8" : "text-body-small px-8 pt-6 pb-4"} ${position === "right" && `absolute left-full top-1/2 z-20 ml-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "top" && `absolute bottom-full left-1/2 z-20 mb-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "left" && `absolute right-full top-1/2 z-20 mr-8 -translate-y-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}` || position === "bottom" && `absolute left-1/2 top-full z-20 mt-8 -translate-x-1/2 ${isVisible || isHovered ? "opacity-100" : "opacity-0"}`}`,
               children: [
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25(
                   "span",
                   {
                     className: ` ${position === "right" && `absolute -left-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "top" && `absolute -bottom-3 left-1/2 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black` || position === "left" && `absolute -right-3 top-1/2 -z-10 h-8 w-8 -translate-y-1/2 rotate-45 rounded-xs bg-black` || position === "bottom" && `absolute left-1/2 -top-3 -z-10 h-8 w-8 -translate-x-1/2 rotate-45 rounded-xs bg-black`} `
                   }
                 ),
-                headText ? /* @__PURE__ */ jsx24(
+                headText ? /* @__PURE__ */ jsx25(
                   "p",
                   {
                     className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
                     children: headText
                   }
-                ) : /* @__PURE__ */ jsx24(Fragment5, {}),
-                text ? /* @__PURE__ */ jsx24("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ jsx24(Fragment5, {})
+                ) : /* @__PURE__ */ jsx25(Fragment7, {}),
+                text ? /* @__PURE__ */ jsx25("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ jsx25(Fragment7, {})
               ]
             }
           )
@@ -2624,15 +2979,16 @@ export {
   AlertBanner,
   Avatar,
   Badge,
-  BottomSheet,
   Branding,
   Button,
   Checkbox,
   Chip,
   Dialog,
+  Drawer,
   Dropdown,
   FinancialLogo,
   Icon,
+  IconButton,
   Link,
   Loading,
   Radio,