@starasia/dropdown 3.5.1 → 4.0.0

package/dist/dropdown.es.js

@@ -1,6 +1,6 @@
-import { jsxs as l, jsx as n, Fragment as tn } from "react/jsx-runtime";
-import _, { useState as F, useRef as I, useEffect as g, forwardRef as dn } from "react";
-const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+import { jsxs as l, jsx as n, Fragment as sn } from "react/jsx-runtime";
+import T, { useState as P, useRef as B, useEffect as g, forwardRef as ln } from "react";
+const pn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -116,6 +116,7 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   background-color: transparent;
   border: 0.8px solid var(--sa-dropdown-border-subtle);
   border-radius: var(--borderRadius);
+  outline: none;
 }
 .sa-input-dropdown-container.outline.active {
   border: 1.2px solid var(--sa-dropdown-border-active);
@@ -365,9 +366,12 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
   display: flex;
   flex-direction: column;
   gap: 6px;
-  width: 100%;
+  width: max-content;
   font-family: "Poppins", sans-serif;
 }
+.sa-select-field-fullwidth {
+  width: 100%;
+}
 .sa-select-field-left {
   flex-direction: row;
   align-items: flex-start;
@@ -447,15 +451,15 @@ const sn = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@3
 }
 
 `;
-function ln(e) {
-  const [p, d] = F(e), s = I(null), r = (o) => {
+function cn(e) {
+  const [p, d] = P(e), s = B(null), r = (o) => {
     s.current && !s.current.contains(o.target) && d(!1);
   };
   return g(() => (document.addEventListener("click", r, !0), () => {
     document.removeEventListener("click", r, !0);
   }), []), { ref: s, isComponentVisible: p, setIsComponentVisible: d };
 }
-const pn = ({ ...e }) => /* @__PURE__ */ l(
+const un = ({ ...e }) => /* @__PURE__ */ l(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -487,7 +491,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
       )
     ]
   }
-), cn = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), wn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -506,7 +510,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
       }
     )
   }
-), un = dn(
+), hn = ln(
   ({
     positionDropdown: e,
     dropdownLists: p,
@@ -514,78 +518,78 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
     searchAble: s,
     onSearch: r,
     value: o,
-    handleChangeValue: y,
+    handleChangeValue: N,
     multiSelect: u,
-    searchValue: H,
+    searchValue: F,
     highlightedIndex: m,
-    footer: A,
-    groupLabel: D,
-    onSelectAll: j
-  }, M) => {
-    const L = I([]);
+    footer: I,
+    groupLabel: j,
+    onSelectAll: A
+  }, H) => {
+    const R = B([]);
     g(() => {
       var a;
-      m >= 0 && L.current[m] && ((a = L.current[m]) == null || a.scrollIntoView({ block: "nearest" }));
+      m >= 0 && R.current[m] && ((a = R.current[m]) == null || a.scrollIntoView({ block: "nearest" }));
     }, [m]);
-    const O = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
-      /* @__PURE__ */ n(pn, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
+    const D = s ? /* @__PURE__ */ l("div", { className: "sa-input-dropdown-container-dropdown-search", children: [
+      /* @__PURE__ */ n(un, { strokeWidth: 2, width: 16, style: { flexShrink: 0, color: "var(--sa-dropdown-placeholder-subtle)" } }),
       /* @__PURE__ */ n(
         "input",
         {
           onChange: (a) => {
             r && r(a.target.value);
           },
-          value: H,
+          value: F,
           autoFocus: !0,
           placeholder: "Search..."
         }
       )
     ] }) : null;
-    return /* @__PURE__ */ n(tn, { children: d ? /* @__PURE__ */ l(
+    return /* @__PURE__ */ n(sn, { children: d ? /* @__PURE__ */ l(
       "div",
       {
         className: "sa-input-dropdown-lists-container",
         onClick: (a) => a.stopPropagation(),
-        ref: M,
+        ref: H,
         children: [
-          e !== "top" && O,
+          e !== "top" && D,
           /* @__PURE__ */ l(
             "div",
             {
               className: `sa-input-dropdwon-item-container ${u ? "multi" : ""}`,
               children: [
-                D && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
-                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: D }),
-                  u && j && /* @__PURE__ */ n(
+                j && /* @__PURE__ */ l("div", { className: "sa-input-dropdown-section-header", children: [
+                  /* @__PURE__ */ n("span", { className: "sa-input-dropdown-section-label", children: j }),
+                  u && A && /* @__PURE__ */ n(
                     "button",
                     {
                       className: "sa-input-dropdown-section-select-all",
                       onClick: (a) => {
-                        a.stopPropagation(), j();
+                        a.stopPropagation(), A();
                       },
                       children: "Select all"
                     }
                   )
                 ] }),
-                p.map((a, R) => {
-                  const W = !!(o != null && o.find((S) => S.value === a.value)), z = !!a.description;
+                p.map((a, z) => {
+                  const O = !!(o != null && o.find((k) => k.value === a.value)), M = !!a.description;
                   return /* @__PURE__ */ l(
                     "div",
                     {
                       className: [
                         "sa-input-dropdwon-item",
-                        z ? "has-description" : "",
-                        W ? "active" : "",
-                        R === m ? "highlight" : "",
+                        M ? "has-description" : "",
+                        O ? "active" : "",
+                        z === m ? "highlight" : "",
                         a.disable ? "sa-input-dropdwon-item-disable" : ""
                       ].filter(Boolean).join(" "),
-                      ref: (S) => {
-                        L.current[R] = S;
+                      ref: (k) => {
+                        R.current[z] = k;
                       },
-                      onClick: () => y(a.label, a.value),
+                      onClick: () => N(a.label, a.value),
                       children: [
-                        u && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: W && /* @__PURE__ */ n(cn, { width: 16 }) }),
-                        a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0, display: "flex" }, children: _.cloneElement(a.icon, { width: 16 }) }),
+                        u && /* @__PURE__ */ n("div", { className: "sa-input-dropdwon-item-check", children: O && /* @__PURE__ */ n(wn, { width: 16 }) }),
+                        a.icon && /* @__PURE__ */ n("div", { style: { flexShrink: 0, display: "flex" }, children: T.cloneElement(a.icon, { width: 16 }) }),
                         /* @__PURE__ */ l("div", { style: { minWidth: 0, flex: 1 }, children: [
                           /* @__PURE__ */ n(
                             "p",
@@ -610,25 +614,25 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
                         ] })
                       ]
                     },
-                    R
+                    z
                   );
                 })
               ]
             }
           ),
-          e === "top" && O,
-          A && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: A })
+          e === "top" && D,
+          I && /* @__PURE__ */ n("div", { className: "sa-input-dropdown-footer", onClick: (a) => a.stopPropagation(), children: I })
         ]
       }
     ) : null });
   }
-), wn = ({
+), fn = ({
   children: e,
   handleChangePosition: p
 }) => {
-  const d = I(null);
+  const d = B(null);
   g(() => {
-    var y;
+    var N;
     const r = () => {
       if (d.current) {
         let u = d.current.parentElement;
@@ -637,7 +641,7 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
         u && p();
       }
     };
-    let o = (y = d.current) == null ? void 0 : y.parentElement;
+    let o = (N = d.current) == null ? void 0 : N.parentElement;
     for (; o && !s(o); )
       o = o.parentElement;
     return o && o.addEventListener("scroll", r), r(), () => {
@@ -646,203 +650,207 @@ const pn = ({ ...e }) => /* @__PURE__ */ l(
   }, []);
   const s = (r) => r && (r.scrollHeight > r.clientHeight || r.scrollWidth > r.clientWidth);
   return /* @__PURE__ */ n("div", { ref: d, children: e });
-}, X = "sa-input-dropdown-styles", hn = (e) => {
-  if (!document.getElementById(X)) {
+}, Y = "sa-input-dropdown-styles", bn = (e) => {
+  if (!document.getElementById(Y)) {
     const p = document.createElement("style");
-    p.id = X, p.textContent = e, document.head.appendChild(p);
+    p.id = Y, p.textContent = e, document.head.appendChild(p);
   }
 };
-hn(sn);
-const mn = ({
+bn(pn);
+const yn = ({
   dropdownLists: e,
   onChange: p,
   defaultValue: d,
   value: s,
   size: r = "md",
   multiSelect: o,
-  searchAble: y,
+  searchAble: N,
   iconLeft: u,
-  placeholder: H,
+  placeholder: F,
   onSearch: m,
-  error: A,
-  onBlur: D,
-  onFocus: j,
-  disable: M,
-  searchValue: L,
-  variant: O = "outline",
+  error: I,
+  onBlur: j,
+  onFocus: A,
+  disable: H,
+  searchValue: R,
+  variant: D = "outline",
   footer: a,
-  groupLabel: R,
-  onSelectAll: W,
+  groupLabel: z,
+  onSelectAll: O,
+  fullWidth: M = !1,
   /* field wrapper */
-  label: z,
-  labelPosition: S = "outside-top",
-  required: U,
-  optional: Z,
-  description: N,
-  helperText: E,
+  label: k,
+  labelPosition: nn = "outside-top",
+  required: Z,
+  optional: Q,
+  description: E,
+  helperText: C,
   errorText: w
 }) => {
-  const C = s !== void 0, $ = I(), T = A || !!w, [c, B] = F(
-    C ? s || [] : d || []
-  ), [nn, Q] = F(""), [x, V] = F(-1), h = I(null), { isComponentVisible: f, ref: q, setIsComponentVisible: P } = ln(!1), en = () => {
-    P((t) => !t);
-  }, G = (t, i) => {
+  const $ = [
+    "sa-select-field",
+    M ? "sa-select-field-fullwidth" : ""
+  ].filter(Boolean).join(" "), L = s !== void 0, V = B(), en = I || !!w, [c, S] = P(
+    L ? s || [] : d || []
+  ), [on, X] = P(""), [x, q] = P(-1), h = B(null), { isComponentVisible: f, ref: G, setIsComponentVisible: W } = cn(!1), rn = () => {
+    W((t) => !t);
+  }, J = (t, i) => {
     if (o)
       if (c == null ? void 0 : c.find((b) => b.value === i)) {
-        const b = c.filter((an) => an.value !== i);
-        C || B(b), p(b);
+        const b = c.filter((dn) => dn.value !== i);
+        L || S(b), p(b);
       } else {
         const b = [...c, { label: t, value: i }];
-        C || B(b), p(b);
+        L || S(b), p(b);
       }
     else {
       const v = [{ label: t, value: i }];
-      C || B(v), p(v), P(!1);
+      L || S(v), p(v), W(!1);
     }
   };
   g(() => {
-    C && B(s || []);
+    L && S(s || []);
   }, [s]), g(() => {
-    C || JSON.stringify($.current) === JSON.stringify(d) || ($.current = d, B($.current || []));
+    L || JSON.stringify(V.current) === JSON.stringify(d) || (V.current = d, S(V.current || []));
   }, [d]);
-  const on = () => c.length ? o ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
+  const an = () => c.length ? o ? c == null ? void 0 : c.map((t, i) => /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-item", children: [
     /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: t == null ? void 0 : t.label }),
     /* @__PURE__ */ n(
-      fn,
+      gn,
       {
         onClick: (v) => {
-          v.stopPropagation(), G(t.label, t.value);
+          v.stopPropagation(), J(t.label, t.value);
         }
       }
     )
-  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: H }), k = () => {
-    if (q.current && h.current) {
-      const t = window.innerHeight, i = q.current.getBoundingClientRect(), v = h.current.getBoundingClientRect(), b = i.bottom + v.height;
-      h.current.style.left = `${i.left}px`, h.current.style.width = `${i.width}px`, b >= t - 10 ? (h.current.style.top = `${i.top - v.height - 5}px`, Q("top")) : (h.current.style.top = `${i.top + i.height + 4}px`, Q("bottom"));
+  ] }, i)) : /* @__PURE__ */ n("p", { style: { minWidth: "max-content" }, children: c == null ? void 0 : c[0].label }) : /* @__PURE__ */ n("p", { className: "sa-input-dropdown-placeholder", children: F }), y = () => {
+    if (G.current && h.current) {
+      const t = window.innerHeight, i = G.current.getBoundingClientRect(), v = h.current.getBoundingClientRect(), b = i.bottom + v.height;
+      h.current.style.left = `${i.left}px`, h.current.style.width = `${i.width}px`, b >= t - 10 ? (h.current.style.top = `${i.top - v.height - 5}px`, X("top")) : (h.current.style.top = `${i.top + i.height + 4}px`, X("bottom"));
     }
   };
-  g(() => (window.addEventListener("scroll", k), window.addEventListener("resize", k), () => {
-    window.removeEventListener("scroll", k), window.removeEventListener("resize", k);
+  g(() => (window.addEventListener("scroll", y), window.addEventListener("resize", y), () => {
+    window.removeEventListener("scroll", y), window.removeEventListener("resize", y);
   }), []), g(() => {
-    k();
+    y();
   }, [f]), g(() => {
     if (!f || !h.current)
       return;
     const t = new ResizeObserver(() => {
-      k();
+      y();
     });
     return t.observe(h.current), () => t.disconnect();
   }, [f]), g(() => {
-    f || V(-1);
+    f || q(-1);
   }, [f]);
-  const rn = (t) => {
+  const tn = (t) => {
     if (!f) {
-      (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), P(!0));
+      (t.key === "ArrowDown" || t.key === "Enter") && (t.preventDefault(), W(!0));
       return;
     }
     switch (t.key) {
       case "ArrowDown": {
         t.preventDefault();
-        const i = Y(e, x, 1);
-        i !== -1 && V(i);
+        const i = _(e, x, 1);
+        i !== -1 && q(i);
         break;
       }
       case "ArrowUp": {
         t.preventDefault();
-        const i = Y(e, x, -1);
-        i !== -1 && V(i);
+        const i = _(e, x, -1);
+        i !== -1 && q(i);
         break;
       }
       case "Enter": {
-        t.preventDefault(), x >= 0 && e[x] && !e[x].disable && G(
+        t.preventDefault(), x >= 0 && e[x] && !e[x].disable && J(
           e[x].label,
           e[x].value
         );
         break;
       }
       case "Escape":
-        P(!1);
+        W(!1);
         break;
     }
-  }, J = r === "lg" || r === "xl" ? 20 : 16, K = /* @__PURE__ */ n(wn, { handleChangePosition: k, children: /* @__PURE__ */ l(
+  }, K = r === "lg" || r === "xl" ? 20 : 16, U = /* @__PURE__ */ n(fn, { handleChangePosition: y, children: /* @__PURE__ */ l(
     "div",
     {
       className: [
         "sa-input-dropdown-container",
-        O,
+        D,
         `sa-input-dropdown-size-${r}`,
         f ? "active" : "",
-        T ? "error" : "",
-        M ? "disable" : ""
+        en ? "error" : "",
+        H ? "disable" : ""
       ].filter(Boolean).join(" "),
-      ref: q,
-      onClick: en,
-      onKeyDown: rn,
+      ref: G,
+      onClick: rn,
+      onKeyDown: tn,
       tabIndex: 0,
-      onBlur: D,
-      onFocus: j,
+      onBlur: j,
+      onFocus: A,
       children: [
         /* @__PURE__ */ l("div", { className: "sa-input-dropdown-preview-container", children: [
-          u ? _.cloneElement(u, {
-            width: J,
+          u ? T.cloneElement(u, {
+            width: K,
             style: { color: "var(--sa-dropdown-placeholder)", flexShrink: 0 }
           }) : null,
-          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: on() }),
-          f ? /* @__PURE__ */ n(gn, { width: J }) : /* @__PURE__ */ n(bn, { width: J })
+          /* @__PURE__ */ n("div", { className: "sa-input-dropdown-container-preview-item", children: an() }),
+          f ? /* @__PURE__ */ n(vn, { width: K }) : /* @__PURE__ */ n(xn, { width: K })
         ] }),
         /* @__PURE__ */ n(
-          un,
+          hn,
           {
             dropdownLists: e,
-            handleChangeValue: G,
+            handleChangeValue: J,
             isComponentVisible: f,
-            positionDropdown: nn,
-            searchAble: !!y,
+            positionDropdown: on,
+            searchAble: !!N,
             value: c,
             onSearch: m,
             ref: h,
             multiSelect: o,
-            searchValue: L,
+            searchValue: R,
             highlightedIndex: x,
             footer: a,
-            groupLabel: R,
-            onSelectAll: W
+            groupLabel: z,
+            onSelectAll: O
           }
         )
       ]
     }
   ) });
-  return z ? S === "outside-left" ? /* @__PURE__ */ l("div", { className: "sa-select-field sa-select-field-left", children: [
+  return k ? nn === "outside-left" ? /* @__PURE__ */ l("div", { className: `${$} sa-select-field-left`, children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-left-label", children: [
       /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: z }),
-        Z && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
-        U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
+        /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: k }),
+        Q && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+        Z && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
       ] }),
-      N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N })
+      E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E })
     ] }),
     /* @__PURE__ */ l("div", { className: "sa-select-field-input-wrap", children: [
-      K,
-      E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
+      U,
+      C && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
       w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
     ] })
-  ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
+  ] }) : /* @__PURE__ */ l("div", { className: $, children: [
     /* @__PURE__ */ l("div", { className: "sa-select-field-label-row", children: [
-      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: z }),
-      Z && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
-      U && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
+      /* @__PURE__ */ n("span", { className: "sa-select-field-label-text", children: k }),
+      Q && /* @__PURE__ */ n("span", { className: "sa-select-field-optional-badge", children: "Optional" }),
+      Z && /* @__PURE__ */ n("span", { className: "sa-select-field-required", children: "*" })
     ] }),
-    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
-    K,
-    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
+    E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
+    U,
+    C && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
-  ] }) : /* @__PURE__ */ l("div", { className: "sa-select-field", children: [
-    N && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: N }),
-    K,
-    E && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: E }),
+  ] }) : /* @__PURE__ */ l("div", { className: $, children: [
+    E && /* @__PURE__ */ n("p", { className: "sa-select-field-helper-top", children: E }),
+    U,
+    C && !w && /* @__PURE__ */ n("p", { className: "sa-select-field-helper", children: C }),
     w && /* @__PURE__ */ n("p", { className: "sa-select-field-error-msg", children: w })
   ] });
-}, Y = (e, p, d) => {
+}, _ = (e, p, d) => {
   const s = e.length;
   let r = p + d;
   for (; r >= 0 && r < s; ) {
@@ -859,7 +867,7 @@ const mn = ({
       if (!e[o].disable)
         return o;
   return -1;
-}, fn = (e) => /* @__PURE__ */ n(
+}, gn = (e) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -880,7 +888,7 @@ const mn = ({
       }
     )
   }
-), bn = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), xn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -900,7 +908,7 @@ const mn = ({
       }
     )
   }
-), gn = ({ width: e = 16 }) => /* @__PURE__ */ n(
+), vn = ({ width: e = 16 }) => /* @__PURE__ */ n(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -922,5 +930,5 @@ const mn = ({
   }
 );
 export {
-  mn as Dropdown
+  yn as Dropdown
 };

package/dist/dropdown.umd.js

@@ -1,4 +1,4 @@
-(function(g,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(g=typeof globalThis<"u"?globalThis:g||self,n(g.Dropdown={},g.jsxRuntime,g.React))})(this,function(g,n,d){"use strict";const X=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
+(function(g,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],n):(g=typeof globalThis<"u"?globalThis:g||self,n(g.Dropdown={},g.jsxRuntime,g.React))})(this,function(g,n,d){"use strict";const Y=`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -114,6 +114,7 @@
   background-color: transparent;
   border: 0.8px solid var(--sa-dropdown-border-subtle);
   border-radius: var(--borderRadius);
+  outline: none;
 }
 .sa-input-dropdown-container.outline.active {
   border: 1.2px solid var(--sa-dropdown-border-active);
@@ -363,9 +364,12 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  width: 100%;
+  width: max-content;
   font-family: "Poppins", sans-serif;
 }
+.sa-select-field-fullwidth {
+  width: 100%;
+}
 .sa-select-field-left {
   flex-direction: row;
   align-items: flex-start;
@@ -444,4 +448,4 @@
   margin: 0;
 }
 
-`;function Y(e){const[p,i]=d.useState(e),l=d.useRef(null),r=o=>{l.current&&!l.current.contains(o.target)&&i(!1)};return d.useEffect(()=>(document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const _=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),R=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),nn=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:r,value:o,handleChangeValue:y,multiSelect:f,searchValue:F,highlightedIndex:k,footer:I,groupLabel:D,onSelectAll:A},H)=>{const S=d.useRef([]);d.useEffect(()=>{var a;k>=0&&S.current[k]&&((a=S.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const O=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(_,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{r&&r(a.target.value)},value:F,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:H,children:[e!=="top"&&O,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${f?"multi":""}`,children:[D&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:D}),f&&A&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),A()},children:"Select all"})]}),p.map((a,L)=>{const P=!!(o!=null&&o.find(B=>B.value===a.value)),z=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",z?"has-description":"",P?"active":"",L===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:B=>{S.current[L]=B},onClick:()=>y(a.label,a.value),children:[f&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:P&&n.jsx(R,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},L)})]}),e==="top"&&O,I&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:I})]}):null})}),en=({children:e,handleChangePosition:p})=>{const i=d.useRef(null);d.useEffect(()=>{var y;const r=()=>{if(i.current){let f=i.current.parentElement;for(;f&&!l(f);)f=f.parentElement;f&&p()}};let o=(y=i.current)==null?void 0:y.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",r),r(),()=>{o&&o.removeEventListener("scroll",r)}},[]);const l=r=>r&&(r.scrollHeight>r.clientHeight||r.scrollWidth>r.clientWidth);return n.jsx("div",{ref:i,children:e})},K="sa-input-dropdown-styles";(e=>{if(!document.getElementById(K)){const p=document.createElement("style");p.id=K,p.textContent=e,document.head.appendChild(p)}})(X);const on=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:r="md",multiSelect:o,searchAble:y,iconLeft:f,placeholder:F,onSearch:k,error:I,onBlur:D,onFocus:A,disable:H,searchValue:S,variant:O="outline",footer:a,groupLabel:L,onSelectAll:P,label:z,labelPosition:B="outside-top",required:T,optional:Z,description:E,helperText:N,errorText:w})=>{const C=l!==void 0,M=d.useRef(),dn=I||!!w,[c,j]=d.useState(C?l||[]:i||[]),[tn,Q]=d.useState(""),[x,q]=d.useState(-1),h=d.useRef(null),{isComponentVisible:u,ref:$,setIsComponentVisible:W}=Y(!1),ln=()=>{W(s=>!s)},V=(s,t)=>{if(o)if(c==null?void 0:c.find(b=>b.value===t)){const b=c.filter(fn=>fn.value!==t);C||j(b),p(b)}else{const b=[...c,{label:s,value:t}];C||j(b),p(b)}else{const v=[{label:s,value:t}];C||j(v),p(v),W(!1)}};d.useEffect(()=>{C&&j(l||[])},[l]),d.useEffect(()=>{C||JSON.stringify(M.current)===JSON.stringify(i)||(M.current=i,j(M.current||[]))},[i]);const pn=()=>c.length?o?c==null?void 0:c.map((s,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label}),n.jsx(rn,{onClick:v=>{v.stopPropagation(),V(s.label,s.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:F}),m=()=>{if($.current&&h.current){const s=window.innerHeight,t=$.current.getBoundingClientRect(),v=h.current.getBoundingClientRect(),b=t.bottom+v.height;h.current.style.left=`${t.left}px`,h.current.style.width=`${t.width}px`,b>=s-10?(h.current.style.top=`${t.top-v.height-5}px`,Q("top")):(h.current.style.top=`${t.top+t.height+4}px`,Q("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",m),window.addEventListener("resize",m),()=>{window.removeEventListener("scroll",m),window.removeEventListener("resize",m)}),[]),d.useEffect(()=>{m()},[u]),d.useEffect(()=>{if(!u||!h.current)return;const s=new ResizeObserver(()=>{m()});return s.observe(h.current),()=>s.disconnect()},[u]),d.useEffect(()=>{u||q(-1)},[u]);const cn=s=>{if(!u){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),W(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const t=U(e,x,1);t!==-1&&q(t);break}case"ArrowUp":{s.preventDefault();const t=U(e,x,-1);t!==-1&&q(t);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&V(e[x].label,e[x].value);break}case"Escape":W(!1);break}},G=r==="lg"||r==="xl"?20:16,J=n.jsx(en,{handleChangePosition:m,children:n.jsxs("div",{className:["sa-input-dropdown-container",O,`sa-input-dropdown-size-${r}`,u?"active":"",dn?"error":"",H?"disable":""].filter(Boolean).join(" "),ref:$,onClick:ln,onKeyDown:cn,tabIndex:0,onBlur:D,onFocus:A,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[f?d.cloneElement(f,{width:G,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:pn()}),u?n.jsx(sn,{width:G}):n.jsx(an,{width:G})]}),n.jsx(nn,{dropdownLists:e,handleChangeValue:V,isComponentVisible:u,positionDropdown:tn,searchAble:!!y,value:c,onSearch:k,ref:h,multiSelect:o,searchValue:S,highlightedIndex:x,footer:a,groupLabel:L,onSelectAll:P})]})});return z?B==="outside-left"?n.jsxs("div",{className:"sa-select-field sa-select-field-left",children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:z}),Z&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:"sa-select-field",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:z}),Z&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),T&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:"sa-select-field",children:[E&&n.jsx("p",{className:"sa-select-field-helper-top",children:E}),J,N&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:N}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},U=(e,p,i)=>{const l=e.length;let r=p+i;for(;r>=0&&r<l;){if(!e[r].disable)return r;r+=i}if(i===1){for(let o=0;o<l;o++)if(!e[o].disable)return o}else for(let o=l-1;o>=0;o--)if(!e[o].disable)return o;return-1},rn=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),an=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),sn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});g.Dropdown=on,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});
+`;function _(e){const[p,i]=d.useState(e),l=d.useRef(null),r=o=>{l.current&&!l.current.contains(o.target)&&i(!1)};return d.useEffect(()=>(document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}),[]),{ref:l,isComponentVisible:p,setIsComponentVisible:i}}const R=({...e})=>n.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",...e,viewBox:"0 0 20 20",fill:"none",children:[n.jsx("circle",{cx:"9.80547",cy:"9.8055",r:"7.49047",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"}),n.jsx("path",{d:"M15.0153 15.4043L17.9519 18.3333",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round",strokeLinejoin:"round"})]}),nn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",children:n.jsx("path",{d:"M3.5 8L6.5 11L12.5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),en=d.forwardRef(({positionDropdown:e,dropdownLists:p,isComponentVisible:i,searchAble:l,onSearch:r,value:o,handleChangeValue:E,multiSelect:f,searchValue:W,highlightedIndex:k,footer:j,groupLabel:I,onSelectAll:D},F)=>{const L=d.useRef([]);d.useEffect(()=>{var a;k>=0&&L.current[k]&&((a=L.current[k])==null||a.scrollIntoView({block:"nearest"}))},[k]);const A=l?n.jsxs("div",{className:"sa-input-dropdown-container-dropdown-search",children:[n.jsx(R,{strokeWidth:2,width:16,style:{flexShrink:0,color:"var(--sa-dropdown-placeholder-subtle)"}}),n.jsx("input",{onChange:a=>{r&&r(a.target.value)},value:W,autoFocus:!0,placeholder:"Search..."})]}):null;return n.jsx(n.Fragment,{children:i?n.jsxs("div",{className:"sa-input-dropdown-lists-container",onClick:a=>a.stopPropagation(),ref:F,children:[e!=="top"&&A,n.jsxs("div",{className:`sa-input-dropdwon-item-container ${f?"multi":""}`,children:[I&&n.jsxs("div",{className:"sa-input-dropdown-section-header",children:[n.jsx("span",{className:"sa-input-dropdown-section-label",children:I}),f&&D&&n.jsx("button",{className:"sa-input-dropdown-section-select-all",onClick:a=>{a.stopPropagation(),D()},children:"Select all"})]}),p.map((a,z)=>{const O=!!(o!=null&&o.find(m=>m.value===a.value)),H=!!a.description;return n.jsxs("div",{className:["sa-input-dropdwon-item",H?"has-description":"",O?"active":"",z===k?"highlight":"",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),ref:m=>{L.current[z]=m},onClick:()=>E(a.label,a.value),children:[f&&n.jsx("div",{className:"sa-input-dropdwon-item-check",children:O&&n.jsx(nn,{width:16})}),a.icon&&n.jsx("div",{style:{flexShrink:0,display:"flex"},children:d.cloneElement(a.icon,{width:16})}),n.jsxs("div",{style:{minWidth:0,flex:1},children:[n.jsx("p",{className:["sa-input-dropdwon-item-text",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.label}),a.description&&n.jsx("p",{className:["sa-input-dropdwon-item-text-description",a.disable?"sa-input-dropdwon-item-disable":""].filter(Boolean).join(" "),children:a.description})]})]},z)})]}),e==="top"&&A,j&&n.jsx("div",{className:"sa-input-dropdown-footer",onClick:a=>a.stopPropagation(),children:j})]}):null})}),on=({children:e,handleChangePosition:p})=>{const i=d.useRef(null);d.useEffect(()=>{var E;const r=()=>{if(i.current){let f=i.current.parentElement;for(;f&&!l(f);)f=f.parentElement;f&&p()}};let o=(E=i.current)==null?void 0:E.parentElement;for(;o&&!l(o);)o=o.parentElement;return o&&o.addEventListener("scroll",r),r(),()=>{o&&o.removeEventListener("scroll",r)}},[]);const l=r=>r&&(r.scrollHeight>r.clientHeight||r.scrollWidth>r.clientWidth);return n.jsx("div",{ref:i,children:e})},U="sa-input-dropdown-styles";(e=>{if(!document.getElementById(U)){const p=document.createElement("style");p.id=U,p.textContent=e,document.head.appendChild(p)}})(Y);const rn=({dropdownLists:e,onChange:p,defaultValue:i,value:l,size:r="md",multiSelect:o,searchAble:E,iconLeft:f,placeholder:W,onSearch:k,error:j,onBlur:I,onFocus:D,disable:F,searchValue:L,variant:A="outline",footer:a,groupLabel:z,onSelectAll:O,fullWidth:H=!1,label:m,labelPosition:tn="outside-top",required:Z,optional:Q,description:N,helperText:C,errorText:w})=>{const M=["sa-select-field",H?"sa-select-field-fullwidth":""].filter(Boolean).join(" "),S=l!==void 0,$=d.useRef(),ln=j||!!w,[c,B]=d.useState(S?l||[]:i||[]),[pn,X]=d.useState(""),[x,q]=d.useState(-1),h=d.useRef(null),{isComponentVisible:u,ref:V,setIsComponentVisible:P}=_(!1),cn=()=>{P(s=>!s)},G=(s,t)=>{if(o)if(c==null?void 0:c.find(b=>b.value===t)){const b=c.filter(hn=>hn.value!==t);S||B(b),p(b)}else{const b=[...c,{label:s,value:t}];S||B(b),p(b)}else{const v=[{label:s,value:t}];S||B(v),p(v),P(!1)}};d.useEffect(()=>{S&&B(l||[])},[l]),d.useEffect(()=>{S||JSON.stringify($.current)===JSON.stringify(i)||($.current=i,B($.current||[]))},[i]);const fn=()=>c.length?o?c==null?void 0:c.map((s,t)=>n.jsxs("div",{className:"sa-input-dropdown-preview-item",children:[n.jsx("p",{style:{minWidth:"max-content"},children:s==null?void 0:s.label}),n.jsx(an,{onClick:v=>{v.stopPropagation(),G(s.label,s.value)}})]},t)):n.jsx("p",{style:{minWidth:"max-content"},children:c==null?void 0:c[0].label}):n.jsx("p",{className:"sa-input-dropdown-placeholder",children:W}),y=()=>{if(V.current&&h.current){const s=window.innerHeight,t=V.current.getBoundingClientRect(),v=h.current.getBoundingClientRect(),b=t.bottom+v.height;h.current.style.left=`${t.left}px`,h.current.style.width=`${t.width}px`,b>=s-10?(h.current.style.top=`${t.top-v.height-5}px`,X("top")):(h.current.style.top=`${t.top+t.height+4}px`,X("bottom"))}};d.useEffect(()=>(window.addEventListener("scroll",y),window.addEventListener("resize",y),()=>{window.removeEventListener("scroll",y),window.removeEventListener("resize",y)}),[]),d.useEffect(()=>{y()},[u]),d.useEffect(()=>{if(!u||!h.current)return;const s=new ResizeObserver(()=>{y()});return s.observe(h.current),()=>s.disconnect()},[u]),d.useEffect(()=>{u||q(-1)},[u]);const wn=s=>{if(!u){(s.key==="ArrowDown"||s.key==="Enter")&&(s.preventDefault(),P(!0));return}switch(s.key){case"ArrowDown":{s.preventDefault();const t=T(e,x,1);t!==-1&&q(t);break}case"ArrowUp":{s.preventDefault();const t=T(e,x,-1);t!==-1&&q(t);break}case"Enter":{s.preventDefault(),x>=0&&e[x]&&!e[x].disable&&G(e[x].label,e[x].value);break}case"Escape":P(!1);break}},J=r==="lg"||r==="xl"?20:16,K=n.jsx(on,{handleChangePosition:y,children:n.jsxs("div",{className:["sa-input-dropdown-container",A,`sa-input-dropdown-size-${r}`,u?"active":"",ln?"error":"",F?"disable":""].filter(Boolean).join(" "),ref:V,onClick:cn,onKeyDown:wn,tabIndex:0,onBlur:I,onFocus:D,children:[n.jsxs("div",{className:"sa-input-dropdown-preview-container",children:[f?d.cloneElement(f,{width:J,style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0}}):null,n.jsx("div",{className:"sa-input-dropdown-container-preview-item",children:fn()}),u?n.jsx(dn,{width:J}):n.jsx(sn,{width:J})]}),n.jsx(en,{dropdownLists:e,handleChangeValue:G,isComponentVisible:u,positionDropdown:pn,searchAble:!!E,value:c,onSearch:k,ref:h,multiSelect:o,searchValue:L,highlightedIndex:x,footer:a,groupLabel:z,onSelectAll:O})]})});return m?tn==="outside-left"?n.jsxs("div",{className:`${M} sa-select-field-left`,children:[n.jsxs("div",{className:"sa-select-field-left-label",children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:m}),Q&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),Z&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N})]}),n.jsxs("div",{className:"sa-select-field-input-wrap",children:[K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})]}):n.jsxs("div",{className:M,children:[n.jsxs("div",{className:"sa-select-field-label-row",children:[n.jsx("span",{className:"sa-select-field-label-text",children:m}),Q&&n.jsx("span",{className:"sa-select-field-optional-badge",children:"Optional"}),Z&&n.jsx("span",{className:"sa-select-field-required",children:"*"})]}),N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]}):n.jsxs("div",{className:M,children:[N&&n.jsx("p",{className:"sa-select-field-helper-top",children:N}),K,C&&!w&&n.jsx("p",{className:"sa-select-field-helper",children:C}),w&&n.jsx("p",{className:"sa-select-field-error-msg",children:w})]})},T=(e,p,i)=>{const l=e.length;let r=p+i;for(;r>=0&&r<l;){if(!e[r].disable)return r;r+=i}if(i===1){for(let o=0;o<l;o++)if(!e[o].disable)return o}else for(let o=l-1;o>=0;o--)if(!e[o].disable)return o;return-1},an=e=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 18 18",fill:"none",style:{flexShrink:0,cursor:"pointer"},...e,children:n.jsx("path",{d:"M12 6L6 12M6.00001 6L12 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),sn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 6L8 10L12 6",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),dn=({width:e=16})=>n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:e,viewBox:"0 0 16 16",fill:"none",style:{color:"var(--sa-dropdown-placeholder)",flexShrink:0},children:n.jsx("path",{d:"M4 10L8 6L12 10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})});g.Dropdown=rn,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});

package/dist/interface.d.ts

@@ -40,6 +40,7 @@ export interface IDropdown {
     footer?: React.ReactNode;
     groupLabel?: string;
     onSelectAll?: () => void;
+    fullWidth?: boolean;
     label?: React.ReactNode;
     labelPosition?: DropdownLabelPosition;
     required?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/dropdown",
-  "version": "3.5.1",
+  "version": "4.0.0",
   "description": "dropdown component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/dropdown.umd.js",