@alixpartners/ui-components 2.0.0-beta.9 → 2.0.1

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,17 @@
 import { ApIcon } from '../../assets/ap-icons-types';
 import { DataAttributes } from '../../types/data-attributes';
 import { InteractiveEventHandlers } from '../../types/native-events';
+export type ButtonProps = {
+    type: 'primary' | 'secondary' | 'tertiary';
+    variant: 'default' | 'danger' | 'cancel';
+    size: 'sm' | 'md';
+    icon?: ApIcon;
+    disabled?: boolean;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    iconClassName?: string;
+} & DataAttributes & InteractiveEventHandlers;
 /**
  * A versatile button component that supports different types, variants, sizes, and states.
  * Used for user interactions and form submissions throughout the application.
@@ -16,16 +27,4 @@ import { InteractiveEventHandlers } from '../../types/native-events';
  * @param {() => void} [props.onClick] - Callback fired when the button is clicked
  * @returns {JSX.Element} The rendered Button component
  */
-type ButtonProps = {
-    type: 'primary' | 'secondary' | 'tertiary';
-    variant: 'default' | 'danger' | 'cancel';
-    size: 'sm' | 'md';
-    icon?: ApIcon;
-    disabled?: boolean;
-    loading?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    iconClassName?: string;
-} & DataAttributes & InteractiveEventHandlers;
 export default function Button({ type, variant, size, icon, disabled, loading, children, className, iconClassName, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Button/Button.js

@@ -1,8 +1,9 @@
 import { jsxs as y, jsx as b } from "react/jsx-runtime";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import g from "../Spinner/Spinner.js";
-import '../../assets/Button.css';const f = "Button-module__btn___daEdK", w = "Button-module__loading___QfItr", t = {
-  btn: f,
+import { c as a } from "../../clsx-OuTLNxxd.js";
+import f from "../Spinner/Spinner.js";
+import g from "../Icon/Icon.js";
+import '../../assets/Button.css';const w = "Button-module__btn___daEdK", x = "Button-module__loading___QfItr", t = {
+  btn: w,
   "btn-icon": "Button-module__btn-icon___G7m4S",
   "btn-icon-sm": "Button-module__btn-icon-sm___w7eg9",
   "btn-icon-md": "Button-module__btn-icon-md___8Ywy2",
@@ -15,12 +16,12 @@ import '../../assets/Button.css';const f = "Button-module__btn___daEdK", w = "Bu
   "btn-tertiary": "Button-module__btn-tertiary___G-7lD",
   "btn-disabled": "Button-module__btn-disabled___eg1uH",
   "btn-loading": "Button-module__btn-loading___vAg78",
-  loading: w,
+  loading: x,
   "btn-sm": "Button-module__btn-sm___KNlkv",
   "btn-md": "Button-module__btn-md___C8vqh",
   "btn-text": "Button-module__btn-text___3ccH9"
 };
-function D({
+function h({
   type: c,
   variant: i,
   size: o,
@@ -28,20 +29,20 @@ function D({
   disabled: u = !1,
   loading: e = !1,
   children: d,
-  className: s,
-  iconClassName: r,
+  className: r,
+  iconClassName: s,
   ..._
 }) {
   const B = (n) => {
-    var a;
-    (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click()), (a = _.onKeyDown) == null || a.call(_, n);
+    var m;
+    (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.currentTarget.click()), (m = _.onKeyDown) == null || m.call(_, n);
   };
-  return /* @__PURE__ */ y("button", { type: "button", className: m(t.btn, t[`btn-${c}`], t[`btn-${i}`], t[`btn-${o}`], u && t["btn-disabled"], s), disabled: u || e, onKeyDown: B, ..._, children: [
-    !!l && !e && /* @__PURE__ */ b("span", { className: m(t["btn-icon"], t[`btn-icon-${o}`], l, r) }),
-    e && /* @__PURE__ */ b(g, { size: o, color: "white", className: t["loading-spinner"] }),
+  return /* @__PURE__ */ y("button", { type: "button", className: a(t.btn, t[`btn-${c}`], t[`btn-${i}`], t[`btn-${o}`], u && t["btn-disabled"], r), disabled: u || e, onKeyDown: B, ..._, children: [
+    !!l && !e && /* @__PURE__ */ b(g, { icon: l, className: a(t["btn-icon"], t[`btn-icon-${o}`], s) }),
+    e && /* @__PURE__ */ b(f, { size: o, color: "white", className: t["loading-spinner"] }),
     d && /* @__PURE__ */ b("span", { className: t["btn-text"], children: d })
   ] });
 }
 export {
-  D as default
+  h as default
 };

package/dist/components/Creatable/Creatable.d.ts

@@ -12,6 +12,7 @@ type CreatableProps = {
     helpLink?: string;
     helpLinkText?: string;
     disabled?: boolean;
+    caseSensitive?: boolean;
     errorMessage?: string;
     onChange?: (selectedValues: string[]) => void;
 } & DataAttributes & InteractiveEventHandlers;
@@ -31,10 +32,11 @@ type CreatableProps = {
  * @param {[string]} [props.helpLink] - Optional URL for help link displayed with helper text
  * @param {[string]} [props.helpLinkText] - Optional help link label to display when `helpLink` is provided
  * @param {[boolean]} [props.disabled] - Whether the field is disabled
+ * @param {[boolean]} [props.caseSensitive] - Whether to perform case-sensitive matching when checking for existing options in creatable mode (defaults to false)
  * @param {[string]} [props.errorMessage] - Optional error message displayed below the field
  * @param {(selectedValues: string[]) => void} [props.onChange] - Callback fired when selection changes
  * @param {DataAttributes} [props.data-*] - Additional `data-` attributes forwarded to the root element
  * @returns {JSX.Element} The rendered Creatable component
  */
-export default function Creatable({ className, label, required, multiSelect, value, helpText, helpLink, helpLinkText, disabled, errorMessage, onChange, onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut, onMouseMove, onKeyDown, onKeyUp, onFocus, onBlur, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
+export default function Creatable({ className, label, required, multiSelect, value, helpText, helpLink, helpLinkText, disabled, caseSensitive, errorMessage, onChange, onClick, onDoubleClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut, onMouseMove, onKeyDown, onKeyUp, onFocus, onBlur, ...props }: CreatableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Creatable/Creatable.js

@@ -1,34 +1,35 @@
-import { jsx as v } from "react/jsx-runtime";
-import y from "../Dropdown/Dropdown.js";
-function B({
-  className: r,
-  label: e,
-  required: t = !1,
-  multiSelect: a = !1,
+import { jsx as y } from "react/jsx-runtime";
+import z from "../Dropdown/Dropdown.js";
+function E({
+  className: e,
+  label: r,
+  required: a = !1,
+  multiSelect: t = !1,
   value: o,
   helpText: f,
   helpLink: l,
   helpLinkText: s,
   disabled: i,
-  errorMessage: m,
-  onChange: n,
-  onClick: p,
-  onDoubleClick: u,
-  onMouseDown: b,
-  onMouseUp: d,
-  onMouseEnter: x,
-  onMouseLeave: C,
-  onMouseOver: c,
-  onMouseOut: j,
-  onMouseMove: w,
-  onKeyDown: D,
-  onKeyUp: g,
-  onFocus: h,
-  onBlur: k,
-  ...q
+  caseSensitive: m = !1,
+  errorMessage: n,
+  onChange: p,
+  onClick: u,
+  onDoubleClick: b,
+  onMouseDown: d,
+  onMouseUp: x,
+  onMouseEnter: C,
+  onMouseLeave: c,
+  onMouseOver: j,
+  onMouseOut: w,
+  onMouseMove: D,
+  onKeyDown: g,
+  onKeyUp: h,
+  onFocus: k,
+  onBlur: q,
+  ...v
 }) {
-  return /* @__PURE__ */ v(y, { className: r, label: e, required: t, isCreatable: !0, multiSelect: a, value: o, helpText: f, helpLink: l, helpLinkText: s, disabled: i, errorMessage: m, onChange: n, onClick: p, onDoubleClick: u, onMouseDown: b, onMouseUp: d, onMouseEnter: x, onMouseLeave: C, onMouseOver: c, onMouseOut: j, onMouseMove: w, onKeyDown: D, onKeyUp: g, onFocus: h, onBlur: k, ...q });
+  return /* @__PURE__ */ y(z, { className: e, label: r, required: a, isCreatable: !0, multiSelect: t, value: o, helpText: f, helpLink: l, helpLinkText: s, disabled: i, caseSensitive: m, errorMessage: n, onChange: p, onClick: u, onDoubleClick: b, onMouseDown: d, onMouseUp: x, onMouseEnter: C, onMouseLeave: c, onMouseOver: j, onMouseOut: w, onMouseMove: D, onKeyDown: g, onKeyUp: h, onFocus: k, onBlur: q, ...v });
 }
 export {
-  B as default
+  E as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,10 +1,12 @@
 import { DataAttributes } from '../../types/data-attributes';
+import { ApIcon } from '../../assets/ap-icons-types';
 /**
  * Dialog component that displays modal content with customizable actions and optional illustration.
  * Provides a native HTML dialog element with backdrop support, confirmation/cancellation actions, and accessibility features.
  *
  * @param {object} props - Dialog component props
- * @param {React.ReactNode} props.children - The trigger element that opens the dialog when clicked
+ * @param {React.ReactNode} [props.children] - The trigger element that opens the dialog when clicked (optional when using isOpen prop)
+ * @param {boolean} [props.isOpen] - Controls whether the dialog is displayed. When provided, the dialog becomes controlled and children trigger is optional
  * @param {() => void} [props.onClose] - Callback fired when the dialog is closed (shows close button when provided)
  * @param {string} props.title - The title text displayed at the top of the dialog
  * @param {string} props.description - The description text displayed below the title
@@ -17,15 +19,24 @@ import { DataAttributes } from '../../types/data-attributes';
  */
 type DialogProps = {
     className?: string;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    isOpen?: boolean;
     onClose?: () => void;
     title: string;
-    description: string;
+    description: React.ReactNode;
     illustrationSrc?: string;
     confirmButtonText?: string;
     cancelButtonText?: string;
+    confirmButtonType?: 'primary' | 'secondary' | 'tertiary';
+    cancelButtonType?: 'primary' | 'secondary' | 'tertiary';
+    confirmButtonVariant?: 'default' | 'danger' | 'cancel';
+    cancelButtonVariant?: 'default' | 'danger' | 'cancel';
+    confirmButtonSize?: 'sm' | 'md';
+    cancelButtonSize?: 'sm' | 'md';
+    confirmButtonIcon?: ApIcon;
+    cancelButtonIcon?: ApIcon;
     onConfirm?: () => void;
     onCancel?: () => void;
 } & DataAttributes;
-export default function Dialog({ children, onClose, title, description, illustrationSrc, confirmButtonText, cancelButtonText, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export default function Dialog({ children, isOpen, onClose, title, description, illustrationSrc, confirmButtonText, cancelButtonText, confirmButtonType, cancelButtonType, confirmButtonVariant, cancelButtonVariant, confirmButtonSize, cancelButtonSize, confirmButtonIcon, cancelButtonIcon, onConfirm, onCancel, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Dialog/Dialog.js

@@ -1,57 +1,73 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import { useRef as _ } from "react";
-import r from "../Button/Button.js";
-import '../../assets/Dialog.css';const k = "Dialog-module__dialog___r4ljx", a = {
-  dialog: k,
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { useRef as h, useEffect as I } from "react";
+import f from "../Button/Button.js";
+import H from "../Icon/Icon.js";
+import '../../assets/Dialog.css';const J = "Dialog-module__dialog___r4ljx", a = {
+  dialog: J,
   "dialog-illustration": "Dialog-module__dialog-illustration___IHiQl",
   "dialog-content": "Dialog-module__dialog-content___3hOGc",
-  "dialog-close-button-container": "Dialog-module__dialog-close-button-container___35uPS",
   "dialog-title": "Dialog-module__dialog-title___KACAJ",
   "dialog-description": "Dialog-module__dialog-description___hL8fm",
-  "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M"
+  "dialog-buttons": "Dialog-module__dialog-buttons___x-v2M",
+  "dialog-close-button": "Dialog-module__dialog-close-button___-PzEz",
+  "dialog-close-button-icon": "Dialog-module__dialog-close-button-icon___BeGg2"
 };
-function R({
-  children: u,
-  onClose: o,
-  title: m,
-  description: h,
+function q({
+  children: g,
+  isOpen: d,
+  onClose: l,
+  title: v,
+  description: b,
   illustrationSrc: s,
-  confirmButtonText: n,
-  cancelButtonText: g,
-  onConfirm: d,
-  onCancel: c,
-  className: p,
-  ...v
+  confirmButtonText: _,
+  cancelButtonText: u,
+  confirmButtonType: D = "primary",
+  cancelButtonType: p = "primary",
+  confirmButtonVariant: N = "default",
+  cancelButtonVariant: k = "cancel",
+  confirmButtonSize: y = "md",
+  cancelButtonSize: z = "md",
+  confirmButtonIcon: j,
+  cancelButtonIcon: x,
+  onConfirm: e,
+  onCancel: r,
+  className: M,
+  ...R
 }) {
-  const D = _(null), t = _(null), f = () => {
-    var l;
-    (l = t.current) == null || l.showModal();
-  }, N = () => {
-    var l;
-    (l = t.current) == null || l.close(), o == null || o();
-  }, b = () => {
-    var l;
-    (l = t.current) == null || l.close(), d == null || d();
-  }, y = () => {
-    var l;
-    (l = t.current) == null || l.close(), c == null || c();
+  const w = h(null), t = h(null);
+  I(() => {
+    var i, m;
+    d !== void 0 && (d ? (i = t.current) == null || i.showModal() : (m = t.current) == null || m.close());
+  }, [d]);
+  const A = () => {
+    var i;
+    (i = t.current) == null || i.showModal();
+  }, n = () => {
+    var i;
+    l == null || l(), d === void 0 && ((i = t.current) == null || i.close());
+  }, E = () => {
+    var i;
+    e == null || e(), d === void 0 && ((i = t.current) == null || i.close(), l == null || l());
+  }, G = () => {
+    var i;
+    r == null || r(), d === void 0 && ((i = t.current) == null || i.close(), l == null || l());
   };
-  return /* @__PURE__ */ e("div", { className: p, ...v, children: [
-    /* @__PURE__ */ i("div", { ref: D, onClick: f, children: u }),
-    /* @__PURE__ */ e("dialog", { className: a.dialog, ref: t, onClose: o, children: [
-      /* @__PURE__ */ i("div", { className: a["dialog-close-button-container"], children: o && /* @__PURE__ */ i(r, { className: a["dialog-close-button"], type: "tertiary", variant: "cancel", size: "md", onClick: N, icon: "ap-icon-close" }) }),
-      s && /* @__PURE__ */ i("div", { className: a["dialog-illustration"], children: /* @__PURE__ */ i("img", { src: s, alt: "Dialog illustration" }) }),
-      /* @__PURE__ */ e("div", { className: a["dialog-content"], children: [
-        /* @__PURE__ */ i("h2", { className: a["dialog-title"], children: m }),
-        /* @__PURE__ */ i("p", { className: a["dialog-description"], children: h })
+  return /* @__PURE__ */ c("div", { className: M, ...R, children: [
+    g && /* @__PURE__ */ o("div", { ref: w, onClick: A, children: g }),
+    /* @__PURE__ */ c("dialog", { className: a.dialog, ref: t, onClose: n, children: [
+      l && /* @__PURE__ */ o("button", { className: a["dialog-close-button"], onClick: n, children: /* @__PURE__ */ o(H, { className: a["dialog-close-button-icon"], icon: "ap-icon-close" }) }),
+      s && /* @__PURE__ */ o("div", { className: a["dialog-illustration"], children: /* @__PURE__ */ o("img", { src: s, alt: "Dialog illustration" }) }),
+      /* @__PURE__ */ c("div", { className: a["dialog-content"], children: [
+        /* @__PURE__ */ o("h2", { className: a["dialog-title"], children: v }),
+        /* @__PURE__ */ o("div", { className: a["dialog-description"], children: b })
       ] }),
-      /* @__PURE__ */ e("div", { className: a["dialog-buttons"], children: [
-        g && /* @__PURE__ */ i(r, { type: "primary", variant: "cancel", size: "md", onClick: y, children: g }),
-        n && /* @__PURE__ */ i(r, { type: "primary", variant: "default", size: "md", onClick: b, children: n })
+      /* @__PURE__ */ c("div", { className: a["dialog-buttons"], children: [
+        u && /* @__PURE__ */ o(f, { type: p, variant: k, size: z, onClick: G, icon: x, children: u }),
+        _ && /* @__PURE__ */ o(f, { type: D, variant: N, size: y, onClick: E, icon: j, children: _ })
       ] })
     ] })
   ] });
 }
 export {
-  R as default
+  q as default
 };

package/dist/components/DragAndDrop/DragAndDrop.d.ts

@@ -13,7 +13,9 @@ type DragAndDropProps = {
     fileExtensionsAllowed: string[];
     maxSize: number;
     maxFiles?: number;
+    value?: File | File[];
     onUpload?: (files: UploadFile[]) => void;
+    onRemoveFile?: (fileName: string) => void;
     queueFiles?: boolean;
 } & DataAttributes & DraggableEventHandlers;
 /**
@@ -28,9 +30,10 @@ type DragAndDropProps = {
  * @param {string[]} props.fileExtensionsAllowed - Allowed file extensions (e.g. ['pdf','png'])
  * @param {number} props.maxSize - Maximum file size in MB
  * @param {number} [props.maxFiles] - Maximum number of files when type is 'multiple'
+ * @param {File | File[]} [props.value] - Controlled value for the component; accepts a single File or array of Files
  * @param {(files: UploadFile[]) => void} [props.onUpload] - Callback fired with validated files upon selection or drop
  * @param {boolean} [props.queueFiles] - When true, newly selected files are appended to the existing list
  * @returns {JSX.Element} The rendered DragAndDrop component
  */
-export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, onUpload, queueFiles, className, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
+export default function DragAndDrop({ label, type, disabled, required, fileExtensionsAllowed, maxSize, maxFiles, value, onUpload, onRemoveFile, queueFiles, className, ...props }: DragAndDropProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DragAndDrop/DragAndDrop.js

@@ -1,16 +1,16 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { useId as S, useRef as B, useState as H } from "react";
-import F from "../Button/Button.js";
-import { c as Q } from "../../clsx-OuTLNxxd.js";
-import I from "../Icon/Icon.js";
-import '../../assets/DragAndDrop.css';const W = "DragAndDrop-module__disabled___h47do", G = "DragAndDrop-module__required___z3cHB", J = "DragAndDrop-module__active___ZMuEx", r = {
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useId as J, useRef as w, useState as K, useCallback as M } from "react";
+import j from "../Button/Button.js";
+import { c as R } from "../../clsx-OuTLNxxd.js";
+import q from "../Icon/Icon.js";
+import '../../assets/DragAndDrop.css';const X = "DragAndDrop-module__disabled___h47do", U = "DragAndDrop-module__required___z3cHB", ee = "DragAndDrop-module__active___ZMuEx", a = {
   "drag-and-drop-container": "DragAndDrop-module__drag-and-drop-container___WHqGh",
-  disabled: W,
-  required: G,
+  disabled: X,
+  required: U,
   "drag-and-drop-space-text-message": "DragAndDrop-module__drag-and-drop-space-text-message___fL-Ac",
   "drag-and-drop-space-text-constraints": "DragAndDrop-module__drag-and-drop-space-text-constraints___YrL7J",
   "drag-and-drop-space": "DragAndDrop-module__drag-and-drop-space___09a0I",
-  active: J,
+  active: ee,
   "drag-and-drop-space-text": "DragAndDrop-module__drag-and-drop-space-text___-8rqC",
   "drag-and-drop-files-list": "DragAndDrop-module__drag-and-drop-files-list___7WNCk",
   "drag-and-drop-files-list-item": "DragAndDrop-module__drag-and-drop-files-list-item___vQO6M",
@@ -22,91 +22,101 @@ import '../../assets/DragAndDrop.css';const W = "DragAndDrop-module__disabled___
   "drag-and-drop-files-list-item-name": "DragAndDrop-module__drag-and-drop-files-list-item-name___M7OAd",
   "drag-and-drop-files-list-item-size": "DragAndDrop-module__drag-and-drop-files-list-item-size___aaovj",
   "drag-and-drop-files-list-item-error": "DragAndDrop-module__drag-and-drop-files-list-item-error___yR0DY",
-  "drag-and-drop-files-list-item-icon-error": "DragAndDrop-module__drag-and-drop-files-list-item-icon-error___17EE-"
+  "drag-and-drop-files-list-item-icon-error": "DragAndDrop-module__drag-and-drop-files-list-item-icon-error___17EE-",
+  "drag-and-drop-files-list-item-icon-delete": "DragAndDrop-module__drag-and-drop-files-list-item-icon-delete___Z1l-B"
 };
-function ee({
-  label: A,
-  type: m = "single",
-  disabled: f,
-  required: O,
+function ne({
+  label: k,
+  type: c = "single",
+  disabled: z,
+  required: E,
   fileExtensionsAllowed: p,
-  maxSize: _,
-  maxFiles: u,
-  onUpload: n,
-  queueFiles: N,
-  className: q,
-  ...i
+  maxSize: g,
+  maxFiles: m = Number.POSITIVE_INFINITY,
+  value: f,
+  onUpload: t,
+  onRemoveFile: N,
+  queueFiles: D,
+  className: P,
+  ...s
 }) {
-  const x = S(), y = B(null), g = B(null), [c, D] = H([]), z = p.join(", "), C = _ ? `up to ${_}MB` : "", w = p.map((e) => `.${e.replace(/^\./, "")}`).join(","), T = () => {
+  const B = J(), O = w(null), h = w(null), [A, x] = K([]), v = f !== void 0, C = p.join(", "), I = g ? `up to ${g}MB` : "", Y = p.map((e) => `.${e.replace(/^\./, "")}`).join(","), $ = () => {
     var e;
-    f || (e = y.current) == null || e.click();
-  }, L = (e) => {
-    const d = _ ? _ * 1024 * 1024 : Number.POSITIVE_INFINITY, a = new Set(p.map((o) => o.toLowerCase().replace(/^\./, ""))), l = e.map((o) => {
-      const v = o.size <= d, k = o.name.toLowerCase(), Y = k.includes(".") ? k.split(".").pop() ?? "" : "", $ = a.size === 0 || a.has(Y);
-      let h;
-      return v || (h = `File size is too large. Must be ${C}.`), $ || (h = `The file format is incorrect. Please make sure it is one of the extensions: ${z}.`), {
-        file: o,
-        error: h
+    u() || (e = O.current) == null || e.click();
+  }, y = M((e) => {
+    const i = g ? g * 1024 * 1024 : Number.POSITIVE_INFINITY, r = new Set(p.map((_) => _.toLowerCase().replace(/^\./, ""))), o = e.map((_) => {
+      const L = _.size <= i, T = _.name.toLowerCase(), F = T.includes(".") ? T.split(".").pop() ?? "" : "", G = r.size === 0 || r.has(F);
+      let b;
+      return L || (b = `File size is too large. Must be ${I}.`), G || (b = `The file format is incorrect. Please make sure it is one of the extensions: ${C}.`), {
+        file: _,
+        error: b
       };
     });
-    return m === "single" ? l.slice(0, 1) : u && u > 0 ? l.slice(0, u) : l;
-  }, M = (e) => {
+    return c === "single" ? o.slice(0, 1) : m && m > 0 ? o.slice(0, m) : o;
+  }, [g, p, I, C, c, m]), d = v ? (() => {
+    const e = Array.isArray(f) ? f : f ? [f] : [];
+    return y(e);
+  })() : A, S = (e) => (e / 1024).toFixed(2) + " KB", u = M(() => z || (d == null ? void 0 : d.length) >= m || c === "single" && (d == null ? void 0 : d.length) > 0, [z, d, m, c]), H = (e) => {
     if (!e.target.files) return;
-    const d = Array.from(e.target.files), a = L(d);
-    D((l) => N ? [...l, ...a] : a), n == null || n(a), e.target.value = "";
-  }, j = (e) => {
-    const d = c.filter((a) => a.file.name !== e);
-    D(d), n == null || n(d);
-  }, E = (e) => (e / 1024).toFixed(2) + " KB", R = (e) => {
-    var d, a;
-    e.preventDefault(), (d = g.current) == null || d.classList.add(r.active), (a = i.onDragOver) == null || a.call(i, e);
-  }, b = (e) => {
-    var d, a;
-    e.preventDefault(), (d = g.current) == null || d.classList.remove(r.active), (a = i.onDragLeave) == null || a.call(i, e);
-  }, P = (e) => {
-    var l, o;
+    const i = Array.from(e.target.files), r = y(i);
+    v ? t == null || t(r) : (x((o) => D ? [...o, ...r] : r), D ? t == null || t([...A, ...r]) : t == null || t(r)), e.target.value = "";
+  }, Q = (e) => {
+    if (!v) {
+      const i = A.filter((r) => r.file.name !== e);
+      x(i);
+    }
+    N == null || N(e);
+  }, V = (e) => {
+    var i, r;
+    u() || (e.preventDefault(), (i = h.current) == null || i.classList.add(a.active), (r = s.onDragOver) == null || r.call(s, e));
+  }, W = (e) => {
+    var i, r;
+    e.preventDefault(), (i = h.current) == null || i.classList.remove(a.active), (r = s.onDragLeave) == null || r.call(s, e);
+  }, Z = (e) => {
+    var o, _;
+    if (u()) return;
     e.preventDefault();
-    const d = Array.from(e.dataTransfer.files), a = L(d);
-    D((v) => N ? [...v, ...a] : a), n == null || n(a), e.dataTransfer.clearData(), (l = g.current) == null || l.classList.remove(r.active), (o = i.onDrop) == null || o.call(i, e);
+    const i = Array.from(e.dataTransfer.files), r = y(i);
+    v ? t == null || t(r) : (x((L) => D ? [...L, ...r] : r), D ? t == null || t([...A, ...r]) : t == null || t(r)), e.dataTransfer.clearData(), (o = h.current) == null || o.classList.remove(a.active), (_ = s.onDrop) == null || _.call(s, e);
   };
-  return /* @__PURE__ */ s("div", { className: Q(r["drag-and-drop-container"], f && r.disabled, q), ...i, children: [
-    A && /* @__PURE__ */ s("label", { htmlFor: x, children: [
-      A,
-      O && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: r.required, children: "*" })
+  return /* @__PURE__ */ l("div", { className: R(a["drag-and-drop-container"], u() && a.disabled, P), ...s, children: [
+    k && /* @__PURE__ */ l("label", { htmlFor: B, children: [
+      k,
+      E && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: a.required, children: "*" })
     ] }),
-    /* @__PURE__ */ s("div", { ref: g, className: r["drag-and-drop-space"], onDragOver: R, onDragLeave: b, onDrop: P, ...i, children: [
-      /* @__PURE__ */ t(F, { type: "secondary", variant: "default", size: "sm", disabled: f, onClick: T, children: m === "single" ? "Browse file" : "Browse files" }),
-      /* @__PURE__ */ t("input", { id: x, ref: y, type: "file", style: {
+    /* @__PURE__ */ l("div", { ref: h, className: a["drag-and-drop-space"], onDragOver: V, onDragLeave: W, onDrop: Z, ...s, children: [
+      /* @__PURE__ */ n(j, { type: "secondary", variant: "default", size: "sm", disabled: u(), onClick: $, children: c === "single" ? "Browse file" : "Browse files" }),
+      /* @__PURE__ */ n("input", { id: B, ref: O, type: "file", style: {
         display: "none"
-      }, multiple: m === "multiple", accept: w, onChange: M }),
-      /* @__PURE__ */ s("div", { className: r["drag-and-drop-space-text"], children: [
-        /* @__PURE__ */ t("span", { className: r["drag-and-drop-space-text-message"], children: m === "single" ? "or drag your file" : "or drag multiple files" }),
-        /* @__PURE__ */ s("span", { className: r["drag-and-drop-space-text-constraints"], children: [
+      }, multiple: c === "multiple", accept: Y, onChange: H }),
+      /* @__PURE__ */ l("div", { className: a["drag-and-drop-space-text"], children: [
+        /* @__PURE__ */ n("span", { className: a["drag-and-drop-space-text-message"], children: c === "single" ? "or drag your file" : "or drag multiple files" }),
+        /* @__PURE__ */ l("span", { className: a["drag-and-drop-space-text-constraints"], children: [
           " ",
-          z,
+          C,
           " ",
-          m === "single" ? "file" : "files",
+          c === "single" ? "file" : "files",
           " ",
-          C
+          I
         ] })
       ] })
     ] }),
-    (c == null ? void 0 : c.length) > 0 && /* @__PURE__ */ t("ul", { className: r["drag-and-drop-files-list"], children: c == null ? void 0 : c.map((e, d) => /* @__PURE__ */ t("li", { className: r["drag-and-drop-files-list-item"], children: /* @__PURE__ */ s("div", { className: r["drag-and-drop-files-list-item-content"], children: [
-      /* @__PURE__ */ t("span", { className: r["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ t(I, { icon: "ap-icon-document", className: r["drag-and-drop-files-list-item-icon"] }) }),
-      /* @__PURE__ */ s("div", { className: r["drag-and-drop-files-list-item-content-data"], children: [
-        /* @__PURE__ */ s("div", { className: r["drag-and-drop-files-list-item-text"], children: [
-          /* @__PURE__ */ t("span", { className: r["drag-and-drop-files-list-item-name"], children: e.file.name }),
-          /* @__PURE__ */ t("span", { className: r["drag-and-drop-files-list-item-size"], children: E(e.file.size) }),
-          e.error && /* @__PURE__ */ s("span", { className: r["drag-and-drop-files-list-item-error"], children: [
-            /* @__PURE__ */ t(I, { icon: "ap-icon-alert", className: r["drag-and-drop-files-list-item-icon-error"] }),
+    (d == null ? void 0 : d.length) > 0 && /* @__PURE__ */ n("ul", { className: a["drag-and-drop-files-list"], children: d == null ? void 0 : d.map((e, i) => /* @__PURE__ */ n("li", { className: a["drag-and-drop-files-list-item"], children: /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-content"], children: [
+      /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-icon-container"], children: /* @__PURE__ */ n(q, { icon: "ap-icon-document", className: a["drag-and-drop-files-list-item-icon"] }) }),
+      /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-content-data"], children: [
+        /* @__PURE__ */ l("div", { className: a["drag-and-drop-files-list-item-text"], children: [
+          /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-name"], children: e.file.name }),
+          /* @__PURE__ */ n("span", { className: a["drag-and-drop-files-list-item-size"], children: S(e.file.size) }),
+          e.error && /* @__PURE__ */ l("span", { className: a["drag-and-drop-files-list-item-error"], children: [
+            /* @__PURE__ */ n(q, { icon: "ap-icon-alert", className: a["drag-and-drop-files-list-item-icon-error"] }),
             e.error
           ] })
         ] }),
-        /* @__PURE__ */ t(F, { type: "tertiary", variant: "default", size: "sm", onClick: () => j(e.file.name), icon: "ap-icon-delete" })
+        /* @__PURE__ */ n(j, { type: "tertiary", variant: "default", size: "sm", onClick: () => Q(e.file.name), icon: "ap-icon-delete", iconClassName: a["drag-and-drop-files-list-item-icon-delete"] })
       ] })
-    ] }) }, d)) })
+    ] }) }, i)) })
   ] });
 }
 export {
-  ee as default
+  ne as default
 };

package/dist/components/Dropdown/Dropdown.d.ts

@@ -35,6 +35,11 @@ type DropdownProps = {
     hideSelectedItems?: boolean;
     labelTooltip?: LabelTooltipProps;
     isTagsFields?: boolean;
+    unselect?: boolean;
+    selectedOptionLabel?: string;
+    selectedOptionsLabel?: string;
+    allOptionsSelectedLabel?: string;
+    caseSensitive?: boolean;
 } & DataAttributes & InteractiveEventHandlers;
 /**
  * A flexible dropdown component that supports single and multi-select functionality with search, categorization, and keyboard navigation.
@@ -64,7 +69,9 @@ type DropdownProps = {
  * @param {boolean} [props.hideSelectedItems] - Whether to hide the selected items in the dropdown trigger (defaults to false)
  * @param {LabelTooltipProps} [props.labelTooltip] - Tooltip to display next to the label
  * @param {boolean} [props.isTagsFields] - Whether to use creatable-style UI without creation functionality (defaults to false)
+ * @param {boolean} [props.unselect] - Whether single select dropdown allows deselection of selected items (defaults to false)
+ * @param {boolean} [props.caseSensitive] - Whether to perform case-sensitive matching when checking for existing options in creatable mode (defaults to false)
  * @returns {JSX.Element} The rendered Dropdown component
  */
-export default function Dropdown({ className, label, options, value, placeholder, disabled, required, searchable, searchPlaceholder, errorMessage, helpText, helpLink, helpLinkText, onChange, onSearch, multiSelect, grouped, align, onToggleChange, toggleLabel, isCreatable, dropdownTriggerClassName, dropdownMenuClassName, hideSelectedItems, labelTooltip, isTagsFields, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default function Dropdown({ className, label, options, value, placeholder, disabled, required, searchable, searchPlaceholder, errorMessage, helpText, helpLink, helpLinkText, onChange, onSearch, multiSelect, grouped, align, onToggleChange, toggleLabel, isCreatable, dropdownTriggerClassName, dropdownMenuClassName, hideSelectedItems, labelTooltip, isTagsFields, unselect, selectedOptionLabel, selectedOptionsLabel, allOptionsSelectedLabel, caseSensitive, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};