@refinn/core-ui 0.1.2 → 0.1.4

package/dist/index.js

@@ -64,13 +64,25 @@ __export(index_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
   BottomSheet: () => BottomSheet,
+  Branding: () => Branding,
   Button: () => Button,
   Checkbox: () => Checkbox,
+  Chip: () => Chip,
   Dialog: () => Dialog,
+  Dropdown: () => Dropdown,
+  FinancialLogo: () => FinancialLogo,
   Icon: () => Icon,
+  Link: () => Link,
+  Loading: () => Loading,
   Radio: () => Radio,
+  SegmentControl: () => SegmentControl,
   Slider: () => Slider,
-  Toast: () => Toast
+  Tab: () => Tab,
+  TextArea: () => TextArea,
+  TextField: () => TextField,
+  Toast: () => Toast,
+  ToggleSwitch: () => ToggleSwitch,
+  Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -504,78 +516,214 @@ var Badge = (0, import_react4.forwardRef)(
 );
 Badge.displayName = "Badge";
 
-// src/components/Button/Button.tsx
+// src/components/Branding/Branding.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var Branding = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { type = "brand", className = "" } = _b, rest = __objRest(_b, ["type", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `${type === "black" ? "text-gray-900" : type === "white" ? "text-white-100" : "text-blue-600"} ${className}`
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "89",
+            height: "20",
+            viewBox: "0 0 89 20",
+            fill: "currentColor",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { "clip-path": "url(#clip0_828_998)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M16.7368 16.8241H16.7425L12.5943 11.7367C14.2529 11.1183 16.1138 9.64704 16.1138 6.12635C16.1138 -0.239164 10.023 0.0275032 10.0092 0.0275032H1.92874C1.91035 0.0275032 1.89311 0.0275032 1.87587 0.0275032C1.37851 0.0275032 0.901524 0.225077 0.549839 0.576762C0.198155 0.928447 0.000580351 1.40543 0.000580351 1.90279C0.000580351 2.40015 0.198155 2.87713 0.549839 3.22882C0.901524 3.5805 1.37851 3.77808 1.87587 3.77808C1.89426 3.77808 1.9115 3.77808 1.92874 3.77808H10.1149C10.7376 3.79195 11.3292 4.0526 11.7597 4.50268C12.1902 4.95277 12.4242 5.55543 12.4103 6.17808C12.3965 6.80073 12.1358 7.39236 11.6857 7.82284C11.2357 8.25331 10.633 8.48735 10.0103 8.47348H1.88621H1.87472C1.62814 8.47348 1.38398 8.52212 1.15623 8.61662C0.928482 8.71112 0.721611 8.84963 0.547468 9.0242C0.373325 9.19877 0.23533 9.40598 0.141388 9.63396C0.0474455 9.86194 -0.00059909 10.1062 5.6384e-06 10.3528C5.6384e-06 10.3528 5.6384e-06 10.3631 5.6384e-06 10.3677V17.9746C0.0121171 18.4636 0.214886 18.9286 0.565035 19.2701C0.915184 19.6117 1.38498 19.8029 1.87414 19.8029C2.36331 19.8029 2.8331 19.6117 3.18325 19.2701C3.5334 18.9286 3.73617 18.4636 3.74828 17.9746V12.1631H8.14943L13.8149 19.1643L13.8218 19.1585C14.1314 19.5449 14.5818 19.7925 15.0739 19.8468C15.566 19.9012 16.0596 19.7578 16.446 19.4482C16.8324 19.1386 17.08 18.6882 17.1343 18.1961C17.1886 17.704 17.0452 17.2104 16.7356 16.8241H16.7368Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    d: "M30.3851 15.1575C31.5816 13.5 34.0989 15.2805 32.9023 16.9379C31.9828 18.1966 30.3241 19.854 27.2241 19.823C23.6241 19.823 20.5575 16.7195 20.4736 12.6379C20.4671 12.5169 20.4671 12.3957 20.4736 12.2747C20.5621 8.18966 23.6241 5.08966 27.1931 5.08966H27.2241C30.815 5.08966 33.977 8.28162 33.977 12.4563C33.979 12.6584 33.9407 12.8588 33.8643 13.0459C33.7879 13.233 33.6749 13.4029 33.532 13.5458C33.3891 13.6887 33.2192 13.8017 33.0321 13.8781C32.845 13.9545 32.6446 13.9928 32.4425 13.9908H23.7851C24.3046 15.5667 25.6023 16.7494 27.223 16.7494H27.254C28.9736 16.7816 29.8943 15.8621 30.3851 15.1575ZM23.7851 10.9195H30.9115C30.9115 10.1828 29.346 8.16093 27.2333 8.16093C25.6023 8.16093 24.3046 9.34598 23.7851 10.9195Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M44.1379 5.09414H41.4805V4.56196C41.4808 4.16209 41.6398 3.77869 41.9225 3.49595C42.2052 3.2132 42.5886 3.05422 42.9885 3.05391H43.9977C44.398 3.05391 44.7818 2.89491 45.0649 2.61188C45.3479 2.32885 45.5069 1.94498 45.5069 1.54472C45.5069 1.14445 45.3479 0.760585 45.0649 0.477556C44.7818 0.194527 44.398 0.0355225 43.9977 0.0355225H41.9713V0.0435684C41.0274 0.0827094 40.1351 0.485118 39.4809 1.1667C38.8268 1.84829 38.4613 2.75632 38.4609 3.70104V5.08955H37.7402C37.3897 5.08955 37.0534 5.22881 36.8056 5.4767C36.5577 5.7246 36.4184 6.06081 36.4184 6.41138C36.4184 6.76196 36.5577 7.09817 36.8056 7.34607C37.0534 7.59396 37.3897 7.73322 37.7402 7.73322H38.4609V18.4229H38.4713C38.4925 18.806 38.6597 19.1665 38.9384 19.4303C39.2172 19.694 39.5864 19.841 39.9701 19.841C40.3539 19.841 40.7231 19.694 41.0018 19.4303C41.2806 19.1665 41.4477 18.806 41.469 18.4229H41.4793V7.73322H44.1379C44.4885 7.73322 44.8247 7.59396 45.0726 7.34607C45.3205 7.09817 45.4598 6.76196 45.4598 6.41138C45.4598 6.06081 45.3205 5.7246 45.0726 5.4767C44.8247 5.22881 44.4885 5.08955 44.1379 5.08955V5.09414Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M72.2724 10.154C72.2414 7.48161 70.0678 5.04368 67.3885 5.04368C66.4874 5.04385 65.6039 5.29338 64.8358 5.76464C64.0678 6.2359 63.4451 6.91052 63.0368 7.7138C63.0368 7.7138 63.0368 6.56437 63.0368 6.53334C63.0368 6.13307 62.8778 5.7492 62.5947 5.46617C62.3117 5.18314 61.9278 5.02414 61.5276 5.02414C61.1273 5.02414 60.7434 5.18314 60.4604 5.46617C60.1774 5.7492 60.0184 6.13307 60.0184 6.53334V18.4356H60.0287C60.0499 18.8188 60.2171 19.1793 60.4959 19.443C60.7746 19.7068 61.1438 19.8537 61.5276 19.8537C61.9113 19.8537 62.2805 19.7068 62.5593 19.443C62.838 19.1793 63.0052 18.8188 63.0264 18.4356H63.0368V11.1805L63.0483 11.1989C63.0483 9.47472 64.4414 7.80575 66.1598 7.80575C67.7758 7.80575 69.1046 9.32069 69.2563 10.8977V18.4368H69.2666C69.2879 18.82 69.455 19.1804 69.7338 19.4442C70.0126 19.7079 70.3817 19.8549 70.7655 19.8549C71.1493 19.8549 71.5184 19.7079 71.7972 19.4442C72.076 19.1804 72.2431 18.82 72.2644 18.4368H72.2747V10.154H72.2724Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M55.4322 2.2V1.96897H55.4126C55.2287 0.904602 53.7586 0.0758667 51.9724 0.0758667C50.1862 0.0758667 48.7161 0.905751 48.5322 1.96897H48.5126V4.4046H48.5241C48.6391 5.51035 50.1333 6.38621 51.9724 6.38621C53.8115 6.38621 55.3057 5.51035 55.4207 4.4046H55.431V4.27242L55.4322 2.2ZM54.1678 4.40575C54.1678 4.80115 53.1851 5.12184 51.9724 5.12184C50.7598 5.12184 49.777 4.80115 49.777 4.40575V3.53564C49.777 3.93104 50.7598 4.25173 51.9724 4.25173C53.1851 4.25173 54.1678 3.93104 54.1678 3.53564V4.40575ZM51.9724 3.09426C50.7598 3.09426 49.777 2.69196 49.777 2.19541C49.777 1.69885 50.7598 1.29541 51.9724 1.29541C53.1851 1.29541 54.1678 1.69771 54.1678 2.19541C54.1678 2.69311 53.1839 3.09426 51.9724 3.09426Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M55.4321 17.708V9.16092V9.08046C55.3689 7.94483 53.8482 7.03448 51.9781 7.03448C50.108 7.03448 48.5804 7.94598 48.5172 9.08046H48.5115V17.7012C48.5115 17.7012 48.5115 17.7115 48.5115 17.7161C48.5115 18.8862 50.0609 19.8356 51.9724 19.8356C53.8839 19.8356 55.4333 18.8874 55.4333 17.7161C55.4333 17.7161 55.4333 17.7058 55.4333 17.7012L55.4321 17.708ZM54.1678 17.8954C54.1678 18.2908 53.185 18.6115 51.9724 18.6115C50.7597 18.6115 49.777 18.2908 49.777 17.8954V17.0264C49.777 17.4218 50.7597 17.7425 51.9724 17.7425C53.185 17.7425 54.1678 17.4218 54.1678 17.0264V17.8954ZM54.1678 15.792C54.1678 16.1874 53.185 16.508 51.9724 16.508C50.7597 16.508 49.777 16.1874 49.777 15.792V14.923C49.777 15.3184 50.7597 15.6391 51.9724 15.6391C53.185 15.6391 54.1678 15.3184 54.1678 14.923V15.792ZM54.1678 13.6885C54.1678 14.0839 53.185 14.4046 51.9724 14.4046C50.7597 14.4046 49.777 14.0839 49.777 13.6885V12.8195C49.777 13.2149 50.7597 13.5356 51.9724 13.5356C53.185 13.5356 54.1678 13.2149 54.1678 12.8195V13.6885ZM54.1678 11.5161C54.1678 11.9115 53.185 12.2322 51.9724 12.2322C50.7597 12.2322 49.777 11.9115 49.777 11.5161V10.646C49.777 11.0414 50.7597 11.3621 51.9724 11.3621C53.185 11.3621 54.1678 11.0414 54.1678 10.646V11.5161ZM51.9724 10.0678C50.7597 10.0678 49.777 9.66552 49.777 9.16897C49.777 8.67242 50.7597 8.27012 51.9724 8.27012C53.185 8.27012 54.1678 8.67242 54.1678 9.16897C54.1678 9.66552 53.1839 10.0667 51.9724 10.0667V10.0678Z",
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "path",
+                  {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M88.8885 10.154C88.8574 7.48161 86.6839 5.04368 84.0046 5.04368C83.1039 5.04427 82.2209 5.294 81.4532 5.76524C80.6856 6.23648 80.0633 6.91086 79.6552 7.71379C79.6552 7.71379 79.6552 6.56437 79.6552 6.53333C79.6552 6.13307 79.4962 5.7492 79.2131 5.46617C78.9301 5.18314 78.5462 5.02414 78.146 5.02414C77.7457 5.02414 77.3618 5.18314 77.0788 5.46617C76.7958 5.7492 76.6368 6.13307 76.6368 6.53333V18.4356H76.6471C76.6684 18.8188 76.8355 19.1793 77.1143 19.443C77.393 19.7068 77.7622 19.8537 78.146 19.8537C78.5297 19.8537 78.8989 19.7068 79.1777 19.443C79.4564 19.1793 79.6236 18.8188 79.6448 18.4356H79.6552V11.1805L79.6667 11.1989C79.6667 9.47471 81.0598 7.80575 82.7781 7.80575C84.3942 7.80575 85.723 9.32069 85.8747 10.8977V18.4368H85.885C85.9063 18.8199 86.0734 19.1804 86.3522 19.4442C86.6309 19.7079 87.0001 19.8549 87.3839 19.8549C87.7676 19.8549 88.1368 19.7079 88.4156 19.4442C88.6943 19.1804 88.8615 18.8199 88.8827 18.4368H88.8931V10.154H88.8885Z",
+                    fill: "currentColor"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("clipPath", { id: "clip0_828_998", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "88.892", height: "20", fill: "currentColor" }) }) })
+            ]
+          }
+        )
+      })
+    );
+  }
+);
+Branding.displayName = "Branding";
+
+// src/components/Button/Button.tsx
+var import_react7 = require("react");
+
+// src/components/Loading/Loading.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Loading = (0, import_react6.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "sm", isDark = false, className = "" } = _b, rest = __objRest(_b, ["size", "isDark", "className"]);
+    const containerClasses = [
+      isDark ? "text-white-100" : "text-blue-600",
+      className
+    ].filter(Boolean).join(" ");
+    return size === "sm" && !isDark ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "svg",
+      {
+        className: "animate-spin",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "path",
+            {
+              d: "M1 9C1 6.87827 1.84286 4.84344 3.34315 3.34315C4.84344 1.84285 6.87827 1 9 1C11.1217 1 13.1566 1.84286 14.6569 3.34315C16.1571 4.84344 17 6.87827 17 9C17 11.1217 16.1571 13.1566 14.6569 14.6569C13.1566 16.1571 11.1217 17 9 17C6.87827 17 4.84344 16.1571 3.34315 14.6569C1.84285 13.1566 1 11.1217 1 9L1 9Z",
+              stroke: "#F3F4F6",
+              "stroke-width": "2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "path",
+            {
+              d: "M1 9C1 7.31057 1.53484 5.6645 2.52786 4.29772C3.52089 2.93094 4.92112 1.91361 6.52787 1.39155C8.13461 0.869484 9.86539 0.869484 11.4721 1.39155C13.0789 1.91361 14.4791 2.93094 15.4721 4.29772",
+              stroke: "#0193D7",
+              "stroke-width": "2"
+            }
+          )
+        ]
+      }
+    ) })) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "svg",
+      {
+        className: "animate-spin",
+        width: size === "sm" ? 18 : 88,
+        height: size === "sm" ? 18 : 88,
+        viewBox: "0 0 20 20",
+        fill: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "path",
+          {
+            d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
+            stroke: "currentColor",
+            strokeWidth: size === "sm" ? 2 : 1,
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) }));
+  }
+);
+Loading.displayName = "Loading";
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var variantClasses = {
   primary: [
-    "bg-btn-primary text-btn-primary-text",
-    "hover:bg-btn-primary-hover",
-    "active:bg-btn-primary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-primary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-primary-disabled disabled:text-btn-primary-text-disabled"
+    "bg-blue-600 text-white-100",
+    "hover:bg-blue-700",
+    "active:bg-blue-800",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   secondary: [
-    "bg-btn-secondary text-btn-secondary-text",
-    "hover:bg-btn-secondary-hover",
-    "active:bg-btn-secondary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-secondary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-text-disabled"
+    "bg-gray-100 text-gray-900",
+    "hover:bg-gray-200",
+    "active:bg-gray-300",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   tertiary: [
-    "bg-btn-tertiary text-btn-tertiary-text",
-    "hover:bg-btn-tertiary-hover",
-    "active:bg-btn-tertiary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-tertiary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-tertiary-disabled disabled:text-btn-tertiary-text-disabled"
+    "bg-black-0 text-gray-900",
+    "hover:bg-gray-200",
+    "active:bg-gray-300",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   contrast: [
-    "bg-btn-contrast text-btn-contrast-text",
-    "hover:bg-btn-contrast-hover",
-    "active:bg-btn-contrast-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-contrast-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-contrast-disabled disabled:text-btn-contrast-text-disabled"
+    "bg-white-100 text-blue-600",
+    "hover:bg-white-90",
+    "active:bg-white-80",
+    "focus-visible:ring-2 focus-visible:ring-white-100 focus-visible:ring-offset-2",
+    "disabled:bg-gray-50 disabled:text-gray-400"
   ].join(" "),
   transparent: [
-    "bg-btn-transparent text-btn-transparent-text",
-    "hover:bg-btn-transparent-hover",
-    "active:bg-btn-transparent-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-transparent-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-transparent-disabled disabled:text-btn-transparent-text-disabled"
+    "bg-black-0 text-white-100",
+    "hover:bg-white-20",
+    "active:bg-white-30",
+    "focus-visible:ring-2 focus-visible:ring-white-100 focus-visible:bg-black-0 focus-visible:ring-offset-2",
+    "disabled:bg-black-0 disabled:text-white-40"
   ].join(" ")
 };
 var sizeClasses3 = {
-  small: "h-32 px-12 text-sm gap-4",
-  medium: "h-40 px-16 text-sm gap-6",
-  large: "h-48 px-20 text-base gap-8",
-  "extra-large": "h-56 px-24 text-lg gap-8"
+  sm: "px-16 py-6 text-label-medium",
+  md: "px-20 py-8 text-label-large",
+  lg: "px-24 py-12 text-label-large",
+  xl: "px-32 py-16 text-label-large"
 };
-function Spinner({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "svg",
-    {
-      className,
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "path",
-        {
-          d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  );
-}
-var Button = (0, import_react5.forwardRef)(
+var Button = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
-      size = "medium",
+      size = "md",
       rounded = false,
       loading = false,
       disabled = false,
@@ -594,40 +742,32 @@ var Button = (0, import_react5.forwardRef)(
       "children",
       "className"
     ]);
-    const isDisabled = disabled || loading;
+    const isDisabled = disabled;
     const classes = [
-      "inline-flex items-center justify-center font-medium font-sans",
+      "inline-flex items-center justify-center gap-8",
       "transition-colors duration-150",
       "outline-none",
       "disabled:cursor-not-allowed",
+      loading ? "pointer-events-none" : "cursor-pointer",
       sizeClasses3[size],
       variantClasses[variant],
-      rounded ? "rounded-full" : "rounded-lg",
+      rounded ? "rounded-full" : size === "sm" ? "rounded-6" : size === "xl" ? "rounded-12" : "rounded-8",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "button",
-      __spreadProps(__spreadValues({
-        ref,
-        disabled: isDisabled,
-        className: classes
-      }, rest), {
-        children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { className: "animate-spin" }) : startIcon,
-          children,
-          !loading && endIcon
-        ]
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", __spreadProps(__spreadValues({ ref, disabled: isDisabled, className: classes }, rest), { children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, { size: "sm", isDark: variant === "primary" || variant === "transparent" }) : startIcon,
+      children,
+      !loading && endIcon
+    ] }));
   }
 );
 Button.displayName = "Button";
 
 // src/components/BottomSheet/BottomSheet.tsx
-var import_react6 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var BottomSheet = (0, import_react6.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var BottomSheet = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isForceOpen = false,
@@ -654,10 +794,10 @@ var BottomSheet = (0, import_react6.forwardRef)(
       "modalDesc",
       "className"
     ]);
-    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-    const [shouldRender, setShouldRender] = (0, import_react6.useState)(false);
-    const [animate, setAnimate] = (0, import_react6.useState)(false);
-    (0, import_react6.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+    const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
+    const [animate, setAnimate] = (0, import_react8.useState)(false);
+    (0, import_react8.useEffect)(() => {
       if (isOpen) {
         setShouldRender(true);
         setTimeout(() => setAnimate(true), 10);
@@ -667,14 +807,14 @@ var BottomSheet = (0, import_react6.forwardRef)(
         return () => clearTimeout(timer);
       }
     }, [isOpen]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       if (isForceOpen) {
         setIsOpen(true);
       } else {
         setIsOpen(false);
       }
     }, [isForceOpen]);
-    const handleStartClick = (0, import_react6.useCallback)(
+    const handleStartClick = (0, import_react8.useCallback)(
       (e) => {
         var _a2, _b2;
         (_b2 = startModalBtn == null ? void 0 : (_a2 = startModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
@@ -683,7 +823,7 @@ var BottomSheet = (0, import_react6.forwardRef)(
       },
       [startModalBtn]
     );
-    const handleStopClick = (0, import_react6.useCallback)(
+    const handleStopClick = (0, import_react8.useCallback)(
       (e) => {
         var _a2, _b2;
         (_b2 = stopModalBtn == null ? void 0 : (_a2 = stopModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
@@ -696,19 +836,19 @@ var BottomSheet = (0, import_react6.forwardRef)(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && import_react6.default.cloneElement(startModalBtn, {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react8.default.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
       shouldRender && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: `fixed inset-0 z-50 flex items-end justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
             "aria-modal": "true",
             role: "dialog",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -716,26 +856,26 @@ var BottomSheet = (0, import_react6.forwardRef)(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col px-8 max-w-225", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-col px-8 max-w-225", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "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__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "div",
                         {
                           className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
@@ -744,9 +884,9 @@ var BottomSheet = (0, import_react6.forwardRef)(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
                       children,
-                      stopModalBtn && import_react6.default.cloneElement(stopModalBtn, {
+                      stopModalBtn && import_react8.default.cloneElement(stopModalBtn, {
                         onClick: handleStopClick
                       }),
                       afterStopBtn && afterStopBtn
@@ -765,17 +905,17 @@ var BottomSheet = (0, import_react6.forwardRef)(
 BottomSheet.displayName = "BottomSheet";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "path",
         {
           d: "M13.333 4.667 6 12l-3.333-3.333",
@@ -789,14 +929,14 @@ function CheckIcon({ className }) {
   );
 }
 function IndeterminateIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "path",
         {
           d: "M3.333 8h9.334",
@@ -808,7 +948,7 @@ function IndeterminateIcon({ className }) {
     }
   );
 }
-var Checkbox = (0, import_react7.forwardRef)(
+var Checkbox = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -831,17 +971,17 @@ var Checkbox = (0, import_react7.forwardRef)(
       "id",
       "defaultChecked"
     ]);
-    const reactId = (0, import_react7.useId)();
+    const reactId = (0, import_react9.useId)();
     const inputId = id != null ? id : reactId;
-    const [isChecked, setIsChecked] = (0, import_react7.useState)(defaultChecked != null ? defaultChecked : false);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const [isChecked, setIsChecked] = (0, import_react9.useState)(defaultChecked != null ? defaultChecked : false);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "label",
       {
         htmlFor: inputId,
         className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative mr-16", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "input",
               __spreadValues({
                 ref,
@@ -858,16 +998,16 @@ var Checkbox = (0, import_react7.forwardRef)(
                 className: "sr-only"
               }, rest)
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "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__ */ (0, import_jsx_runtime7.jsx)(
+                children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   CheckIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
                   }
-                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   IndeterminateIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
@@ -876,15 +1016,15 @@ var Checkbox = (0, import_react7.forwardRef)(
               }
             )
           ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "span",
               {
                 className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
                 children: label
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "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"}`,
@@ -899,42 +1039,119 @@ var Checkbox = (0, import_react7.forwardRef)(
 );
 Checkbox.displayName = "Checkbox";
 
+// src/components/Chip/Chip.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("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",
+  lg: "h-48 text-label-large px-24 py-14"
+};
+var marginImgClasses = {
+  sm: "-ml-10 -my-4 h-28 w-28",
+  md: "-ml-12 -my-6 h-32 w-32",
+  lg: "-ml-18 -my-8 h-32 w-32"
+};
+var isOutlinedClasses = {
+  true: "border border-chip-border-enabled bg-chip-background-inverse",
+  false: "border-0 bg-chip-background-enabled"
+};
+var isDarkClasses = {
+  true: "!bg-chip-background-black-active !text-chip-text-inverse",
+  false: "!bg-chip-background-active !text-chip-text-inverse"
+};
+var Chip = (0, import_react10.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      src,
+      alt = "",
+      label,
+      icon,
+      isOutlined = false,
+      isDark = false,
+      defaultSelected = false,
+      disabled = false,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "src",
+      "alt",
+      "label",
+      "icon",
+      "isOutlined",
+      "isDark",
+      "defaultSelected",
+      "disabled",
+      "className"
+    ]);
+    const [selected, setSelected] = (0, import_react10.useState)(defaultSelected);
+    const sz = sizeClasses4[size];
+    const outlinedClass = isOutlinedClasses[String(isOutlined)];
+    const darkClass = isDarkClasses[String(isDark)];
+    const containerClasses = [
+      "w-fit rounded-full flex flex-row gap-8 items-center justify-center text-chip-text-enabled",
+      disabled ? "cursor-not-allowed" : "cursor-pointer",
+      outlinedClass,
+      sz,
+      className,
+      selected ? darkClass : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: containerClasses
+      }, rest), {
+        onClick: () => !disabled && setSelected(!selected),
+        children: [
+          icon ? icon : src && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
+          label
+        ]
+      })
+    );
+  }
+);
+Chip.displayName = "Chip";
+
 // src/components/Dialog/Dialog.tsx
-var import_react8 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Dialog = (0, import_react8.forwardRef)(
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Dialog = (0, import_react11.forwardRef)(
   ({
     isForceOpen = false,
     setIsForceOpen,
     isClosedAble = true,
+    isCloseIcon = true,
     children,
     startModalBtn,
     stopModalBtn,
     afterStopBtn,
-    p = "20"
+    p = "20",
+    maxW = "md"
   }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-    const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
-    const [animate, setAnimate] = (0, import_react8.useState)(false);
-    (0, import_react8.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+    const [isRender, setIsRender] = (0, import_react11.useState)(false);
+    const [animate, setAnimate] = (0, import_react11.useState)(false);
+    (0, import_react11.useEffect)(() => {
       if (isOpen) {
-        setShouldRender(true);
+        setIsRender(true);
         setTimeout(() => setAnimate(true), 10);
       } else {
         setAnimate(false);
-        const timer = setTimeout(() => setShouldRender(false), 300);
+        const timer = setTimeout(() => setIsRender(false), 300);
         return () => clearTimeout(timer);
       }
     }, [isOpen]);
-    (0, import_react8.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       if (isForceOpen) {
         setIsOpen(true);
       } else {
         setIsOpen(false);
       }
     }, [isForceOpen]);
-    const handleStartClick = (0, import_react8.useCallback)(
+    const handleStartClick = (0, import_react11.useCallback)(
       (e) => {
         var _a, _b;
         (_b = startModalBtn == null ? void 0 : (_a = startModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
@@ -943,7 +1160,7 @@ var Dialog = (0, import_react8.forwardRef)(
       },
       [startModalBtn]
     );
-    const handleStopClick = (0, import_react8.useCallback)(
+    const handleStopClick = (0, import_react11.useCallback)(
       (e) => {
         var _a, _b;
         (_b = stopModalBtn == null ? void 0 : (_a = stopModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
@@ -956,19 +1173,19 @@ var Dialog = (0, import_react8.forwardRef)(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && import_react8.default.cloneElement(startModalBtn, {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react11.default.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
-      shouldRender && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      isRender && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: `fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
             "aria-modal": "true",
             role: "dialog",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -976,13 +1193,35 @@ var Dialog = (0, import_react8.forwardRef)(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                 "div",
                 {
-                  className: `relative z-10 w-[calc(100%-40px)] max-w-md rounded-xl bg-white p-${p || "20"} shadow-lg transform transition-all duration-300 ${animate ? "scale-100 opacity-100" : "scale-95 opacity-0"}`,
+                  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__ */ (0, import_jsx_runtime11.jsx)(
+                      "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__ */ (0, import_jsx_runtime11.jsx)(
+                          "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: "#111827"
+                          }
+                        )
+                      }
+                    ),
                     children,
-                    stopModalBtn && import_react8.default.cloneElement(stopModalBtn, {
+                    stopModalBtn && import_react11.default.cloneElement(stopModalBtn, {
                       onClick: handleStopClick
                     }),
                     afterStopBtn && afterStopBtn
@@ -999,10 +1238,342 @@ var Dialog = (0, import_react8.forwardRef)(
 );
 Dialog.displayName = "Dialog";
 
-// src/components/Icon/Icon.tsx
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Icon = (0, import_react9.forwardRef)(
+// src/components/Dropdown/Dropdown.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var IconDanger = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "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: "#EF4444"
+      }
+    )
+  }
+);
+function IconCheck({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "path",
+        {
+          d: "M15.6328 6.64062L8.10449 14.1494L4.36719 10.4326L5.13281 9.64551L8.10449 12.6172L14.8672 5.875L15.6328 6.64062Z",
+          fill: "#111827"
+        }
+      )
+    }
+  );
+}
+function ChevronDown({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "path",
+        {
+          d: "M14.7119 8.0625L10 12.7744L5.28809 8.0625L6.0625 7.28809L10 11.2256L13.9375 7.28809L14.7119 8.0625Z",
+          fill: "#111827"
+        }
+      )
+    }
+  );
+}
+var Dropdown = ({
+  error,
+  label,
+  placeholder,
+  isDisabled = false,
+  isSearchable = false,
+  isTextCenter = false,
+  value,
+  setValue,
+  dropDownItems = [
+    { label: "Bonnie Green", value: "Bonnie Green" },
+    { label: "Jese Leos", value: "Jese Leos" },
+    { label: "Joseph Mcfall", value: "Joseph Mcfall" },
+    { label: "John Smith", value: "John Smith" },
+    { label: "Maria Garcia", value: "Maria Garcia" }
+  ]
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [search, setSearch] = (0, import_react12.useState)("");
+  const dropdownRef = (0, import_react12.useRef)(null);
+  const filteredItems = dropDownItems.filter(
+    (item) => item.label.toLowerCase().includes(search.toLowerCase())
+  );
+  (0, import_react12.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "p",
+      {
+        className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
+        children: label
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          onClick: () => !isDisabled && setIsOpen(!isOpen),
+          className: `w-full rounded-md text-body-small px-16 py-10 text-center inline-flex gap-8 items-center border **:focus:outline-none focus:border-2 focus:px-15 focus:py-9
+            ${isDisabled ? "pointer-events-none bg-dropdown-background-disabled text-dropdown-text-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 "} `,
+          type: "button",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: `grow ${isTextCenter ? "text-center" : "text-start"}`, children: value.label || placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-8", children: [
+              isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}) : error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconDanger, {}) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                ChevronDown,
+                {
+                  className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "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`,
+          children: [
+            isSearchable ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "mask",
+                        {
+                          id: "mask0_3218_5077",
+                          style: { maskType: "alpha" },
+                          maskUnits: "userSpaceOnUse",
+                          x: "0",
+                          y: "0",
+                          width: "20",
+                          height: "20",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "20", height: "20", fill: "#D9D9D9" })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "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__ */ (0, import_jsx_runtime12.jsx)(
+                  "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__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "ul",
+              {
+                className: "h-auto max-h-392 overflow-y-auto cursor-pointer",
+                "aria-labelledby": "dropdownSearchButton",
+                children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  "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",
+                    children: [
+                      item.label,
+                      value.value === item.value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCheck, { className: "absolute h-20 w-20 right-24 top-2 translate-y-1/2" })
+                    ]
+                  }
+                ) }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "p",
+      {
+        className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
+        children: error
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {})
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/components/FinancialLogo/FinancialLogo.tsx
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("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",
+  warning: "bg-alert-inline-warning-bg border-alert-inline-warning-border text-alert-text-primary",
+  danger: "bg-alert-inline-danger-bg border-alert-inline-danger-border text-alert-text-primary",
+  common: "bg-alert-inline-common-bg border-alert-inline-common-border text-alert-text-primary"
+};
+var pageClasses2 = {
+  info: "bg-alert-page-info-bg text-alert-text-primary-inverse",
+  success: "bg-alert-page-success-bg text-alert-text-primary-inverse",
+  warning: "bg-alert-page-warning-bg text-alert-text-primary-inverse",
+  danger: "bg-alert-page-danger-bg text-alert-text-primary-inverse",
+  common: "bg-alert-page-common-bg text-alert-text-primary-inverse"
+};
+var actionsPageClasses2 = {
+  info: "text-enabled-inverse",
+  success: "text-enabled-inverse",
+  warning: "text-enabled-dark",
+  danger: "text-enabled-inverse",
+  common: "text-enabled-inverse"
+};
+var inlineIconClasses2 = {
+  info: "text-alert-inline-info-icon",
+  success: "text-alert-inline-success-icon",
+  warning: "text-alert-inline-warning-icon",
+  danger: "text-alert-inline-danger-icon",
+  common: "text-alert-inline-common-icon"
+};
+function InfoIcon2({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function WarningIcon2({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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,
+  danger: DangerIcon2,
+  common: CommonIcon
+};
+var FinancialLogo = (0, import_react13.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "info",
+      mode = "inline",
+      title,
+      description,
+      action,
+      icon,
+      onClose,
+      className = "",
+      children
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "mode",
+      "title",
+      "description",
+      "action",
+      "icon",
+      "onClose",
+      "className",
+      "children"
+    ]);
+    const isPage = mode === "page";
+    const variantClass = isPage ? pageClasses2[variant] : inlineClasses2[variant];
+    const actionClass = isPage ? actionsPageClasses2[variant] : "text-enabled";
+    const DefaultIcon = defaultIcons2[variant];
+    const iconColorClass = isPage ? "" : inlineIconClasses2[variant];
+    const descColorClass = isPage ? "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
+    const closeColorClass = isPage ? "text-alert-close-inverse hover:text-alert-close-inverse-hover" : "text-alert-close hover:text-alert-close-hover";
+    const classes = [
+      "flex items-start gap-12 font-sans",
+      isPage ? "px-16 py-12" : "px-16 py-12 border-l-4 rounded-lg",
+      variantClass,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `shrink-0 mt-2 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm font-medium leading-20", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `text-sm leading-20 ${descColorClass} ${title ? "mt-4" : ""}`, children: description }),
+        children
+      ] }),
+      action && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `${actionClass} underline text-sm font-medium`, children: action }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: `shrink-0 p-2 rounded transition-colors ${closeColorClass}`,
+          "aria-label": "Close",
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-16 w-16" })
+        }
+      )
+    ] }));
+  }
+);
+FinancialLogo.displayName = "FinancialLogo";
+
+// src/components/Icon/Icon.tsx
+var import_react14 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Icon = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1030,7 +1601,7 @@ var Icon = (0, import_react9.forwardRef)(
       "material-symbols-outlined select-none shrink-0 inline-block leading-none",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "span",
       __spreadProps(__spreadValues({
         ref,
@@ -1052,124 +1623,211 @@ var Icon = (0, import_react9.forwardRef)(
 );
 Icon.displayName = "Icon";
 
-// src/components/Radio/Radio.tsx
-var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var sizeClasses4 = {
-  small: {
-    box: "h-4 w-4",
-    dot: "h-1.5 w-1.5",
-    label: "text-sm leading-5",
-    description: "text-xs leading-4",
-    gap: "gap-2"
-  },
-  medium: {
-    box: "h-5 w-5",
-    dot: "h-2 w-2",
-    label: "text-base leading-6",
-    description: "text-sm leading-5",
-    gap: "gap-2.5"
-  }
+// src/components/Link/Link.tsx
+var import_react15 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var linkStyleClasses = {
+  brand: "font-sans text-link-text-enabled",
+  white: "font-sans text-link-text-enabled-inverse",
+  black: "font-sans text-link-text-enabled-dark",
+  brandLooped: "font-looped text-link-text-enabled",
+  whiteLooped: "font-looped text-link-text-enabled-inverse",
+  blackLooped: "font-looped text-link-text-enabled-dark"
+};
+var linkVariantClasses = {
+  xs: "text-link-extra-small gap-2",
+  sm: "text-link-small gap-2",
+  md: "text-link-medium gap-2",
+  lg: "text-link-large gap-4"
 };
-var Radio = (0, import_react10.forwardRef)(
+var iconVariantClasses = {
+  xs: "w-20 h-20",
+  sm: "w-20 h-20",
+  md: "w-20 h-20",
+  lg: "w-24 h-24"
+};
+function SuccessIcon3({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+var Link = (0, import_react15.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      size = "medium",
+      variant = "sm",
+      isInline = false,
+      linkStyle = "brand",
+      text,
+      href,
+      icon = true,
+      className = "",
+      children
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "isInline",
+      "linkStyle",
+      "text",
+      "href",
+      "icon",
+      "className",
+      "children"
+    ]);
+    const styleClass = linkStyleClasses[linkStyle];
+    const variantClass = linkVariantClasses[variant];
+    const iconClass = iconVariantClasses[variant];
+    const classes = [
+      "flex items-center",
+      isInline ? "underline" : "",
+      styleClass,
+      variantClass,
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { className: "", href, children: text }),
+      icon && !isInline ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SuccessIcon3, { className: iconClass }) : null
+    ] }));
+  }
+);
+Link.displayName = "Link";
+
+// src/components/Radio/Radio.tsx
+var import_react16 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Radio = (0, import_react16.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "sm",
       label,
       description,
       error = false,
-      contrast = false,
       checked,
       defaultChecked,
       disabled = false,
       className = "",
-      id
+      id,
+      name
     } = _b, rest = __objRest(_b, [
       "size",
       "label",
       "description",
       "error",
-      "contrast",
       "checked",
       "defaultChecked",
       "disabled",
       "className",
-      "id"
+      "id",
+      "name"
     ]);
-    const reactId = (0, import_react10.useId)();
+    const reactId = (0, import_react16.useId)();
     const inputId = id != null ? id : reactId;
-    const sz = sizeClasses4[size];
-    const circleBase = [
-      "relative inline-flex items-center justify-center shrink-0",
-      "rounded-full",
-      "border",
-      "transition-colors duration-150",
-      sz.box
-    ].join(" ");
-    let circleState;
-    if (disabled) {
-      circleState = checked ? "bg-radio-disabled-selected-bg border-radio-disabled-border" : "bg-radio-disabled-bg border-radio-disabled-border";
-    } else if (contrast) {
-      circleState = checked ? "bg-radio-contrast-selected-bg border-radio-contrast-selected-bg" : "bg-radio-contrast-bg border-radio-contrast-border";
-    } else if (error) {
-      circleState = checked ? "bg-radio-selected-bg border-radio-error-border" : "bg-radio-error-bg border-radio-error-border";
-    } else if (checked) {
-      circleState = "bg-radio-selected-bg border-radio-selected-border";
-    } else {
-      circleState = "bg-radio-bg border-radio-border hover:border-radio-hover-border";
-    }
-    const ringColor = error ? "peer-focus-visible:ring-radio-error-ring" : contrast ? "peer-focus-visible:ring-radio-contrast-ring" : "peer-focus-visible:ring-radio-ring";
-    const ringClasses = `peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 ${ringColor}`;
-    let dotColor;
-    if (disabled) {
-      dotColor = "bg-radio-disabled-dot";
-    } else if (contrast) {
-      dotColor = "bg-radio-contrast-selected-dot";
-    } else {
-      dotColor = "bg-radio-selected-dot";
-    }
-    const labelColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-label" : error ? "text-radio-label-error" : "text-radio-label";
-    const descriptionColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-description" : "text-radio-description";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "label",
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
       {
-        htmlFor: inputId,
-        className: [
-          "inline-flex items-start font-sans",
-          sz.gap,
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          className
-        ].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "input",
-              __spreadValues({
-                ref,
-                id: inputId,
-                type: "radio",
-                checked,
-                defaultChecked,
-                disabled,
-                className: "peer absolute inset-0 h-full w-full cursor-[inherit] opacity-0"
-              }, rest)
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: [circleBase, circleState, ringClasses].join(" "), children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `rounded-full ${sz.dot} ${dotColor}` }) })
-          ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.description} ${descriptionColor}`, children: description })
-          ] })
-        ]
+        className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          "label",
+          {
+            htmlFor: inputId,
+            className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "input",
+                  __spreadValues({
+                    ref,
+                    id: inputId,
+                    type: "radio",
+                    className: "sr-only peer",
+                    checked,
+                    defaultChecked,
+                    disabled,
+                    name
+                  }, rest)
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                  "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__ */ (0, import_jsx_runtime16.jsx)(
+                      "span",
+                      {
+                        className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+                  ${size === "sm" ? "h-8 w-8" : "h-10 w-10"} 
+                  rounded-full bg-white group-peer-checked:bg-blue-600 group-peer-disabled:bg-white`
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "div",
+                {
+                  className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "p",
+                      {
+                        className: `
+                ${size === "sm" ? "text-label-medium" : "text-label-large"} 
+                ${disabled ? "text-gray-400" : "text-gray-900"}
+              `,
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "p",
+                      {
+                        className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
+                        children: description
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
 );
 Radio.displayName = "Radio";
 
+// src/components/SegmentControl/SegmentControl.tsx
+var import_react17 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SegmentControl = (0, import_react17.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "md", items, selected, setSelected, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "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__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            onClick: () => setSelected == null ? void 0 : setSelected(item.value),
+            className: `cursor-pointer rounded-full text-center grow
+              ${size === "sm" ? "px-8 py-6 text-label-medium" : size === "md" ? "px-12 py-10 text-label-large" : "px-16 py-14 text-label-large"} ${selected === item.value ? "bg-segmented-control-background-active shadow-base text-segmented-control-text-primary hover:bg-segmented-control-background-active-hover" : "bg-segmented-control-background-enabled text-segmented-control-text-primary hover:bg-segmented-control-background-hover"} `,
+            children: item.label
+          },
+          item.value
+        ))
+      })
+    );
+  }
+);
+SegmentControl.displayName = "SegmentControl";
+
 // src/components/Slider/Slider.tsx
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var sizeConfig = {
   small: {
     trackH: "h-4",
@@ -1200,7 +1858,7 @@ var sizeConfig = {
   }
 };
 function ChevronGlyphs({ size, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "svg",
     {
       width: size,
@@ -1210,7 +1868,7 @@ function ChevronGlyphs({ size, color }) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             d: "M4.75 3.25L2.25 6L4.75 8.75",
@@ -1220,7 +1878,7 @@ function ChevronGlyphs({ size, color }) {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "path",
           {
             d: "M7.25 3.25L9.75 6L7.25 8.75",
@@ -1234,7 +1892,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = (0, import_react11.forwardRef)(
+var Slider = (0, import_react18.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -1269,15 +1927,15 @@ var Slider = (0, import_react11.forwardRef)(
       "onChange",
       "aria-label"
     ]);
-    const reactId = (0, import_react11.useId)();
+    const reactId = (0, import_react18.useId)();
     const inputId = id != null ? id : reactId;
     const sz = sizeConfig[size];
     const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
     const ariaDescriptionId = description ? `${inputId}-description` : void 0;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue != null ? defaultValue : min);
+    const [internalValue, setInternalValue] = (0, import_react18.useState)(defaultValue != null ? defaultValue : min);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const handleChange = (0, import_react11.useCallback)(
+    const handleChange = (0, import_react18.useCallback)(
       (e) => {
         const val = Number(e.target.value);
         if (!isControlled) {
@@ -1297,13 +1955,13 @@ var Slider = (0, import_react11.forwardRef)(
     const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
     const thumbOffset = percent * sz.thumbPx / 100;
     const fillOffset = sz.thumbPx / 2 - thumbOffset;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
         children: [
-          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "label",
               {
                 htmlFor: inputId,
@@ -1316,7 +1974,7 @@ var Slider = (0, import_react11.forwardRef)(
                 children: label
               }
             ),
-            showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "span",
               {
                 className: [sz.description, "tabular-nums", labelColor].join(" "),
@@ -1324,7 +1982,7 @@ var Slider = (0, import_react11.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               className: [
@@ -1333,7 +1991,7 @@ var Slider = (0, import_react11.forwardRef)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               ].join(" "),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     className: [
@@ -1343,14 +2001,14 @@ var Slider = (0, import_react11.forwardRef)(
                     ].join(" ")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
                     style: { width: `calc(${percent}% + ${fillOffset}px)` }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "input",
                   __spreadValues({
                     ref,
@@ -1371,7 +2029,7 @@ var Slider = (0, import_react11.forwardRef)(
                     ].join(" ")
                   }, rest)
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "div",
                   {
                     className: [
@@ -1384,13 +2042,13 @@ var Slider = (0, import_react11.forwardRef)(
                       !disabled && "peer-hover:shadow-medium"
                     ].filter(Boolean).join(" "),
                     style: { left: `calc(${percent}% - ${thumbOffset}px)` },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
                   }
                 )
               ]
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               id: ariaDescriptionId,
@@ -1405,31 +2063,345 @@ var Slider = (0, import_react11.forwardRef)(
 );
 Slider.displayName = "Slider";
 
+// src/components/Tab/Tab.tsx
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Tab = (0, import_react19.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      label,
+      value,
+      isDisabled = false,
+      selected,
+      setSelected,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "label",
+      "value",
+      "isDisabled",
+      "selected",
+      "setSelected",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `flex items-center justify-center
+          ${size === "md" ? "text-label-medium px-16 pt-12 pb-8" : "text-label-large p-16"} 
+          ${value === selected ? isDisabled ? "cursor-not-allowed text-gray-400 border-gray-100 border-b-2" : "text-blue-600 border-blue-600 border-b-2 cursor-pointer" : isDisabled ? "cursor-not-allowed text-gray-400" : "text-gray-600 hover:border-b-2 hover:border-gray-200 cursor-pointer"} 
+          ${className}`,
+        onClick: () => !isDisabled && (setSelected == null ? void 0 : setSelected(value))
+      }, rest), {
+        children: label
+      })
+    );
+  }
+);
+Tab.displayName = "Tab";
+
+// src/components/TextArea/TextArea.tsx
+var import_react20 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var TextArea = (0, import_react20.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      maxText = 500,
+      height = 100,
+      error,
+      label,
+      placeholder,
+      description,
+      icon,
+      isDisabled = false,
+      isLoading = false,
+      isVertify = false,
+      isClearable = true,
+      disabled,
+      value,
+      onChange
+    } = _b, props = __objRest(_b, [
+      "maxText",
+      "height",
+      "error",
+      "label",
+      "placeholder",
+      "description",
+      "icon",
+      "isDisabled",
+      "isLoading",
+      "isVertify",
+      "isClearable",
+      "disabled",
+      "value",
+      "onChange"
+    ]);
+    const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full flex flex-col gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "w-full flex justify-between items-center ", children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "p",
+          {
+            className: `text-label-medium text-left items-left ${isDisabled || disabled ? "text-gray-400" : "text-gray-900"}`,
+            children: label
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {}),
+        maxText ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-gray-400 text-caption-caption", children: [
+          " ",
+          (value == null ? void 0 : value.length) || 0,
+          " / ",
+          maxText
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "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__ */ (0, import_jsx_runtime20.jsx)(
+          Loading,
+          {
+            size: "sm",
+            className: `absolute right-12 top-12`
+          }
+        ) : isClearable && isFocused && value ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "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__ */ (0, import_jsx_runtime20.jsx)(
+              "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: "#111827"
+              }
+            )
+          }
+        ) : isVertify ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "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__ */ (0, import_jsx_runtime20.jsx)(
+              "path",
+              {
+                "fill-rule": "evenodd",
+                "clip-rule": "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"
+              }
+            )
+          }
+        ) : error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "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__ */ (0, import_jsx_runtime20.jsx)(
+              "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: "#EF4444"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {})
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-caption-caption text-left items-left text-red-600", children: error }) : description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-caption-caption text-left items-left text-gray-600", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {})
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+// src/components/TextField/TextField.tsx
+var import_react21 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TextField = (0, import_react21.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      inputSize,
+      error,
+      label,
+      placeholder,
+      description,
+      icon,
+      isDisabled = false,
+      isLoading = false,
+      isVertify = false,
+      isUnrequired = false,
+      isClearable = true,
+      disabled,
+      value,
+      onChange
+    } = _b, props = __objRest(_b, [
+      "inputSize",
+      "error",
+      "label",
+      "placeholder",
+      "description",
+      "icon",
+      "isDisabled",
+      "isLoading",
+      "isVertify",
+      "isUnrequired",
+      "isClearable",
+      "disabled",
+      "value",
+      "onChange"
+    ]);
+    const [isFocused, setIsFocused] = (0, import_react21.useState)(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "w-full flex flex-col gap-4", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        "p",
+        {
+          className: `text-label-medium text-left items-left ${isDisabled || disabled ? "text-gray-400" : "text-gray-900"}`,
+          children: [
+            label,
+            " ",
+            isUnrequired && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-gray-400", children: `(\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E07\u0E04\u0E31\u0E1A)` })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "input",
+          __spreadValues({
+            ref,
+            name: "text-input",
+            type: "text",
+            placeholder,
+            disabled: isDisabled || disabled || isLoading,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            value,
+            onChange,
+            className: `w-full ${inputSize === "md" ? "px-16 py-12 focus:px-15 focus:py-11" : "p-16 focus:p-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__ */ (0, import_jsx_runtime21.jsx)(
+          Loading,
+          {
+            size: "sm",
+            className: `absolute right-16 top-1/2 -translate-y-1/2`
+          }
+        ) : isClearable && isFocused && value ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "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) => {
+              e.preventDefault();
+              onChange == null ? void 0 : onChange({ target: { value: "" } });
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "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: "#111827"
+              }
+            )
+          }
+        ) : isVertify ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "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__ */ (0, import_jsx_runtime21.jsx)(
+              "path",
+              {
+                "fill-rule": "evenodd",
+                "clip-rule": "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"
+              }
+            )
+          }
+        ) : error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "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__ */ (0, import_jsx_runtime21.jsx)(
+              "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: "#EF4444"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {})
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-caption-caption text-left items-left text-red-600", children: error }) : description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-caption-caption text-left items-left text-gray-600", children: description }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {})
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+
 // src/components/Toast/Toast.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function CheckCircleIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
 function ProgressIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
   ] });
 }
 function ErrorIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
-function CloseIcon2({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function CloseIcon3({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-var defaultIcons2 = {
+var defaultIcons3 = {
   default: CheckCircleIcon,
   progress: ProgressIcon,
   error: ErrorIcon
@@ -1444,7 +2416,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = (0, import_react12.forwardRef)(
+var Toast = (0, import_react22.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -1463,7 +2435,7 @@ var Toast = (0, import_react12.forwardRef)(
       "children",
       "className"
     ]);
-    const DefaultIcon = defaultIcons2[type];
+    const DefaultIcon = defaultIcons3[type];
     const classes = [
       "inline-flex items-center gap-12 font-sans",
       "rounded-xl px-16 py-12",
@@ -1472,10 +2444,10 @@ var Toast = (0, import_react12.forwardRef)(
       typeClasses[type],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
-      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
+      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           type: "button",
@@ -1484,20 +2456,156 @@ var Toast = (0, import_react12.forwardRef)(
           children: actionLabel
         }
       ),
-      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "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__ */ (0, import_jsx_runtime12.jsx)(CloseIcon2, { className: "h-16 w-16" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CloseIcon3, { className: "h-16 w-16" })
         }
       )
     ] }));
   }
 );
 Toast.displayName = "Toast";
+
+// src/components/ToggleSwitch/ToggleSwitch.tsx
+var import_react23 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ToggleSwitch = (0, import_react23.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      isDisabled = false,
+      isSelected,
+      setIsSelected,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "isDisabled",
+      "isSelected",
+      "setIsSelected",
+      "className"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      "label",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `inline-flex items-center ${className}`
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              value,
+              className: "sr-only peer",
+              checked: isSelected,
+              onChange: () => !isDisabled && (setIsSelected == null ? void 0 : setIsSelected(!isSelected))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "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 `
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+ToggleSwitch.displayName = "ToggleSwitch";
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react24 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Tooltip = (0, import_react24.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      children,
+      headText,
+      text,
+      position = "top",
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "children",
+      "headText",
+      "text",
+      "position",
+      "className"
+    ]);
+    const wrapperRef = (0, import_react24.useRef)(null);
+    const [isVisible, setIsVisible] = (0, import_react24.useState)(false);
+    const [isHovered, setIsHovered] = (0, import_react24.useState)(false);
+    (0, import_react24.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsVisible(false);
+          setIsHovered(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({
+        className: `group relative inline-block ${className}`,
+        ref
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "div",
+            {
+              ref: wrapperRef,
+              onClick: () => {
+                if (isVisible) {
+                  setIsVisible(false);
+                  setIsHovered(false);
+                } else {
+                  setIsVisible(true);
+                }
+              },
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "div",
+            {
+              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__ */ (0, import_jsx_runtime24.jsx)(
+                  "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__ */ (0, import_jsx_runtime24.jsx)(
+                  "p",
+                  {
+                    className: `text-sm text-white font-semibold text-center ${text ? "mb-5" : ""}`,
+                    children: headText
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {}),
+                text ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-xs text-white font-normal text-center text-wrap", children: text }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {})
+              ]
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1505,11 +2613,23 @@ Toast.displayName = "Toast";
   Avatar,
   Badge,
   BottomSheet,
+  Branding,
   Button,
   Checkbox,
+  Chip,
   Dialog,
+  Dropdown,
+  FinancialLogo,
   Icon,
+  Link,
+  Loading,
   Radio,
+  SegmentControl,
   Slider,
-  Toast
+  Tab,
+  TextArea,
+  TextField,
+  Toast,
+  ToggleSwitch,
+  Tooltip
 });