@alixpartners/ui-components 2.0.2 → 2.1.2

package/dist/components/Dropdown/Dropdown.js

@@ -1,60 +1,61 @@
-import { jsxs as l, jsx as d } from "react/jsx-runtime";
-import { c as h } from "../../clsx-OuTLNxxd.js";
-import { useState as b, useRef as T, useEffect as v, useCallback as oe } from "react";
+import { jsxs as s, jsx as d } from "react/jsx-runtime";
+import { c as D } from "../../clsx-OuTLNxxd.js";
+import { useContext as Me, useState as b, useRef as T, useEffect as v, useCallback as oe } from "react";
 import B from "../Icon/Icon.js";
-import Ce from "../Toggle/Toggle.js";
+import Se from "../Toggle/Toggle.js";
 import ne from "../Button/Button.js";
 import re from "../Ghost/Ghost.js";
-import Me from "../Search/Search.js";
-import Se from "../Tooltip/Tooltip.js";
-import { R as Ve, T as Re, P as Ee, C as Fe } from "../../index-BKtdMA_j.js";
-import '../../assets/Dropdown.css';const We = "Dropdown-module__dropdownContainer___beNhQ", qe = "Dropdown-module__dropdownLabel___T9FmB", Je = "Dropdown-module__dropdownLabelDisabled___SLRmM", ze = "Dropdown-module__required___ChI1m", Ge = "Dropdown-module__dropdownWrapper___AUuWD", Be = "Dropdown-module__dropdownTrigger___Rue93", Ue = "Dropdown-module__dropdownTriggerDisabled___63wkd", je = "Dropdown-module__dropdownTriggerOpen___cbm8V", Pe = "Dropdown-module__dropdownTriggerError___Uu02x", Ye = "Dropdown-module__dropdownContent___zLMhL", $e = "Dropdown-module__dropdownSelectedItems___iXnpQ", Ze = "Dropdown-module__selectedOptionLabel___7Zdh3", Qe = "Dropdown-module__placeholder___fWdch", Ke = "Dropdown-module__dropdownActions___d55Fa", Xe = "Dropdown-module__dropdownArrow___dLbrb", He = "Dropdown-module__dropdownArrowOpen___Z4Nh1", eo = "Dropdown-module__dropdownMenu___toYcy", oo = "Dropdown-module__dropdownMenuToolbar___gFne0", no = "Dropdown-module__searchContainer___4kUvD", ro = "Dropdown-module__search___JmgDx", to = "Dropdown-module__optionsList___rk2hi", lo = "Dropdown-module__categoryGroup___Np2bP", so = "Dropdown-module__categoryDivider___Gh6F0", io = "Dropdown-module__categoryLabel___B9IDR", co = "Dropdown-module__optionItem___7pi10", ao = "Dropdown-module__optionItemDisabled___aepUD", po = "Dropdown-module__optionItemFocused___u2781", _o = "Dropdown-module__optionContent___nf1VC", uo = "Dropdown-module__optionLabel___sJerM", mo = "Dropdown-module__tickIcon___hYdCr", wo = "Dropdown-module__noOptions___8vmhM", fo = "Dropdown-module__helpers___s4ulA", ho = "Dropdown-module__helpText___YooJE", Do = "Dropdown-module__helpTextDisabled___Ct4qq", bo = "Dropdown-module__helpLink___-Zwpq", go = "Dropdown-module__helpLinkDisabled___r-opC", No = "Dropdown-module__errorMessage___3Mopi", vo = "Dropdown-module__selectAllContainer___Dlk3J", Lo = "Dropdown-module__actionButtons___-2nvr", o = {
-  dropdownContainer: We,
-  dropdownLabel: qe,
+import Ve from "../Search/Search.js";
+import Re from "../Tooltip/Tooltip.js";
+import { DialogContext as Ee } from "../Dialog/Dialog.js";
+import { R as Fe, T as We, P as qe, C as Je } from "../../index-BKtdMA_j.js";
+import '../../assets/Dropdown.css';const ze = "Dropdown-module__dropdownContainer___beNhQ", Ge = "Dropdown-module__dropdownLabel___T9FmB", Be = "Dropdown-module__dropdownLabelDisabled___SLRmM", Ue = "Dropdown-module__required___ChI1m", je = "Dropdown-module__dropdownWrapper___AUuWD", Pe = "Dropdown-module__dropdownTrigger___Rue93", Ye = "Dropdown-module__dropdownTriggerDisabled___63wkd", $e = "Dropdown-module__dropdownTriggerOpen___cbm8V", Ze = "Dropdown-module__placeholder___fWdch", Qe = "Dropdown-module__selectedOptionLabel___7Zdh3", Ke = "Dropdown-module__dropdownSelectedItems___iXnpQ", Xe = "Dropdown-module__dropdownTriggerError___Uu02x", He = "Dropdown-module__dropdownContent___zLMhL", eo = "Dropdown-module__dropdownActions___d55Fa", oo = "Dropdown-module__dropdownArrow___dLbrb", no = "Dropdown-module__dropdownArrowOpen___Z4Nh1", ro = "Dropdown-module__dropdownMenu___toYcy", to = "Dropdown-module__dropdownMenuToolbar___gFne0", lo = "Dropdown-module__searchContainer___4kUvD", so = "Dropdown-module__search___JmgDx", io = "Dropdown-module__optionsList___rk2hi", co = "Dropdown-module__categoryGroup___Np2bP", ao = "Dropdown-module__categoryDivider___Gh6F0", po = "Dropdown-module__categoryLabel___B9IDR", _o = "Dropdown-module__optionItem___7pi10", uo = "Dropdown-module__optionItemDisabled___aepUD", mo = "Dropdown-module__optionItemFocused___u2781", wo = "Dropdown-module__optionContent___nf1VC", fo = "Dropdown-module__optionLabel___sJerM", Do = "Dropdown-module__tickIcon___hYdCr", ho = "Dropdown-module__noOptions___8vmhM", bo = "Dropdown-module__helpers___s4ulA", go = "Dropdown-module__helpText___YooJE", No = "Dropdown-module__helpTextDisabled___Ct4qq", vo = "Dropdown-module__helpLink___-Zwpq", Lo = "Dropdown-module__helpLinkDisabled___r-opC", Oo = "Dropdown-module__errorMessage___3Mopi", Io = "Dropdown-module__selectAllContainer___Dlk3J", yo = "Dropdown-module__actionButtons___-2nvr", o = {
+  dropdownContainer: ze,
+  dropdownLabel: Ge,
   "label-text": "Dropdown-module__label-text___VEqG-",
-  dropdownLabelDisabled: Je,
+  dropdownLabelDisabled: Be,
   "label-tooltip-icon": "Dropdown-module__label-tooltip-icon___JYVOm",
-  required: ze,
-  dropdownWrapper: Ge,
+  required: Ue,
+  dropdownWrapper: je,
   "dropdown-menu-trigger": "Dropdown-module__dropdown-menu-trigger___fgqVT",
-  dropdownTrigger: Be,
-  dropdownTriggerDisabled: Ue,
-  dropdownTriggerOpen: je,
-  dropdownTriggerError: Pe,
-  dropdownContent: Ye,
-  dropdownSelectedItems: $e,
-  selectedOptionLabel: Ze,
-  placeholder: Qe,
-  dropdownActions: Ke,
-  dropdownArrow: Xe,
-  dropdownArrowOpen: He,
-  dropdownMenu: eo,
+  dropdownTrigger: Pe,
+  dropdownTriggerDisabled: Ye,
+  dropdownTriggerOpen: $e,
+  placeholder: Ze,
+  selectedOptionLabel: Qe,
+  dropdownSelectedItems: Ke,
+  dropdownTriggerError: Xe,
+  dropdownContent: He,
+  dropdownActions: eo,
+  dropdownArrow: oo,
+  dropdownArrowOpen: no,
+  dropdownMenu: ro,
   "dropdown-container-grouped": "Dropdown-module__dropdown-container-grouped___1twhU",
   "dropdown-container-multi-select": "Dropdown-module__dropdown-container-multi-select___zdaum",
-  dropdownMenuToolbar: oo,
-  searchContainer: no,
-  search: ro,
-  optionsList: to,
-  categoryGroup: lo,
-  categoryDivider: so,
-  categoryLabel: io,
-  optionItem: co,
-  optionItemDisabled: ao,
-  optionItemFocused: po,
-  optionContent: _o,
-  optionLabel: uo,
-  tickIcon: mo,
-  noOptions: wo,
-  helpers: fo,
-  helpText: ho,
-  helpTextDisabled: Do,
-  helpLink: bo,
-  helpLinkDisabled: go,
-  errorMessage: No,
-  selectAllContainer: vo,
-  actionButtons: Lo
+  dropdownMenuToolbar: to,
+  searchContainer: lo,
+  search: so,
+  optionsList: io,
+  categoryGroup: co,
+  categoryDivider: ao,
+  categoryLabel: po,
+  optionItem: _o,
+  optionItemDisabled: uo,
+  optionItemFocused: mo,
+  optionContent: wo,
+  optionLabel: fo,
+  tickIcon: Do,
+  noOptions: ho,
+  helpers: bo,
+  helpText: go,
+  helpTextDisabled: No,
+  helpLink: vo,
+  helpLinkDisabled: Lo,
+  errorMessage: Oo,
+  selectAllContainer: Io,
+  actionButtons: yo
 };
-function Vo({
+function Wo({
   className: de,
   label: E,
   options: F,
@@ -78,7 +79,7 @@ function Vo({
   dropdownTriggerClassName: ce,
   dropdownMenuClassName: ae,
   hideSelectedItems: pe = !1,
-  labelTooltip: D,
+  labelTooltip: h,
   unselect: S = !1,
   selectedOptionLabel: _e = "option selected",
   selectedOptionsLabel: ue = "options selected",
@@ -86,34 +87,34 @@ function Vo({
   caseSensitive: P = !1,
   ...me
 }) {
-  const [s, g] = b(p), [i, f] = b(!1), [Y, _] = b(""), [I, c] = b(-1), [w, u] = b([]), $ = T(null), Z = T(null), we = T(null), z = T(null), [Q, fe] = b(0), [he, De] = b(p.length > 0 ? p.join(", ") : A ?? ""), K = T(p);
+  const we = Me(Ee), [i, g] = b(p), [l, f] = b(!1), [Y, _] = b(""), [I, c] = b(-1), [w, u] = b([]), $ = T(null), Z = T(null), fe = T(null), z = T(null), [Q, De] = b(0), [he, be] = b(p.length > 0 ? p.join(", ") : A ?? ""), K = T(p);
   v(() => {
     JSON.stringify(K.current) !== JSON.stringify(p) && (g(p), K.current = p);
   }, [p]), v(() => {
     var r;
     const e = (r = Z.current) == null ? void 0 : r.getBoundingClientRect().width;
-    e && fe(e);
-  }, []), v(() => {
-    i && u([...s]);
-  }, [i, s]);
+    e && De(e);
+  }, [l]), v(() => {
+    l && u([...i]);
+  }, [l, i]);
   const X = Y.trim(), a = F.filter((e) => {
     const r = P ? e.label : e.label.toLowerCase(), n = P ? X : X.toLowerCase();
     return r.includes(n);
   });
   v(() => {
-    De(p.length > 0 ? p.join(", ") : A ?? "");
+    be(p.length > 0 ? p.join(", ") : A ?? "");
   }, [p, A]), v(() => {
-    i && x && z.current && z.current.focus();
-  }, [i, x]);
-  const be = (e) => {
-    f(e), e ? (u([...s]), _(""), c(-1)) : (_(""), c(-1), u([]));
+    l && x && z.current && z.current.focus();
+  }, [l, x]);
+  const ge = (e) => {
+    f(e), e ? (u([...i]), _(""), c(-1)) : (_(""), c(-1), u([]));
   }, G = oe((e) => {
     if (e.disabled) return;
     let r = [];
     if (m)
       r = w.includes(e.value) ? w.filter((n) => n !== e.value) : [...w, e.value];
     else {
-      if (s.includes(e.value))
+      if (i.includes(e.value))
         if (S)
           r = [];
         else
@@ -124,19 +125,19 @@ function Vo({
       return;
     }
     u(r);
-  }, [m, t, w, s, S]), ge = () => {
+  }, [m, t, w, i, S]), Ne = () => {
     g(w), t == null || t(w), f(!1), _(""), c(-1), u([]);
-  }, Ne = () => {
+  }, ve = () => {
     f(!1), _(""), c(-1), u([]);
-  }, ve = (e) => {
+  }, Le = (e) => {
     _(e), c(-1), J == null || J(e);
-  }, Le = oe((e) => {
+  }, Oe = oe((e) => {
     var r;
     if (!e.disabled) {
       if (m) {
-        const R = s.includes(e.value) ? s.filter((k) => k !== e.value) : [...s, e.value];
+        const R = i.includes(e.value) ? i.filter((k) => k !== e.value) : [...i, e.value];
         g(R), t == null || t(R), f(!0), _(""), c(-1);
-      } else if (s.includes(e.value)) {
+      } else if (i.includes(e.value)) {
         if (S) {
           const n = [];
           g(n), t == null || t(n), f(!1), _(""), c(-1);
@@ -145,14 +146,14 @@ function Vo({
         const n = [e.value];
         g(n), t == null || t(n), f(!1), _(""), c(-1);
       }
-      (r = we.current) == null || r.focus();
+      (r = fe.current) == null || r.focus();
     }
-  }, [m, t, s, S]), Oe = (e) => {
+  }, [m, t, i, S]), Ie = (e) => {
     M == null || M(e);
   };
   v(() => {
     const e = (r) => {
-      if (i)
+      if (l)
         switch (r.key) {
           case "ArrowDown":
             r.preventDefault(), c((n) => n < a.length - 1 ? n + 1 : 0);
@@ -172,45 +173,45 @@ function Vo({
         }
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [i, I, a, Le, G]);
-  const V = i ? w : s, y = F.filter((e) => V.includes(e.value)), Ie = !!O, ye = JSON.stringify(w) !== JSON.stringify(s), H = F.filter((e) => !e.disabled), ke = H.length > 0 && H.every((e) => V.includes(e.value)), Te = a.reduce((e, r) => {
+  }, [l, I, a, Oe, G]);
+  const V = l ? w : i, y = F.filter((e) => V.includes(e.value)), ye = !!O, ke = JSON.stringify(w) !== JSON.stringify(i), H = F.filter((e) => !e.disabled), Te = H.length > 0 && H.every((e) => V.includes(e.value)), Ae = a.reduce((e, r) => {
     const n = r.category || "default";
     return e[n] || (e[n] = []), e[n].push(r), e;
-  }, {}), Ae = a, {
+  }, {}), xe = a, {
     onBlur: N,
     ...ee
   } = me;
-  return /* @__PURE__ */ l("div", { ref: $, className: h(o.root, o.dropdownContainer, se && o["dropdown-container-grouped"], m && o["dropdown-container-multi-select"], de), ...ee, children: [
-    E && /* @__PURE__ */ l("label", { className: h(o.dropdownLabel, L && o.dropdownLabelDisabled), children: [
+  return /* @__PURE__ */ s("div", { ref: $, className: D(o.root, o.dropdownContainer, se && o["dropdown-container-grouped"], m && o["dropdown-container-multi-select"], de), ...ee, children: [
+    E && /* @__PURE__ */ s("label", { className: D(o.dropdownLabel, L && o.dropdownLabelDisabled), children: [
       /* @__PURE__ */ d("span", { title: E, className: o["label-text"], children: E }),
       te && /* @__PURE__ */ d("span", { className: o.required, children: "*" }),
-      D && /* @__PURE__ */ d(Se, { content: D.content, size: D.size, theme: D.theme, tipSide: D.tipSide, tipAlignment: D.tipAlignment, startVisible: D.startVisible, children: /* @__PURE__ */ d(B, { icon: "ap-icon-info", className: o["label-tooltip-icon"] }) })
+      h && /* @__PURE__ */ d(Re, { content: h.content, size: h.size, theme: h.theme, tipSide: h.tipSide, tipAlignment: h.tipAlignment, startVisible: h.startVisible, children: /* @__PURE__ */ d(B, { icon: "ap-icon-info", className: o["label-tooltip-icon"] }) })
     ] }),
-    /* @__PURE__ */ d(Ve, { open: i, onOpenChange: be, children: /* @__PURE__ */ l("div", { className: o.dropdownWrapper, children: [
-      /* @__PURE__ */ d(Re, { disabled: L, className: h(o["dropdown-menu-trigger"], o.dropdownTrigger, ce, i && o.dropdownTriggerOpen, L && o.dropdownTriggerDisabled, Ie && o.dropdownTriggerError), ref: Z, onBlur: (e) => {
-        i || N == null || N(e);
-      }, ...ee, children: /* @__PURE__ */ l("div", { className: o.dropdownContent, children: [
-        !pe && /* @__PURE__ */ d("div", { className: o.dropdownSelectedItems, children: y.length > 0 ? m ? ke && j ? j : y.length === 1 ? ` ${y.length} ${_e}` : ` ${y.length} ${ue}` : (
+    /* @__PURE__ */ d(Fe, { open: l, onOpenChange: ge, children: /* @__PURE__ */ s("div", { className: o.dropdownWrapper, children: [
+      /* @__PURE__ */ d(We, { disabled: L, className: D(o["dropdown-menu-trigger"], o.dropdownTrigger, ce, l && o.dropdownTriggerOpen, L && o.dropdownTriggerDisabled, ye && o.dropdownTriggerError), ref: Z, onBlur: (e) => {
+        l || N == null || N(e);
+      }, ...ee, children: /* @__PURE__ */ s("div", { className: o.dropdownContent, children: [
+        !pe && /* @__PURE__ */ d("div", { className: o.dropdownSelectedItems, children: y.length > 0 ? m ? Te && j ? j : y.length === 1 ? ` ${y.length} ${_e}` : ` ${y.length} ${ue}` : (
           // For single select, show the selected option label
           /* @__PURE__ */ d("span", { className: o.selectedOptionLabel, children: y[0].label })
         ) : /* @__PURE__ */ d("span", { title: he, className: o.placeholder, children: A }) }),
-        /* @__PURE__ */ d("div", { className: o.dropdownActions, children: /* @__PURE__ */ d(B, { icon: "ap-icon-expand-more", className: h(o.dropdownArrow, i && o.dropdownArrowOpen) }) })
+        /* @__PURE__ */ d("div", { className: o.dropdownActions, children: /* @__PURE__ */ d(B, { icon: "ap-icon-expand-more", className: D(o.dropdownArrow, l && o.dropdownArrowOpen) }) })
       ] }) }),
-      /* @__PURE__ */ d(Ee, { children: /* @__PURE__ */ d(Fe, { align: U === "right" ? "end" : "start", side: "bottom", avoidCollisions: !0, sideOffset: 6, collisionPadding: 8, style: {
+      /* @__PURE__ */ d(qe, { container: we, children: /* @__PURE__ */ d(Je, { align: U === "right" ? "end" : "start", side: "bottom", avoidCollisions: !0, sideOffset: 6, collisionPadding: 8, style: {
         minWidth: Q,
         zIndex: 9999
       }, onInteractOutside: (e) => {
         var n;
         e.target === z.current && e.preventDefault(), ((n = $.current) == null ? void 0 : n.contains(e.target)) || N == null || N(e);
-      }, children: i && /* @__PURE__ */ l("div", { style: {
+      }, children: l && /* @__PURE__ */ s("div", { style: {
         minWidth: Q
-      }, className: h(o.dropdownMenu, ae, U === "right" && o.dropdownMenuRight), children: [
-        (x || m) && /* @__PURE__ */ l("div", { className: o.dropdownMenuToolbar, children: [
-          x && /* @__PURE__ */ l("div", { className: o.searchContainer, children: [
-            /* @__PURE__ */ d(Me, { placeholder: le, value: Y, onChange: ve, className: o.search }),
-            M && /* @__PURE__ */ d(Ce, { label: ie, onChange: Oe })
+      }, className: D(o.dropdownMenu, ae, U === "right" && o.dropdownMenuRight), children: [
+        (x || m) && /* @__PURE__ */ s("div", { className: o.dropdownMenuToolbar, children: [
+          x && /* @__PURE__ */ s("div", { className: o.searchContainer, children: [
+            /* @__PURE__ */ d(Ve, { placeholder: le, value: Y, onChange: Le, className: o.search }),
+            M && /* @__PURE__ */ d(Se, { label: ie, onChange: Ie })
           ] }),
-          m && /* @__PURE__ */ l("div", { className: o.selectAllContainer, children: [
+          m && /* @__PURE__ */ s("div", { className: o.selectAllContainer, children: [
             /* @__PURE__ */ d(re, { variant: "default", noIcon: !0, onClick: () => {
               const e = a.filter((r) => !r.disabled).map((r) => r.value);
               u(e);
@@ -218,12 +219,12 @@ function Vo({
             /* @__PURE__ */ d(re, { variant: "default", noIcon: !0, onClick: () => u([]), disabled: w.length === 0, children: "Deselect all" })
           ] })
         ] }),
-        /* @__PURE__ */ l("div", { className: o.optionsList, "data-dropdown-options-list": !0, children: [
-          a.length > 0 ? Object.entries(Te).map(([e, r]) => /* @__PURE__ */ l("div", { className: o.categoryGroup, children: [
+        /* @__PURE__ */ s("div", { className: o.optionsList, "data-dropdown-options-list": !0, children: [
+          a.length > 0 ? Object.entries(Ae).map(([e, r]) => /* @__PURE__ */ s("div", { className: o.categoryGroup, children: [
             e !== "default" && /* @__PURE__ */ d("div", { className: o.categoryDivider, children: /* @__PURE__ */ d("span", { className: o.categoryLabel, children: e }) }),
             r.map((n) => {
-              const R = Ae.indexOf(n), k = a.find((xe) => xe.value === n.value);
-              return /* @__PURE__ */ d("button", { title: (k == null ? void 0 : k.label) || n.label, type: "button", className: h(o.optionItem, V.includes(n.value) && o.optionItemSelected, n.disabled && o.optionItemDisabled, R === I && o.optionItemFocused), onClick: () => G(n), disabled: n.disabled, "data-dropdown-option-item": !0, children: /* @__PURE__ */ l("div", { className: o.optionContent, children: [
+              const R = xe.indexOf(n), k = a.find((Ce) => Ce.value === n.value);
+              return /* @__PURE__ */ d("button", { title: (k == null ? void 0 : k.label) || n.label, type: "button", className: D(o.optionItem, V.includes(n.value) && o.optionItemSelected, n.disabled && o.optionItemDisabled, R === I && o.optionItemFocused), onClick: () => G(n), disabled: n.disabled, "data-dropdown-option-item": !0, children: /* @__PURE__ */ s("div", { className: o.optionContent, children: [
                 /* @__PURE__ */ d("span", { className: o.optionLabel, children: n.label }),
                 V.includes(n.value) && /* @__PURE__ */ d(B, { icon: "ap-icon-check", className: o.tickIcon })
               ] }) }, n.value);
@@ -232,18 +233,18 @@ function Vo({
           a.length === 0 && /* @__PURE__ */ d("div", { className: o.noOptions, children: "No options found" })
         ] }),
         " ",
-        m && /* @__PURE__ */ l("div", { className: o.actionButtons, children: [
-          /* @__PURE__ */ d(ne, { type: "primary", variant: "cancel", size: "md", onClick: Ne, children: "Cancel" }),
-          /* @__PURE__ */ d(ne, { type: "primary", variant: "default", size: "md", onClick: ge, disabled: !ye, children: "Apply" })
+        m && /* @__PURE__ */ s("div", { className: o.actionButtons, children: [
+          /* @__PURE__ */ d(ne, { type: "primary", variant: "cancel", size: "md", onClick: ve, children: "Cancel" }),
+          /* @__PURE__ */ d(ne, { type: "primary", variant: "default", size: "md", onClick: Ne, disabled: !ke, children: "Apply" })
         ] })
       ] }) }) })
     ] }) }),
-    (O || C || W && q) && /* @__PURE__ */ l("div", { className: o.helpers, children: [
-      O ? /* @__PURE__ */ d("span", { title: O, className: o.errorMessage, children: O }) : C && /* @__PURE__ */ d("span", { title: C, className: h(o.helpText, L && o.helpTextDisabled), children: C }),
-      W && q && /* @__PURE__ */ d("a", { href: W, className: h(o.helpLink, L && o.helpLinkDisabled), target: "_blank", rel: "noopener noreferrer", children: q })
+    (O || C || W && q) && /* @__PURE__ */ s("div", { className: o.helpers, children: [
+      O ? /* @__PURE__ */ d("span", { title: O, className: o.errorMessage, children: O }) : C && /* @__PURE__ */ d("span", { title: C, className: D(o.helpText, L && o.helpTextDisabled), children: C }),
+      W && q && /* @__PURE__ */ d("a", { href: W, className: D(o.helpLink, L && o.helpLinkDisabled), target: "_blank", rel: "noopener noreferrer", children: q })
     ] })
   ] });
 }
 export {
-  Vo as default
+  Wo as default
 };

package/dist/components/FilePicker/FilePicker.d.ts

@@ -0,0 +1,46 @@
+import { InteractiveEventHandlers } from '../../types/native-events';
+import { InputLabelTooltipProps } from '../Input/Input';
+export type UploadFile = {
+    file: File;
+    error?: string;
+};
+type FilePickerProps = {
+    type?: 'single' | 'multiple';
+    maxFiles?: number;
+    fileExtensionsAllowed: string[];
+    maxSize: number;
+    queueFiles?: boolean;
+    disabled?: boolean;
+    value?: File[];
+    label: string;
+    required?: boolean;
+    placeholder?: string;
+    errorMessage?: string;
+    helpText?: string;
+    helpLink?: string;
+    helpLinkText?: string;
+    labelTooltip?: InputLabelTooltipProps;
+} & InteractiveEventHandlers;
+/**
+ * FilePicker component for uploading files.
+ *
+ * @param {object} props - FilePicker component props
+ * @param {'single' | 'multiple'} props.type - The type of file picker to display
+ * @param {number} props.maxFiles - The maximum number of files to upload
+ * @param {string[]} props.fileExtensionsAllowed - The allowed file extensions
+ * @param {number} props.maxSize - The maximum file size in MB
+ * @param {boolean} props.queueFiles - Whether to queue files
+ * @param {boolean} props.disabled - Whether the component is disabled
+ * @param {File[]} props.value - The value of the component
+ * @param {string} props.label - The label of the component
+ * @param {boolean} props.required - Whether the component is required
+ * @param {string} props.placeholder - The placeholder of the component
+ * @param {string} props.errorMessage - The error message of the component
+ * @param {string} props.helpText - The help text of the component
+ * @param {string} props.helpLink - The help link of the component
+ * @param {string} props.helpLinkText - The help link text of the component
+ * @param {InputLabelTooltipProps} props.labelTooltip - The label tooltip of the component
+ * @returns {JSX.Element} The rendered FilePicker component
+ */
+export default function FilePicker({ type, maxFiles, fileExtensionsAllowed, maxSize, queueFiles, disabled, value, label, required, placeholder, errorMessage, helpText, helpLink, helpLinkText, labelTooltip, }: FilePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FilePicker/FilePicker.js

@@ -0,0 +1,153 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { useId as J, useRef as Y, useState as M, useEffect as G } from "react";
+import Q from "../Tooltip/Tooltip.js";
+import g from "../Icon/Icon.js";
+import I from "../Button/Button.js";
+import { c as W } from "../../clsx-OuTLNxxd.js";
+import '../../assets/FilePicker.css';const Z = "FilePicker-module__container___knCCi", ee = "FilePicker-module__label___al7Xe", ie = "FilePicker-module__required___41Vjd", le = "FilePicker-module__labelTooltipIcon___Cc1QF", te = "FilePicker-module__helpers___79-g5", ne = "FilePicker-module__helperText___ja9Rr", se = "FilePicker-module__errorMessage___TvHrL", oe = "FilePicker-module__singleFileHelpLinkContainer___mpjUf", ce = "FilePicker-module__singleFileHelpLinkReservedSpace___r8j2b", re = "FilePicker-module__helpLink___uu45D", me = "FilePicker-module__input___cL1Hs", ae = "FilePicker-module__singleFileContainer___OFSDt", ue = "FilePicker-module__singleFileInputContainer___MOkES", pe = "FilePicker-module__inputFileName___sMs7R", _e = "FilePicker-module__inputFileNamePlaceholder___-mkDD", Fe = "FilePicker-module__inputButton___ghLlD", de = "FilePicker-module__multipleHelpText___5tnnn", Ie = "FilePicker-module__multipleInputButton___WCJp9", he = "FilePicker-module__multipleFilesList___Kim0I", Le = "FilePicker-module__multipleFilesListItem___01PDS", ke = "FilePicker-module__multipleFilesListItemContent___pKbho", fe = "FilePicker-module__multipleFilesListItemContentData___5GC-C", Ne = "FilePicker-module__multipleFilesListItemIconContainer___7sUL5", ge = "FilePicker-module__multipleFilesListItemIcon___nfMX9", Ce = "FilePicker-module__multipleFilesListItemText___nPqrL", Pe = "FilePicker-module__multipleFilesListItemName___NjHhX", xe = "FilePicker-module__multipleFilesListItemSize___wc8LJ", ve = "FilePicker-module__multipleFilesListItemError___x9qkT", De = "FilePicker-module__multipleFilesListItemIconError___0RO46", Ee = "FilePicker-module__multipleFilesListItemIconDelete___9Z9Dl", Te = "FilePicker-module__disabled___szMiq", e = {
+  container: Z,
+  label: ee,
+  required: ie,
+  labelTooltipIcon: le,
+  helpers: te,
+  helperText: ne,
+  errorMessage: se,
+  singleFileHelpLinkContainer: oe,
+  singleFileHelpLinkReservedSpace: ce,
+  helpLink: re,
+  input: me,
+  singleFileContainer: ae,
+  singleFileInputContainer: ue,
+  inputFileName: pe,
+  inputFileNamePlaceholder: _e,
+  inputButton: Fe,
+  multipleHelpText: de,
+  multipleInputButton: Ie,
+  multipleFilesList: he,
+  multipleFilesListItem: Le,
+  multipleFilesListItemContent: ke,
+  multipleFilesListItemContentData: fe,
+  multipleFilesListItemIconContainer: Ne,
+  multipleFilesListItemIcon: ge,
+  multipleFilesListItemText: Ce,
+  multipleFilesListItemName: Pe,
+  multipleFilesListItemSize: xe,
+  multipleFilesListItemError: ve,
+  multipleFilesListItemIconError: De,
+  multipleFilesListItemIconDelete: Ee,
+  disabled: Te
+};
+function Me({
+  type: c = "single",
+  maxFiles: _ = 1,
+  fileExtensionsAllowed: h,
+  maxSize: u,
+  queueFiles: j = !1,
+  disabled: s = !1,
+  value: F,
+  label: C,
+  required: b = !1,
+  placeholder: q,
+  errorMessage: m,
+  helpText: L,
+  helpLink: P,
+  helpLinkText: x,
+  labelTooltip: r
+}) {
+  var R, w;
+  const v = J(), k = Y(null), [l, d] = M(F ? F.map((i) => ({
+    file: i
+  })) : []), [D, E] = M(!1);
+  G(() => {
+    const i = B(F ?? []);
+    d(i);
+  }, [F]);
+  const K = h.map((i) => `.${i.replace(/^\./, "")}`).join(","), T = h.join(", "), V = (i) => {
+    const o = i.name.toLowerCase();
+    return o.includes(".") ? o.split(".").pop() ?? "" : "";
+  }, B = (i) => {
+    const a = l.length + i.length > _;
+    E(a);
+    const f = u ? u * 1024 * 1024 : Number.POSITIVE_INFINITY, y = new Set(h.map((p) => p.toLowerCase().replace(/^\./, "")));
+    return i.map((p) => {
+      const U = p.size <= f, X = y.size === 0 || y.has(V(p));
+      let N;
+      const A = u ? `up to ${u}MB` : "";
+      return U || (N = `File size is too large. Must be ${A}.`), X || (N = `The file format is incorrect. Please make sure it is one of the extensions: ${T}.`), {
+        file: p,
+        error: N
+      };
+    });
+  }, O = (i) => (i / 1024).toFixed(2) + " KB", H = () => {
+    var i;
+    s || (i = k.current) == null || i.click();
+  }, S = (i) => {
+    var o;
+    s || i.key === "Enter" && ((o = k.current) == null || o.click());
+  }, $ = (i) => {
+    if (s) return;
+    const o = i.target.files, a = B(Array.from(o ?? []));
+    d(c === "multiple" && j ? [...l, ...a] : a);
+  }, z = (i) => {
+    if (s || !l) return;
+    const a = l.length - 1 > _;
+    E(a), d(l == null ? void 0 : l.filter((f) => f.file.name !== i));
+  };
+  return /* @__PURE__ */ n("div", { className: W(e.container, s && e.disabled), children: [
+    /* @__PURE__ */ n("label", { htmlFor: v, onClick: (i) => i.preventDefault(), className: e.label, children: [
+      /* @__PURE__ */ t("span", { title: C, className: e.labelText, children: C }),
+      b && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: e.required, children: "*" }),
+      r && /* @__PURE__ */ t(Q, { content: r.content, size: r.size, theme: r.theme, tipSide: r.tipSide, tipAlignment: r.tipAlignment, startVisible: r.startVisible, children: /* @__PURE__ */ t(g, { icon: "ap-icon-info", className: e.labelTooltipIcon }) }),
+      c === "multiple" && /* @__PURE__ */ n("span", { className: e.multipleHelpText, children: [
+        "Only ",
+        T,
+        " files with max size of ",
+        u,
+        "MB"
+      ] })
+    ] }),
+    /* @__PURE__ */ t("input", { accept: K, multiple: c === "multiple", ref: k, type: "file", id: v, className: e.input, onChange: $ }),
+    c === "single" && /* @__PURE__ */ n("div", { className: e.singleFileContainer, children: [
+      /* @__PURE__ */ n("div", { tabIndex: s ? -1 : 0, onClick: H, onKeyDown: S, className: e.singleFileInputContainer, children: [
+        /* @__PURE__ */ n("span", { className: e.inputFileName, children: [
+          l && l.length > 0 && /* @__PURE__ */ t("span", { className: e.inputFileNameText, children: l[0].file.name }),
+          l && l.length === 0 && /* @__PURE__ */ t("span", { className: e.inputFileNamePlaceholder, children: q })
+        ] }),
+        /* @__PURE__ */ t(I, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-upload", className: e.inputButton, tabIndex: -1, disabled: s, children: /* @__PURE__ */ t("span", { children: "Browse file" }) })
+      ] }),
+      /* @__PURE__ */ t("span", { className: e.singleFileHelpLinkReservedSpace, children: l && l.length > 0 && /* @__PURE__ */ t(I, { type: "tertiary", variant: "default", size: "md", icon: "ap-icon-delete", className: e.singleFileDeleteButton, onClick: () => z(l[0].file.name), disabled: s }) })
+    ] }),
+    c === "multiple" && /* @__PURE__ */ t(I, { type: "secondary", variant: "default", size: "md", icon: "ap-icon-upload", className: e.multipleInputButton, onClick: H, onKeyDown: S, disabled: s, children: /* @__PURE__ */ n("span", { children: [
+      "Browse files (max ",
+      _,
+      " files)"
+    ] }) }),
+    /* @__PURE__ */ n("div", { className: e.helpers, children: [
+      m || D || (R = l[0]) != null && R.error ? /* @__PURE__ */ n("span", { title: m, className: e.errorMessage, children: [
+        c === "single" && (m || ((w = l[0]) == null ? void 0 : w.error)),
+        c === "multiple" && (m || (D ? `You can only upload up to ${_} files.` : ""))
+      ] }) : L && c === "single" && /* @__PURE__ */ t("span", { title: L, className: e.helperText, children: L }),
+      c === "single" && P && x && /* @__PURE__ */ n("span", { className: e.singleFileHelpLinkContainer, children: [
+        /* @__PURE__ */ t("a", { href: P, className: e.helpLink, target: "_blank", rel: "noopener noreferrer", tabIndex: s ? -1 : 0, children: x }),
+        /* @__PURE__ */ t("span", { className: e.singleFileHelpLinkReservedSpace })
+      ] })
+    ] }),
+    c === "multiple" && l && (l == null ? void 0 : l.length) > 0 && /* @__PURE__ */ t("ul", { className: e.multipleFilesList, children: l == null ? void 0 : l.map((i, o) => /* @__PURE__ */ t("li", { className: e.multipleFilesListItem, children: /* @__PURE__ */ n("div", { className: e.multipleFilesListItemContent, children: [
+      /* @__PURE__ */ t("span", { className: e.multipleFilesListItemIconContainer, children: /* @__PURE__ */ t(g, { icon: "ap-icon-document", className: e.multipleFilesListItemIcon }) }),
+      /* @__PURE__ */ n("div", { className: e.multipleFilesListItemContentData, children: [
+        /* @__PURE__ */ n("div", { className: e.multipleFilesListItemText, children: [
+          /* @__PURE__ */ t("span", { className: e.multipleFilesListItemName, children: i.file.name }),
+          /* @__PURE__ */ t("span", { className: e.multipleFilesListItemSize, children: O(i.file.size) }),
+          i.error && /* @__PURE__ */ n("span", { className: e.multipleFilesListItemError, children: [
+            /* @__PURE__ */ t(g, { icon: "ap-icon-alert", className: e.multipleFilesListItemIconError }),
+            i.error
+          ] })
+        ] }),
+        /* @__PURE__ */ t(I, { type: "tertiary", variant: "default", size: "sm", onClick: () => z(i.file.name), icon: "ap-icon-delete", iconClassName: e.multipleFilesListItemIconDelete, disabled: s })
+      ] })
+    ] }) }, o)) })
+  ] });
+}
+export {
+  Me as default
+};

package/dist/components/FilePicker/FilePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/FilePicker/FilePicker.test.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import l from "./FilePicker.js";
+import { d as i, i as r, r as t, g as o } from "../../vi.ClIskdbk-CFW_9sOK.js";
+i("FilePicker", () => {
+  r("should render", () => {
+    t(/* @__PURE__ */ e(l, { type: "single", fileExtensionsAllowed: ["xlsx"], maxSize: 1, maxFiles: 10, label: "Label", required: !0, placeholder: "Select a file", helpText: "Help text", helpLink: "https://example.com", helpLinkText: "Help link" })), o(!0).toBe(!0);
+  });
+});

package/dist/components/Ghost/Ghost.test.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { d as i, i as s, r as a, g as e, s as n, v as c, f as u } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d as i, i as s, r as a, g as e, s as n, v as c, f as u } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import d from "./Ghost.js";
 i("Ghost", () => {
   i("Rendering", () => {

package/dist/components/Input/Input.test.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import { d as a, i as s, r as l, g as e, s as n, v as p, f as u } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d as a, i as s, r as l, g as e, s as n, v as p, f as u } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import o from "./Input.js";
 a("Input", () => {
   a("Rendering", () => {

package/dist/components/RadioGroup/RadioGroup.test.js

@@ -1,5 +1,5 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { d as r, i as l, r as i, g as n, s as a, v as u, f as c } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d as r, i as l, r as i, g as n, s as a, v as u, f as c } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import d from "./RadioGroup.js";
 import t from "../Radio/Radio.js";
 r("RadioGroup", () => {

package/dist/components/Search/Search.test.js

@@ -1,5 +1,5 @@
 import { jsx as l } from "react/jsx-runtime";
-import { d as u, i as o, r as i, g as t, s as n, v as p, f as d } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d as u, i as o, r as i, g as t, s as n, v as p, f as d } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import a from "./Search.js";
 u("Search", () => {
   u("Rendering", () => {

package/dist/components/SplitButton/SplitButton.js

@@ -5,10 +5,11 @@ import * as d from "react";
 import { useRef as W, useState as N, useEffect as U } from "react";
 import $ from "../Icon/Icon.js";
 import "../Input/Input.js";
+import "../Dialog/Dialog.js";
 import { u as K, c as H, P as j, a as M, b as F } from "../../index-DWydnyjJ.js";
 import { c as C, R as V, A as X, P as q, C as J, I as Q, G as Y, L as Z, a as oo, b as eo, d as no, e as to, S as ro, f as ao, g as io, h as po } from "../../index-CVWHq7Pr.js";
 import { u as I } from "../../index-2H7slGYV.js";
-import '../../assets/SplitButton.css';var v = "DropdownMenu", [so, Vo] = H(
+import '../../assets/SplitButton.css';var v = "DropdownMenu", [so, Xo] = H(
   v,
   [C]
 ), s = C(), [uo, y] = so(v), x = (o) => {
@@ -201,7 +202,7 @@ const u = {
   "split-button-dropdown-menu-size-sm": "SplitButton-module__split-button-dropdown-menu-size-sm___xlVmW",
   "split-button-dropdown-arrow": "SplitButton-module__split-button-dropdown-arrow___-Pf9C"
 };
-function Xo({
+function qo({
   type: o = "primary",
   trigger: t = "single",
   size: e = "md",
@@ -241,5 +242,5 @@ function Xo({
   ] });
 }
 export {
-  Xo as default
+  qo as default
 };

package/dist/components/SplitButton/SplitButton.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d, i as c, r as l, s as e, g as t, f as g, v as b } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d, i as c, r as l, s as e, g as t, f as g, v as b } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import r from "./SplitButton.js";
 d("SplitButton", () => {
   const a = (i) => {

package/dist/components/Tag/Tag.test.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import { d as c, i as o, r as l, g as e, s as t } from "../../vi.ClIskdbk-DlR4jLzR.js";
+import { d as c, i as o, r as l, g as e, s as t } from "../../vi.ClIskdbk-CFW_9sOK.js";
 import s from "./Tag.js";
 c("Tag", () => {
   c("Rendering", () => {