@refinn/core-ui 0.1.7 → 0.1.8

package/dist/index.js

@@ -489,12 +489,12 @@ var Branding = forwardRef5(
             viewBox: "0 0 89 20",
             fill: "currentColor",
             children: [
-              /* @__PURE__ */ jsxs5("g", { "clip-path": "url(#clip0_828_998)", children: [
+              /* @__PURE__ */ jsxs5("g", { clipPath: "url(#clip0_828_998)", children: [
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -509,8 +509,8 @@ var Branding = forwardRef5(
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -518,8 +518,8 @@ var Branding = forwardRef5(
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -527,8 +527,8 @@ var Branding = forwardRef5(
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -536,8 +536,8 @@ var Branding = forwardRef5(
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -545,8 +545,8 @@ var Branding = forwardRef5(
                 /* @__PURE__ */ jsx5(
                   "path",
                   {
-                    "fill-rule": "evenodd",
-                    "clip-rule": "evenodd",
+                    fillRule: "evenodd",
+                    clipRule: "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"
                   }
@@ -997,8 +997,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Chip/Chip.tsx
 import {
-  forwardRef as forwardRef10,
-  useState as useState4
+  forwardRef as forwardRef10
 } from "react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var sizeClasses4 = {
@@ -1029,7 +1028,7 @@ var Chip = forwardRef10(
       icon,
       isOutlined = false,
       isDark = false,
-      defaultSelected = false,
+      isSelected = false,
       disabled = false,
       className = ""
     } = _b, rest = __objRest(_b, [
@@ -1040,11 +1039,10 @@ var Chip = forwardRef10(
       "icon",
       "isOutlined",
       "isDark",
-      "defaultSelected",
+      "isSelected",
       "disabled",
       "className"
     ]);
-    const [selected, setSelected] = useState4(defaultSelected);
     const sz = sizeClasses4[size];
     const outlinedClass = isOutlinedClasses[String(isOutlined)];
     const darkClass = isDarkClasses[String(isDark)];
@@ -1054,7 +1052,7 @@ var Chip = forwardRef10(
       outlinedClass,
       sz,
       className,
-      selected ? darkClass : ""
+      isSelected ? darkClass : ""
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs10(
       "div",
@@ -1062,7 +1060,6 @@ var Chip = forwardRef10(
         ref,
         className: containerClasses
       }, rest), {
-        onClick: () => !disabled && setSelected(!selected),
         children: [
           icon ? icon : src && /* @__PURE__ */ jsx10("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
           label
@@ -1203,7 +1200,12 @@ var Dialog = forwardRef11(
 Dialog.displayName = "Dialog";
 
 // src/components/Dropdown/Dropdown.tsx
-import { useState as useState6, useRef, useEffect as useEffect3 } from "react";
+import {
+  useState as useState6,
+  useRef,
+  useEffect as useEffect3,
+  forwardRef as forwardRef12
+} from "react";
 import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var IconDanger = () => /* @__PURE__ */ jsx12(
   "svg",
@@ -1262,162 +1264,189 @@ function ChevronDown({ className }) {
     }
   );
 }
-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] = useState6(false);
-  const [search, setSearch] = useState6("");
-  const dropdownRef = useRef(null);
-  const filteredItems = dropDownItems.filter(
-    (item) => item.label.toLowerCase().includes(search.toLowerCase())
-  );
-  useEffect3(() => {
-    function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs12("div", { className: "w-full", children: [
-    label ? /* @__PURE__ */ jsx12(
-      "p",
-      {
-        className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
-        children: label
+var Dropdown = forwardRef12(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      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" }
+      ],
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "error",
+      "label",
+      "placeholder",
+      "isDisabled",
+      "isSearchable",
+      "isTextCenter",
+      "value",
+      "setValue",
+      "dropDownItems",
+      "className"
+    ]);
+    const [isOpen, setIsOpen] = useState6(false);
+    const [search, setSearch] = useState6("");
+    const dropdownRef = useRef(null);
+    const filteredItems = dropDownItems.filter(
+      (item) => item.label.toLowerCase().includes(search.toLowerCase())
+    );
+    useEffect3(() => {
+      function handleClickOutside(event) {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
       }
-    ) : /* @__PURE__ */ jsx12(Fragment2, {}),
-    /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxs12(
-        "button",
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs12("div", { className: "w-full", children: [
+      label ? /* @__PURE__ */ jsx12(
+        "p",
         {
-          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__ */ jsx12("p", { className: `grow ${isTextCenter ? "text-center" : "text-start"}`, children: value.label || placeholder }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-8", children: [
-              isDisabled ? /* @__PURE__ */ jsx12(Fragment2, {}) : error ? /* @__PURE__ */ jsx12(IconDanger, {}) : /* @__PURE__ */ jsx12(Fragment2, {}),
+          className: `text-label-medium text-left items-left font-medium mb-4 ${isDisabled ? "text-dropdown-text-disabled" : "text-dropdown-text-primary"}`,
+          children: label
+        }
+      ) : /* @__PURE__ */ jsx12(Fragment2, {}),
+      /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col relative", ref: dropdownRef, children: [
+        /* @__PURE__ */ jsxs12(
+          "div",
+          __spreadProps(__spreadValues({
+            ref
+          }, rest), {
+            onClick: () => !isDisabled && setIsOpen(!isOpen),
+            className: `w-full rounded-md text-body-small px-16  text-center inline-flex gap-8 items-center border **:focus:outline-none focus:border-2 focus:px-15 focus:py-9
+            ${size === "lg" ? "py-14" : "py-10"}
+            ${isDisabled ? "text-dropdown-text-disabled cursor-not-allowed" : value ? "text-dropdown-text-primary cursor-pointer" : "text-dropdown-text-secondary cursor-pointer"}
+            ${isDisabled ? "pointer-events-none bg-dropdown-background-disabled border-dropdown-border-disabled" : error ? "border-red-600 bg-dropdown-background-enabled focus:border-red-600" : value ? "text-dropdown-text-primary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active " : "text-dropdown-text-secondary bg-dropdown-background-enabled border-dropdown-border-enabled focus:border-dropdown-border-active "}
+            ${className}`,
+            children: [
               /* @__PURE__ */ jsx12(
-                ChevronDown,
+                "p",
                 {
-                  className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
+                  className: `grow ${isTextCenter ? "text-center" : "text-start"}`,
+                  children: value.label || placeholder
                 }
-              )
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs12(
-        "div",
-        {
-          id: "dropdownSearch",
-          className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-8 absolute z-10000 bg-white-100 rounded-lg shadow-base w-9/10 min-w-fit flex-col`,
-          children: [
-            isSearchable ? /* @__PURE__ */ jsxs12("div", { className: "p-3", children: [
-              /* @__PURE__ */ jsx12("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
-              /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ jsxs12(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    fill: "none",
-                    children: [
-                      /* @__PURE__ */ jsx12(
-                        "mask",
-                        {
-                          id: "mask0_3218_5077",
-                          style: { maskType: "alpha" },
-                          maskUnits: "userSpaceOnUse",
-                          x: "0",
-                          y: "0",
-                          width: "20",
-                          height: "20",
-                          children: /* @__PURE__ */ jsx12("rect", { width: "20", height: "20", fill: "#D9D9D9" })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx12("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ jsx12(
-                        "path",
-                        {
-                          d: "M15.8894 16.6476L10.9263 11.6842C10.5096 12.0005 10.0527 12.2454 9.55563 12.419C9.05855 12.5926 8.54556 12.6794 8.01667 12.6794C6.7182 12.6794 5.61354 12.2241 4.70271 11.3134C3.79202 10.4026 3.33667 9.29811 3.33667 8.00005C3.33667 6.702 3.79202 5.59755 4.70271 4.68672C5.61354 3.77603 6.71799 3.32068 8.01604 3.32068C9.3141 3.32068 10.4185 3.77603 11.3294 4.68672C12.2401 5.59755 12.6954 6.70221 12.6954 8.00068C12.6954 8.54554 12.606 9.06651 12.4271 9.56359C12.2481 10.0608 12.0058 10.5097 11.7002 10.9103L16.6633 15.8734L15.8894 16.6476ZM8.01604 11.5963C9.02035 11.5963 9.87077 11.248 10.5673 10.5513C11.264 9.85478 11.6123 9.00436 11.6123 8.00005C11.6123 6.99575 11.264 6.14533 10.5673 5.4488C9.87077 4.75214 9.02035 4.4038 8.01604 4.4038C7.01174 4.4038 6.16132 4.75214 5.46479 5.4488C4.76813 6.14533 4.41979 6.99575 4.41979 8.00005C4.41979 9.00436 4.76813 9.85478 5.46479 10.5513C6.16132 11.248 7.01174 11.5963 8.01604 11.5963Z",
-                          fill: "#111827"
-                        }
-                      ) })
-                    ]
-                  }
-                ) }),
+              ),
+              /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-8", children: [
+                isDisabled ? /* @__PURE__ */ jsx12(Fragment2, {}) : error ? /* @__PURE__ */ jsx12(IconDanger, {}) : /* @__PURE__ */ jsx12(Fragment2, {}),
                 /* @__PURE__ */ jsx12(
-                  "input",
+                  ChevronDown,
                   {
-                    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)
+                    className: `h-20 w-20 duration-300 ${isOpen ? "rotate-180" : ""}`
                   }
                 )
               ] })
-            ] }) : /* @__PURE__ */ jsx12(Fragment2, {}),
-            /* @__PURE__ */ jsx12(
-              "ul",
-              {
-                className: "h-auto max-h-392 overflow-y-auto cursor-pointer",
-                "aria-labelledby": "dropdownSearchButton",
-                children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs12(
-                  "div",
-                  {
-                    onClick: () => {
-                      setValue(item);
-                      setSearch("");
-                      setIsOpen(false);
-                    },
-                    className: "relative text-gray-900 py-12 px-16 rounded-sm text-label-medium hover:bg-gray-100",
-                    children: [
-                      item.label,
-                      value.value === item.value && /* @__PURE__ */ jsx12(IconCheck, { className: "absolute h-20 w-20 right-24 top-2 translate-y-1/2" })
-                    ]
-                  }
-                ) }, idx)) : /* @__PURE__ */ jsx12("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
-              }
-            )
-          ]
+            ]
+          })
+        ),
+        /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            id: "dropdownSearch",
+            className: `${isOpen ? "flex" : "hidden"} top-[calc(100%+4px)] left-8 absolute z-10000 bg-white-100 rounded-lg shadow-base w-9/10 min-w-fit flex-col`,
+            children: [
+              isSearchable ? /* @__PURE__ */ jsxs12("div", { className: "p-3", children: [
+                /* @__PURE__ */ jsx12("label", { htmlFor: "input-group-search", className: "sr-only", children: "Search" }),
+                /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsx12("div", { className: "absolute inset-y-0 rtl:inset-r-0 inset-s-0 flex items-center ps-12 pointer-events-none", children: /* @__PURE__ */ jsxs12(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 20 20",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ jsx12(
+                          "mask",
+                          {
+                            id: "mask0_3218_5077",
+                            style: { maskType: "alpha" },
+                            maskUnits: "userSpaceOnUse",
+                            x: "0",
+                            y: "0",
+                            width: "20",
+                            height: "20",
+                            children: /* @__PURE__ */ jsx12("rect", { width: "20", height: "20", fill: "#D9D9D9" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx12("g", { mask: "url(#mask0_3218_5077)", children: /* @__PURE__ */ jsx12(
+                          "path",
+                          {
+                            d: "M15.8894 16.6476L10.9263 11.6842C10.5096 12.0005 10.0527 12.2454 9.55563 12.419C9.05855 12.5926 8.54556 12.6794 8.01667 12.6794C6.7182 12.6794 5.61354 12.2241 4.70271 11.3134C3.79202 10.4026 3.33667 9.29811 3.33667 8.00005C3.33667 6.702 3.79202 5.59755 4.70271 4.68672C5.61354 3.77603 6.71799 3.32068 8.01604 3.32068C9.3141 3.32068 10.4185 3.77603 11.3294 4.68672C12.2401 5.59755 12.6954 6.70221 12.6954 8.00068C12.6954 8.54554 12.606 9.06651 12.4271 9.56359C12.2481 10.0608 12.0058 10.5097 11.7002 10.9103L16.6633 15.8734L15.8894 16.6476ZM8.01604 11.5963C9.02035 11.5963 9.87077 11.248 10.5673 10.5513C11.264 9.85478 11.6123 9.00436 11.6123 8.00005C11.6123 6.99575 11.264 6.14533 10.5673 5.4488C9.87077 4.75214 9.02035 4.4038 8.01604 4.4038C7.01174 4.4038 6.16132 4.75214 5.46479 5.4488C4.76813 6.14533 4.41979 6.99575 4.41979 8.00005C4.41979 9.00436 4.76813 9.85478 5.46479 10.5513C6.16132 11.248 7.01174 11.5963 8.01604 11.5963Z",
+                            fill: "#111827"
+                          }
+                        ) })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx12(
+                    "input",
+                    {
+                      type: "text",
+                      className: "block w-full p-8 ps-40 text-body-small text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-bubblegum focus:border-bubblegum",
+                      placeholder: "Search...",
+                      value: search,
+                      onChange: (e) => setSearch(e.target.value)
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsx12(Fragment2, {}),
+              /* @__PURE__ */ jsx12(
+                "ul",
+                {
+                  className: "h-auto max-h-200 overflow-y-auto cursor-pointer",
+                  "aria-labelledby": "dropdownSearchButton",
+                  children: filteredItems.length > 0 ? filteredItems.map((item, idx) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs12(
+                    "div",
+                    {
+                      onClick: () => {
+                        setValue(item);
+                        setSearch("");
+                        setIsOpen(false);
+                      },
+                      className: "relative text-gray-900 py-12 px-16 rounded-sm text-label-medium hover:bg-gray-100 flex items-center justify-between gap-12",
+                      children: [
+                        /* @__PURE__ */ jsx12("p", { className: "text-label-medium text-dropdown-text-primary", children: item.label }),
+                        value.value === item.value && /* @__PURE__ */ jsx12(IconCheck, { className: "h-20 w-20" })
+                      ]
+                    }
+                  ) }, idx)) : /* @__PURE__ */ jsx12("li", { className: "px-8 py-8 text-label-medium text-gray-900", children: "No results found" })
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx12(
+        "p",
+        {
+          className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
+          children: error
         }
-      )
-    ] }),
-    error ? /* @__PURE__ */ jsx12(
-      "p",
-      {
-        className: `text-caption-caption text-left items-left text-dropdown-text-danger mt-4 ${isDisabled ? "hidden" : ""}`,
-        children: error
-      }
-    ) : /* @__PURE__ */ jsx12(Fragment2, {})
-  ] });
-};
+      ) : /* @__PURE__ */ jsx12(Fragment2, {})
+    ] });
+  }
+);
 Dropdown.displayName = "Dropdown";
 
 // src/components/FinancialLogo/FinancialLogo.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 var inlineClasses2 = {
   info: "bg-alert-inline-info-bg border-alert-inline-info-border text-alert-text-primary",
@@ -1475,7 +1504,7 @@ var defaultIcons2 = {
   danger: DangerIcon2,
   common: CommonIcon
 };
-var FinancialLogo = forwardRef12(
+var FinancialLogo = forwardRef13(
   (_a, ref) => {
     var _b = _a, {
       variant = "info",
@@ -1535,9 +1564,9 @@ var FinancialLogo = forwardRef12(
 FinancialLogo.displayName = "FinancialLogo";
 
 // src/components/Icon/Icon.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-var Icon = forwardRef13(
+var Icon = forwardRef14(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1588,7 +1617,7 @@ var Icon = forwardRef13(
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var linkStyleClasses = {
   brand: "font-sans text-link-text-enabled",
@@ -1616,7 +1645,7 @@ function SuccessIcon3({ className }) {
     /* @__PURE__ */ jsx15("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
-var Link = forwardRef14(
+var Link = forwardRef15(
   (_a, ref) => {
     var _b = _a, {
       variant = "sm",
@@ -1641,7 +1670,7 @@ var Link = forwardRef14(
     const variantClass = linkVariantClasses[variant];
     const iconClass = iconVariantClasses[variant];
     const classes = [
-      "flex items-center",
+      "flex items-center cursor-pointer",
       isInline ? "underline" : "",
       styleClass,
       variantClass,
@@ -1657,11 +1686,11 @@ Link.displayName = "Link";
 
 // src/components/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef15,
+  forwardRef as forwardRef16,
   useId as useId3
 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var Radio = forwardRef15(
+var Radio = forwardRef16(
   (_a, ref) => {
     var _b = _a, {
       size = "sm",
@@ -1766,10 +1795,10 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentControl/SegmentControl.tsx
 import {
-  forwardRef as forwardRef16
+  forwardRef as forwardRef17
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var SegmentControl = forwardRef16(
+var SegmentControl = forwardRef17(
   (_a, ref) => {
     var _b = _a, { size = "md", items, selected, setSelected, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "className"]);
     return /* @__PURE__ */ jsx17(
@@ -1796,7 +1825,7 @@ SegmentControl.displayName = "SegmentControl";
 
 // src/components/Slider/Slider.tsx
 import {
-  forwardRef as forwardRef17,
+  forwardRef as forwardRef18,
   useCallback as useCallback4,
   useId as useId4,
   useState as useState8
@@ -1866,7 +1895,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = forwardRef17(
+var Slider = forwardRef18(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -2038,9 +2067,9 @@ var Slider = forwardRef17(
 Slider.displayName = "Slider";
 
 // src/components/Tab/Tab.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var Tab = forwardRef18(
+var Tab = forwardRef19(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
@@ -2063,9 +2092,9 @@ var Tab = forwardRef18(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: `flex items-center justify-center
+        className: `flex items-center justify-center border-b-2
           ${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"} 
+          ${value === selected ? isDisabled ? "cursor-not-allowed text-gray-400 border-tab-border-disabled" : "text-blue-600 border-blue-600 cursor-pointer" : isDisabled ? "cursor-not-allowed text-gray-400 border-tab-border-disabled" : "text-gray-600 border-tab-border-enabled hover:border-gray-200 cursor-pointer"} 
           ${className}`,
         onClick: () => !isDisabled && (setSelected == null ? void 0 : setSelected(value))
       }, rest), {
@@ -2079,10 +2108,10 @@ Tab.displayName = "Tab";
 // src/components/TextArea/TextArea.tsx
 import {
   useState as useState9,
-  forwardRef as forwardRef19
+  forwardRef as forwardRef20
 } from "react";
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var TextArea = forwardRef19(
+var TextArea = forwardRef20(
   (_a, ref) => {
     var _b = _a, {
       maxText = 500,
@@ -2221,10 +2250,10 @@ TextArea.displayName = "TextArea";
 // src/components/TextField/TextField.tsx
 import {
   useState as useState10,
-  forwardRef as forwardRef20
+  forwardRef as forwardRef21
 } from "react";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
-var TextField = forwardRef20(
+var TextField = forwardRef21(
   (_a, ref) => {
     var _b = _a, {
       inputSize,
@@ -2239,6 +2268,7 @@ var TextField = forwardRef20(
       isUnrequired = false,
       isClearable = true,
       disabled,
+      type,
       value,
       onChange
     } = _b, props = __objRest(_b, [
@@ -2254,6 +2284,7 @@ var TextField = forwardRef20(
       "isUnrequired",
       "isClearable",
       "disabled",
+      "type",
       "value",
       "onChange"
     ]);
@@ -2275,8 +2306,7 @@ var TextField = forwardRef20(
           "input",
           __spreadValues({
             ref,
-            name: "text-input",
-            type: "text",
+            type: type || "text",
             placeholder,
             disabled: isDisabled || disabled || isLoading,
             onFocus: () => setIsFocused(true),
@@ -2358,7 +2388,7 @@ var TextField = forwardRef20(
 TextField.displayName = "TextField";
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function CheckCircleIcon({ className }) {
   return /* @__PURE__ */ jsxs19("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
@@ -2367,10 +2397,7 @@ function CheckCircleIcon({ className }) {
   ] });
 }
 function ProgressIcon({ className }) {
-  return /* @__PURE__ */ jsxs19("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx22("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
-    /* @__PURE__ */ jsx22("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx22("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
-  ] });
+  return /* @__PURE__ */ jsx22(Loading, { size: "sm", className });
 }
 function ErrorIcon({ className }) {
   return /* @__PURE__ */ jsxs19("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
@@ -2396,7 +2423,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = forwardRef21(
+var Toast = forwardRef22(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -2452,9 +2479,9 @@ var Toast = forwardRef21(
 Toast.displayName = "Toast";
 
 // src/components/ToggleSwitch/ToggleSwitch.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
-var ToggleSwitch = forwardRef22(
+var ToggleSwitch = forwardRef23(
   (_a, ref) => {
     var _b = _a, {
       value,
@@ -2504,10 +2531,10 @@ import {
   useState as useState11,
   useEffect as useEffect6,
   useRef as useRef4,
-  forwardRef as forwardRef23
+  forwardRef as forwardRef24
 } from "react";
 import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
-var Tooltip = forwardRef23(
+var Tooltip = forwardRef24(
   (_a, ref) => {
     var _b = _a, {
       size = "md",