@dragunio/fe-libs 0.1.7 → 0.1.9

package/dist/index.js

@@ -32,14 +32,25 @@ __export(index_exports, {
   CurrencyInput: () => CurrencyInput,
   DateTimePicker: () => DateTimePicker,
   Drawer: () => Drawer,
+  DrawerWidths: () => DrawerWidths,
+  EmailInput: () => EmailInput,
   ExpandableSection: () => ExpandableSection,
+  EyeIcon: () => EyeIcon,
+  EyeOffIcon: () => EyeOffIcon,
+  FILE_UPLOAD_ACCEPTS: () => FILE_UPLOAD_ACCEPTS,
+  FilePreview: () => FilePreview,
+  FileUpload: () => FileUpload,
   Loading: () => Loading,
+  MailboxIcon: () => MailboxIcon,
   Message: () => Message,
   Modal: () => Modal,
   MoreHorizontalIcon: () => MoreHorizontalIcon,
   MoreVerticalIcon: () => MoreVerticalIcon,
   NumberInput: () => NumberInput,
   Pagination: () => Pagination,
+  PasswordInput: () => PasswordInput,
+  PhoneIcon: () => PhoneIcon,
+  PhoneNumberInput: () => PhoneNumberInput,
   PlusIcon: () => PlusIcon,
   ProgressBar: () => ProgressBar,
   RadioButton: () => RadioButton,
@@ -59,6 +70,7 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
+  Tabs: () => Tabs,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
   Toggle: () => Toggle,
@@ -70,7 +82,9 @@ __export(index_exports, {
   chevron_right: () => chevron_right,
   chevron_up: () => chevron_up,
   copy: () => copy,
+  formatFileSize: () => formatFileSize,
   formatNumber: () => formatNumber,
+  getFilePreviewKind: () => getFilePreviewKind,
   getIconSize: () => getIconSize,
   key: () => key,
   lock: () => lock,
@@ -78,10 +92,14 @@ __export(index_exports, {
   log_out: () => log_out,
   message: () => message,
   minus_square: () => minus_square,
+  normalizePhoneNumber: () => normalizePhoneNumber,
   plus: () => plus,
   plus_square: () => plus_square,
   search: () => search,
   trash: () => trash,
+  validateEmail: () => validateEmail,
+  validatePassword: () => validatePassword,
+  validatePhoneNumber: () => validatePhoneNumber,
   x_close: () => x_close
 });
 module.exports = __toCommonJS(index_exports);
@@ -209,16 +227,16 @@ var iconProps2 = ({ size, ...props }) => ({
   ...props
 });
 var chevron_right = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.39898 5.39898C8.73093 5.06704 9.26912 5.06704 9.60107 5.39898L15.6011 11.399C15.933 11.7309 15.933 12.2691 15.6011 12.6011L9.60107 18.6011C9.26912 18.933 8.73093 18.933 8.39898 18.6011C8.06704 18.2691 8.06704 17.7309 8.39898 17.399L13.7979 12L8.39898 6.60107C8.06704 6.26912 8.06704 5.73093 8.39898 5.39898Z", fill: props.fill }) });
 };
 var chevron_up = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.399 8.39898C11.7309 8.06704 12.2691 8.06704 12.6011 8.39898L18.6011 14.399C18.933 14.7309 18.933 15.2691 18.6011 15.6011C18.2691 15.933 17.7309 15.933 17.399 15.6011L12 10.2021L6.60107 15.6011C6.26912 15.933 5.73093 15.933 5.39898 15.6011C5.06704 15.2691 5.06704 14.7309 5.39898 14.399L11.399 8.39898Z", fill: "#101828" }) });
 };
 var chevron_left = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.6011 5.39898C15.933 5.73093 15.933 6.26912 15.6011 6.60107L10.2021 12L15.6011 17.399C15.933 17.7309 15.933 18.2691 15.6011 18.6011C15.2691 18.933 14.7309 18.933 14.399 18.6011L8.39898 12.6011C8.06704 12.2691 8.06704 11.7309 8.39898 11.399L14.399 5.39898C14.7309 5.06704 15.2691 5.06704 15.6011 5.39898Z", fill: "#101828" }) });
 };
 var chevron_down = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...iconProps2(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.39898 8.39898C5.73093 8.06704 6.26912 8.06704 6.60107 8.39898L12 13.7979L17.399 8.39898C17.7309 8.06704 18.2691 8.06704 18.6011 8.39898C18.933 8.73093 18.933 9.26912 18.6011 9.60107L12.6011 15.6011C12.2691 15.933 11.7309 15.933 11.399 15.6011L5.39898 9.60107C5.06704 9.26912 5.06704 8.73093 5.39898 8.39898Z", fill: "#101828" }) });
 };
 
 // packages/icons/src/svgItems/security.tsx
@@ -326,6 +344,82 @@ function SearchIcon(props) {
     )
   ] });
 }
+function MailboxIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "rect",
+      {
+        x: "3.5",
+        y: "5.5",
+        width: "17",
+        height: "13",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.8"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "m4.5 7 6.04 4.53a2.4 2.4 0 0 0 2.92 0L19.5 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function PhoneIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "M8.05 3.75 5.84 4.8c-.76.36-1.15 1.2-.94 2.02 1.55 6.14 6.34 10.93 12.48 12.48.82.21 1.66-.18 2.02-.94l1.05-2.21a1.5 1.5 0 0 0-.57-1.91l-2.41-1.48a1.5 1.5 0 0 0-1.8.18l-1.23 1.06a10.38 10.38 0 0 1-4.45-4.45l1.06-1.23a1.5 1.5 0 0 0 .18-1.8L9.96 4.32a1.5 1.5 0 0 0-1.91-.57Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "M2.9 12s3.1-5 9.1-5 9.1 5 9.1 5-3.1 5-9.1 5-9.1-5-9.1-5Z",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "2.4", stroke: "currentColor", strokeWidth: "1.8" })
+  ] });
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "M10.58 7.16A6.1 6.1 0 0 1 12 7c6 0 9.1 5 9.1 5a16.1 16.1 0 0 1-2.54 2.84M13.28 16.83A6.1 6.1 0 0 1 12 17c-6 0-9.1-5-9.1-5a16.1 16.1 0 0 1 2.59-2.87",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "path",
+      {
+        d: "m3.5 3.5 17 17M10.1 10.1a2.7 2.7 0 0 0 3.8 3.8",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
 
 // packages/button-bar/src/index.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -342,9 +436,23 @@ function ButtonBar({
   const rootRef = (0, import_react2.useRef)(null);
   const moreMenuId = (0, import_react2.useId)();
   const visibleCount = Math.max(0, Math.floor(maxVisible));
-  const visibleActions = actions.slice(0, visibleCount);
-  const overflowActions = actions.slice(visibleCount);
-  const hasOverflow = overflowActions.length > 0;
+  const actionCount = actions.filter(
+    (item) => item !== "|"
+  ).length;
+  const hasOverflow = actionCount > visibleCount;
+  let visibleActionEndIndex = actions.length;
+  if (hasOverflow) {
+    visibleActionEndIndex = 0;
+    let renderedActionCount = 0;
+    while (visibleActionEndIndex < actions.length && renderedActionCount < visibleCount) {
+      if (actions[visibleActionEndIndex] !== "|") renderedActionCount += 1;
+      visibleActionEndIndex += 1;
+    }
+  }
+  const visibleActions = actions.slice(0, visibleActionEndIndex).filter((item) => item !== "|");
+  const overflowItems = actions.slice(visibleActionEndIndex).filter(
+    (item, index, items) => item !== "|" || items.slice(0, index).some((candidate) => candidate !== "|") && items.slice(index + 1).some((candidate) => candidate !== "|") && items[index - 1] !== "|"
+  );
   const {
     onClick: onMoreClick,
     disabled: moreDisabled,
@@ -368,18 +476,20 @@ function ButtonBar({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [isMoreOpen]);
-  const renderAction = (action, shouldCloseMore = false) => {
-    const { id, onClick, disabled, ...buttonProps } = action;
+  const renderAction = (action, isOverflowAction = false) => {
+    const { id, className: className2, onClick, disabled, prefix, ...buttonProps } = action;
     return /* @__PURE__ */ (0, import_react3.createElement)(
       Button,
       {
         ...buttonProps,
+        className: [className2, isOverflowAction && "fe-button-bar__menu-action"].filter(Boolean).join(" ") || void 0,
         disabled,
         key: id,
         onClick: (event) => {
           onClick?.(event);
-          if (shouldCloseMore && !disabled) setIsMoreOpen(false);
-        }
+          if (isOverflowAction && !disabled) setIsMoreOpen(false);
+        },
+        prefix: isOverflowAction ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-button-bar__menu-icon", children: prefix }) : prefix
       }
     );
   };
@@ -417,7 +527,17 @@ function ButtonBar({
               className: "fe-button-bar__menu",
               id: moreMenuId,
               role: "group",
-              children: overflowActions.map((action) => renderAction(action, true))
+              children: overflowItems.map(
+                (item, index) => item === "|" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "div",
+                  {
+                    "aria-orientation": "horizontal",
+                    className: "fe-button-bar__menu-divider",
+                    role: "separator"
+                  },
+                  `divider-${index}`
+                ) : renderAction(item, true)
+              )
             }
           )
         ] })
@@ -426,12 +546,207 @@ function ButtonBar({
   );
 }
 
+// packages/tabs/src/index.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var hasPanel = (item) => Object.prototype.hasOwnProperty.call(item, "content");
+function findSelectableTab(items, value) {
+  return items.find((item) => item.id === value && !item.disabled) ?? items.find((item) => !item.disabled);
+}
+function scrollBehavior() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+}
+var Tabs = (0, import_react4.forwardRef)(function Tabs2({
+  items,
+  value,
+  defaultValue,
+  onChange,
+  variant = "tab",
+  scrollButtons = "auto",
+  previousScrollLabel = "Scroll tabs backward",
+  nextScrollLabel = "Scroll tabs forward",
+  className,
+  "aria-label": ariaLabel = "Tabs",
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const generatedId = (0, import_react4.useId)();
+  const listRef = (0, import_react4.useRef)(null);
+  const tabRefs = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react4.useState)(
+    () => findSelectableTab(items, defaultValue)?.id
+  );
+  const [scrollState, setScrollState] = (0, import_react4.useState)({
+    hasOverflow: false,
+    canScrollBackward: false,
+    canScrollForward: false
+  });
+  const activeTab = findSelectableTab(items, value ?? uncontrolledValue);
+  const activeIndex = activeTab ? items.findIndex((item) => item.id === activeTab.id) : -1;
+  (0, import_react4.useEffect)(() => {
+    if (value === void 0 && activeTab?.id !== uncontrolledValue) {
+      setUncontrolledValue(activeTab?.id);
+    }
+  }, [activeTab?.id, uncontrolledValue, value]);
+  const updateScrollState = (0, import_react4.useCallback)(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const maxScroll = Math.max(0, list.scrollWidth - list.clientWidth);
+    setScrollState({
+      hasOverflow: maxScroll > 1,
+      canScrollBackward: list.scrollLeft > 1,
+      canScrollForward: list.scrollLeft < maxScroll - 1
+    });
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const list = listRef.current;
+    if (!list) return;
+    updateScrollState();
+    list.addEventListener("scroll", updateScrollState, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(updateScrollState);
+    observer?.observe(list);
+    window.addEventListener("resize", updateScrollState);
+    return () => {
+      list.removeEventListener("scroll", updateScrollState);
+      observer?.disconnect();
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, [items, updateScrollState]);
+  (0, import_react4.useEffect)(() => {
+    const tab = activeTab ? tabRefs.current.get(activeTab.id) : void 0;
+    tab?.scrollIntoView?.({
+      behavior: scrollBehavior(),
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [activeTab?.id]);
+  const selectTab = (item, event) => {
+    if (item.disabled || item.id === activeTab?.id) return;
+    if (value === void 0) setUncontrolledValue(item.id);
+    onChange?.(item.id, item, event);
+  };
+  const selectFromKeyboard = (item, event) => {
+    const enabledItems = items.filter((candidate) => !candidate.disabled);
+    const currentIndex = enabledItems.findIndex(
+      (candidate) => candidate.id === item.id
+    );
+    if (currentIndex === -1) return;
+    let nextIndex;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      nextIndex = (currentIndex + 1) % enabledItems.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = enabledItems.length - 1;
+    }
+    if (nextIndex === void 0) return;
+    event.preventDefault();
+    const nextItem = enabledItems[nextIndex];
+    if (!nextItem) return;
+    tabRefs.current.get(nextItem.id)?.focus();
+    selectTab(nextItem, event);
+  };
+  const scrollTabs = (direction) => {
+    const list = listRef.current;
+    if (!list) return;
+    list.scrollBy({
+      left: direction * Math.max(160, Math.round(list.clientWidth * 0.75)),
+      behavior: scrollBehavior()
+    });
+  };
+  const showScrollButtons = scrollButtons === "always" || scrollButtons === "auto" && scrollState.hasOverflow;
+  const classes = ["fe-tabs", `fe-tabs--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...props, className: classes, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-tabs__navigation", children: [
+      showScrollButtons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Button,
+        {
+          "aria-label": previousScrollLabel,
+          className: "fe-tabs__scroll-button",
+          disabled: !scrollState.canScrollBackward,
+          hierarchy: "tertiary-gray",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(chevron_left, { size: 18 }),
+          iconOnly: true,
+          onClick: () => scrollTabs(-1),
+          size: "32"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-tabs__scroller", ref: listRef, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-orientation": "horizontal",
+          className: "fe-tabs__list",
+          role: "tablist",
+          children: items.map((item, index) => {
+            const selected = item.id === activeTab?.id;
+            const panelId = `${generatedId}-panel-${index}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                "aria-controls": hasPanel(item) ? panelId : void 0,
+                "aria-selected": selected,
+                className: "fe-tabs__tab",
+                disabled: item.disabled,
+                id: `${generatedId}-tab-${index}`,
+                onClick: (event) => selectTab(item, event),
+                onKeyDown: (event) => selectFromKeyboard(item, event),
+                ref: (node) => {
+                  if (node) tabRefs.current.set(item.id, node);
+                  else tabRefs.current.delete(item.id);
+                },
+                role: "tab",
+                tabIndex: selected ? 0 : -1,
+                type: "button",
+                children: item.label
+              },
+              item.id
+            );
+          })
+        }
+      ) }),
+      showScrollButtons && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        Button,
+        {
+          "aria-label": nextScrollLabel,
+          className: "fe-tabs__scroll-button",
+          disabled: !scrollState.canScrollForward,
+          hierarchy: "tertiary-gray",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(chevron_right, { size: 18 }),
+          iconOnly: true,
+          onClick: () => scrollTabs(1),
+          size: "32"
+        }
+      )
+    ] }),
+    items.map(
+      (item, index) => hasPanel(item) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          "aria-labelledby": `${generatedId}-tab-${index}`,
+          className: "fe-tabs__panel",
+          hidden: item.id !== activeTab?.id,
+          id: `${generatedId}-panel-${index}`,
+          role: "tabpanel",
+          tabIndex: 0,
+          children: item.content
+        },
+        item.id
+      ) : null
+    )
+  ] });
+});
+Tabs.displayName = "Tabs";
+
 // packages/table/src/index.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // packages/pagination/src/index.tsx
-var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
 function getItems(totalPages, page, siblingCount, boundaryCount) {
@@ -463,9 +778,9 @@ function Pagination({
   ...props
 }) {
   const safeTotalPages = Math.max(1, Math.floor(totalPages));
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react4.useState)(() => clamp(defaultPage, 1, safeTotalPages));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react5.useState)(() => clamp(defaultPage, 1, safeTotalPages));
   const currentPage = clamp(page ?? uncontrolledPage, 1, safeTotalPages);
-  const items = (0, import_react4.useMemo)(
+  const items = (0, import_react5.useMemo)(
     () => getItems(safeTotalPages, currentPage, Math.max(0, siblingCount), Math.max(0, boundaryCount)),
     [safeTotalPages, currentPage, siblingCount, boundaryCount]
   );
@@ -474,9 +789,9 @@ function Pagination({
     if (page === void 0) setUncontrolledPage(resolvedPage);
     if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
-    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
+    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Button,
       {
         className: "fe-pagination__button",
@@ -490,13 +805,13 @@ function Pagination({
       },
       item
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
   ] });
 }
 
 // packages/table/src/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var TableContext = (0, import_react5.createContext)({ striped: false });
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var TableContext = (0, import_react6.createContext)({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
 function getColumnCount(headers, data) {
@@ -505,7 +820,7 @@ function getColumnCount(headers, data) {
 function getText(value) {
   if (typeof value === "string" || typeof value === "number") return String(value);
   if (Array.isArray(value)) return value.map(getText).join("");
-  if ((0, import_react5.isValidElement)(value)) return getText(value.props.children);
+  if ((0, import_react6.isValidElement)(value)) return getText(value.props.children);
   return "";
 }
 function autoColumnSize(columnIndex, headers, data) {
@@ -541,37 +856,37 @@ function DataTable({
 }) {
   const columnCount = getColumnCount(headers, data);
   const safeMinWidth = Math.max(1, minColumnWidth);
-  const generatedSizes = (0, import_react5.useMemo)(
+  const generatedSizes = (0, import_react6.useMemo)(
     () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
     [headers, data, defaultColumnSizes, safeMinWidth]
   );
-  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react5.useState)(generatedSizes);
+  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react6.useState)(generatedSizes);
   const shouldPaginate = pagination ?? pageSize !== void 0;
   const safePageSize = Math.max(1, Math.floor(pageSize ?? 10));
   const totalPages = Math.max(1, Math.ceil(data.length / safePageSize));
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react5.useState)(() => Math.min(Math.max(1, defaultPage), totalPages));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react6.useState)(() => Math.min(Math.max(1, defaultPage), totalPages));
   const currentPage = Math.min(Math.max(1, page ?? uncontrolledPage), totalPages);
   const pagedData = shouldPaginate ? data.slice((currentPage - 1) * safePageSize, currentPage * safePageSize) : data;
-  const resizeState = (0, import_react5.useRef)();
-  const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
+  const resizeState = (0, import_react6.useRef)();
+  const [isResizing, setIsResizing] = (0, import_react6.useState)(false);
   const sizes2 = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (columnSizes) return;
     setUncontrolledSizes((currentSizes) => {
       const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
       return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
     });
   }, [columnSizes, generatedSizes]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (page === void 0 && uncontrolledPage > totalPages) setUncontrolledPage(totalPages);
   }, [page, totalPages, uncontrolledPage]);
-  const updateColumnSize = (0, import_react5.useCallback)((columnIndex, nextSize) => {
+  const updateColumnSize = (0, import_react6.useCallback)((columnIndex, nextSize) => {
     const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
     const nextSizes = sizes2.map((size, index) => index === columnIndex ? clampedSize : size);
     if (!columnSizes) setUncontrolledSizes(nextSizes);
     onColumnResize?.(nextSizes, columnIndex);
   }, [columnSizes, onColumnResize, safeMinWidth, sizes2]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onPointerMove = (event) => {
       const activeResize = resizeState.current;
       if (!activeResize) return;
@@ -595,14 +910,14 @@ function DataTable({
     if (nextPage !== currentPage) onPageChange?.(nextPage);
   };
   const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
-  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
+  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
     resolvedPaginationPosition === "top-right" && paginationControl,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("col", { style: { width: `${size}px` } }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("th", { scope: "col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("col", { style: { width: `${size}px` } }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("th", { scope: "col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "span",
           {
             className: "fe-table__resize-handle",
@@ -626,7 +941,7 @@ function DataTable({
           }
         )
       ] }, columnIndex)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
     ] }),
     resolvedPaginationPosition !== "top-right" && paginationControl
   ] });
@@ -644,33 +959,33 @@ function Table({
   paginationPosition,
   ...props
 }) {
-  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
-  const { striped } = (0, import_react5.useContext)(TableContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
+  const { striped } = (0, import_react6.useContext)(TableContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
-var import_react6 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Toggle = (0, import_react6.forwardRef)(function Toggle2({
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Toggle = (0, import_react7.forwardRef)(function Toggle2({
   color = "#16a34a",
   label,
   labelPosition = "right",
@@ -684,9 +999,9 @@ var Toggle = (0, import_react6.forwardRef)(function Toggle2({
     "--fe-toggle-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: classes, style: toggleStyle, children: [
-    label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: classes, style: toggleStyle, children: [
+    label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-toggle__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
         ref,
@@ -697,49 +1012,269 @@ var Toggle = (0, import_react6.forwardRef)(function Toggle2({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__label", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
 
 // packages/drawer/src/index.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
-  (0, import_react7.useEffect)(() => {
-    if (!open) return;
+
+// packages/overlay/src/useModalOverlay.ts
+var import_react8 = require("react");
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var overlayStack = [];
+var scrollLockCount = 0;
+var savedBodyStyles = null;
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react8.useEffect : import_react8.useLayoutEffect;
+function lockBodyScroll() {
+  if (typeof document === "undefined" || scrollLockCount++ > 0) return;
+  const { body, documentElement } = document;
+  savedBodyStyles = {
+    overflow: body.style.overflow,
+    overscrollBehavior: body.style.overscrollBehavior,
+    paddingRight: body.style.paddingRight
+  };
+  const scrollbarWidth = Math.max(
+    0,
+    window.innerWidth - documentElement.clientWidth
+  );
+  const currentPadding = Number.parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+  body.style.overflow = "hidden";
+  body.style.overscrollBehavior = "none";
+  if (scrollbarWidth > 0)
+    body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || scrollLockCount === 0) return;
+  scrollLockCount -= 1;
+  if (scrollLockCount > 0 || !savedBodyStyles) return;
+  const { body } = document;
+  body.style.overflow = savedBodyStyles.overflow;
+  body.style.overscrollBehavior = savedBodyStyles.overscrollBehavior;
+  body.style.paddingRight = savedBodyStyles.paddingRight;
+  savedBodyStyles = null;
+}
+function getFocusableElements(panel) {
+  return Array.from(
+    panel.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter(
+    (element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true"
+  );
+}
+function getTopOverlay() {
+  return overlayStack.reduce((top, candidate) => {
+    if (!top || candidate.priority > top.priority) return candidate;
+    if (candidate.priority < top.priority) return top;
+    const topNode = top.panelRef.current?.parentElement;
+    const candidateNode = candidate.panelRef.current?.parentElement;
+    if (topNode && candidateNode) {
+      const position = topNode.compareDocumentPosition(candidateNode);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) return candidate;
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) return top;
+    }
+    return candidate;
+  }, void 0);
+}
+function useModalOverlay(options) {
+  const overlayIdRef = (0, import_react8.useRef)();
+  const previouslyFocusedRef = (0, import_react8.useRef)(null);
+  const optionsRef = (0, import_react8.useRef)(options);
+  optionsRef.current = options;
+  if (!overlayIdRef.current) overlayIdRef.current = /* @__PURE__ */ Symbol("fe-overlay");
+  useIsomorphicLayoutEffect(() => {
+    if (!options.open || typeof document === "undefined") return;
+    const overlayId = overlayIdRef.current;
+    previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    overlayStack.push({
+      id: overlayId,
+      panelRef: options.panelRef,
+      priority: options.priority ?? 0
+    });
+    lockBodyScroll();
+    const focusInitialElement = () => {
+      const { initialFocusRef, panelRef } = optionsRef.current;
+      const focusTarget = initialFocusRef?.current ?? panelRef.current;
+      focusTarget?.focus();
+    };
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (!cancelled && getTopOverlay()?.id === overlayId)
+        focusInitialElement();
+    });
     const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
+      if (getTopOverlay()?.id !== overlayId) return;
+      if (event.key === "Escape") {
+        if (optionsRef.current.closeOnEscape !== false) {
+          event.preventDefault();
+          optionsRef.current.onClose();
+        }
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = optionsRef.current.panelRef.current;
+      if (!panel) return;
+      const focusable = getFocusableElements(panel);
+      if (!focusable.length) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey && (activeElement === first || !panel.contains(activeElement))) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (activeElement === last || !panel.contains(activeElement))) {
+        event.preventDefault();
+        first.focus();
+      }
     };
     document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose, open]);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      cancelled = true;
+      const stackIndex = overlayStack.findIndex(
+        (entry) => entry.id === overlayId
+      );
+      if (stackIndex !== -1) overlayStack.splice(stackIndex, 1);
+      unlockBodyScroll();
+      if (optionsRef.current.restoreFocus !== false) {
+        const nextOverlay = getTopOverlay()?.panelRef.current;
+        if (nextOverlay) nextOverlay.focus();
+        else if (previouslyFocusedRef.current?.isConnected) {
+          previouslyFocusedRef.current.focus();
+        }
+      }
+    };
+  }, [options.open, options.panelRef]);
+}
+
+// packages/drawer/src/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DrawerWidths = {
+  small: 360,
+  medium: 400,
+  large: 480
+};
+function Drawer({
+  open,
+  onClose,
+  title,
+  description,
+  footer,
+  side = "right",
+  width = DrawerWidths.medium,
+  fullScreen = false,
+  children,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  closeLabel = "Close drawer",
+  initialFocusRef,
+  restoreFocus = true,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const titleId = (0, import_react9.useId)();
+  const descriptionId = (0, import_react9.useId)();
+  const panelRef = (0, import_react9.useRef)(null);
+  useModalOverlay({
+    open,
+    onClose,
+    panelRef,
+    priority: 1e3,
+    closeOnEscape,
+    initialFocusRef,
+    restoreFocus
+  });
   if (!open || typeof document === "undefined") return null;
   const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
-    if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "fe-drawer__footer", children: footer })
-  ] }) }), document.body);
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        className: "fe-drawer-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick)
+            onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "aside",
+          {
+            ref: panelRef,
+            className: [
+              "fe-drawer",
+              `fe-drawer--${side}`,
+              fullScreen && "fe-drawer--full-screen",
+              className
+            ].filter(Boolean).join(" "),
+            style: panelStyle,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": describedBy,
+            "aria-label": ariaLabel ?? (title ? void 0 : "Drawer"),
+            tabIndex: -1,
+            ...props,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: "fe-drawer__header", children: [
+                (title || description) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fe-drawer__heading", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { id: titleId, children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: descriptionId, children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: onClose
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fe-drawer__body", children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("footer", { className: "fe-drawer__footer", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 
 // packages/tooltip/src/index.tsx
-var import_react8 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
-  const [visible, setVisible] = (0, import_react8.useState)(false);
-  const id = (0, import_react8.useId)();
-  const trigger = (0, import_react8.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const id = (0, import_react10.useId)();
+  const trigger = (0, import_react10.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
     setVisible(true);
   }, onMouseLeave: (event) => {
@@ -752,14 +1287,14 @@ function Tooltip({ content, children, placement = "top", disabled, className, ..
     children.props.onBlur?.(event);
     setVisible(false);
   } });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
     trigger,
-    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
   ] });
 }
 
 // packages/form-controls/src/controls/Field/field.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
   if (typeof error !== "boolean") return error;
@@ -776,10 +1311,10 @@ function FieldLabel({
   isRequired = false
 }) {
   if (!label) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-field__label", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, children: label }),
-    isRequired && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
-    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { content: description, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-field__label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { id, children: label }),
+    isRequired && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
+    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip, { content: description, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         className: "fe-field__info",
@@ -798,7 +1333,7 @@ function FieldMessage({
   descriptionDisplay
 }) {
   if (error !== void 0 && error !== false && error !== null)
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "span",
       {
         id,
@@ -808,13 +1343,13 @@ function FieldMessage({
       }
     );
   if (description && descriptionDisplay === "inline")
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, className: "fe-field__message", children: description });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { id, className: "fe-field__message", children: description });
   return null;
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var TextInput = (0, import_react9.forwardRef)(
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextInput = (0, import_react11.forwardRef)(
   function TextInput2({
     value,
     defaultValue = "",
@@ -844,12 +1379,12 @@ var TextInput = (0, import_react9.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react9.useId)();
+    const generatedId = (0, import_react11.useId)();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react9.useState)(defaultValue);
+    const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -870,7 +1405,7 @@ var TextInput = (0, import_react9.forwardRef)(
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: [
@@ -879,7 +1414,7 @@ var TextInput = (0, import_react9.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -889,10 +1424,10 @@ var TextInput = (0, import_react9.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__input-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-input__input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 "input",
                 {
                   ref,
@@ -914,26 +1449,26 @@ var TextInput = (0, import_react9.forwardRef)(
                   ...props
                 }
               ),
-              isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-field__required", children: "*" })
+              isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-field__required", children: "*" })
               ] })
             ] }),
-            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-input__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -949,10 +1484,257 @@ var TextInput = (0, import_react9.forwardRef)(
 );
 TextInput.displayName = "TextInput";
 
+// packages/form-controls/src/controls/EmailInput/email-input.tsx
+var import_react13 = require("react");
+
+// packages/form-controls/src/controls/ValidatedInput/validation.ts
+var import_react12 = require("react");
+var invalidValueMessage = "Invalid value.";
+function toValidationError(result) {
+  if (typeof result === "string") return result || void 0;
+  return result === false ? invalidValueMessage : void 0;
+}
+function validateEmail(value, required = false) {
+  const email = value.trim();
+  if (!email) return required ? "Email is required." : void 0;
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? void 0 : "Enter a valid email address.";
+}
+function validatePassword(value, required = false) {
+  if (!value) return required ? "Password is required." : void 0;
+  if (value.length < 8) return "Use at least 8 characters.";
+  if (!/[a-z]/.test(value) || !/[A-Z]/.test(value) || !/\d/.test(value))
+    return "Include uppercase, lowercase, and a number.";
+  return void 0;
+}
+function validatePhoneNumber(value, required = false) {
+  const phoneNumber = value.trim();
+  if (!phoneNumber) return required ? "Phone number is required." : void 0;
+  if (!/^\+?[\d() ]+$/.test(phoneNumber))
+    return "Use only numbers, spaces, parentheses, and an optional leading +.";
+  const digitCount = phoneNumber.replace(/\D/g, "").length;
+  return digitCount >= 7 && digitCount <= 15 ? void 0 : "Enter a phone number with 7 to 15 digits.";
+}
+function normalizePhoneNumber(value) {
+  return value.replace(/[^\d+() ]/g, "");
+}
+function useInputValidation({
+  error,
+  errorMessage,
+  isRequired = false,
+  required = false,
+  validate,
+  validateOn = "blur",
+  builtInValidator
+}) {
+  const [validationError, setValidationError] = (0, import_react12.useState)();
+  const [hasValidated, setHasValidated] = (0, import_react12.useState)(false);
+  const hasExternalError = error !== void 0 || errorMessage !== void 0;
+  const validateValue = (value) => {
+    const builtInError = builtInValidator(value, isRequired || required);
+    const customError = builtInError ? void 0 : toValidationError(validate?.(value));
+    const nextError = builtInError ?? customError;
+    setHasValidated(true);
+    setValidationError(nextError);
+    return nextError;
+  };
+  return {
+    error: hasExternalError ? getFieldError(error, errorMessage) : validationError,
+    onValueChange(value) {
+      if (validateOn === "change" || hasValidated) validateValue(value);
+    },
+    onBlur(value) {
+      if (validateOn === "blur") validateValue(value);
+    }
+  };
+}
+
+// packages/form-controls/src/controls/EmailInput/email-input.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var EmailInput = (0, import_react13.forwardRef)(
+  function EmailInput2({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    onBlur,
+    onValueChange,
+    autoComplete,
+    className,
+    ...props
+  }, ref) {
+    const validation = useInputValidation({
+      error,
+      errorMessage,
+      isRequired,
+      required,
+      validate,
+      validateOn,
+      builtInValidator: validateEmail
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      TextInput,
+      {
+        ...props,
+        ref,
+        className: ["fe-email-input", className].filter(Boolean).join(" "),
+        type: "email",
+        inputMode: "email",
+        autoComplete: autoComplete ?? "email",
+        isRequired,
+        required,
+        prefix: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MailboxIcon, { size: 18 }),
+        error: validation.error,
+        onValueChange: (value) => {
+          validation.onValueChange(value);
+          onValueChange?.(value);
+        },
+        onBlur: (event) => {
+          validation.onBlur(event.currentTarget.value);
+          onBlur?.(event);
+        }
+      }
+    );
+  }
+);
+EmailInput.displayName = "EmailInput";
+
+// packages/form-controls/src/controls/PasswordInput/password-input.tsx
+var import_react14 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react14.forwardRef)(
+  function PasswordInput2({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    onBlur,
+    onValueChange,
+    autoComplete,
+    className,
+    showPasswordLabel = "Show password",
+    hidePasswordLabel = "Hide password",
+    ...props
+  }, ref) {
+    const [visible, setVisible] = (0, import_react14.useState)(false);
+    const validation = useInputValidation({
+      error,
+      errorMessage,
+      isRequired,
+      required,
+      validate,
+      validateOn,
+      builtInValidator: validatePassword
+    });
+    const toggleLabel = visible ? hidePasswordLabel : showPasswordLabel;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      TextInput,
+      {
+        ...props,
+        ref,
+        className: ["fe-password-input", className].filter(Boolean).join(" "),
+        type: visible ? "text" : "password",
+        autoComplete: autoComplete ?? "current-password",
+        isRequired,
+        required,
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Button,
+          {
+            hierarchy: "tertiary-gray",
+            size: "24",
+            iconOnly: true,
+            icon: visible ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeOffIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(EyeIcon, { size: 16 }),
+            "aria-label": toggleLabel,
+            "aria-pressed": visible,
+            className: "fe-password-input__toggle",
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => setVisible((previous) => !previous)
+          }
+        ),
+        error: validation.error,
+        onValueChange: (value) => {
+          validation.onValueChange(value);
+          onValueChange?.(value);
+        },
+        onBlur: (event) => {
+          validation.onBlur(event.currentTarget.value);
+          onBlur?.(event);
+        }
+      }
+    );
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+
+// packages/form-controls/src/controls/PhoneNumberInput/phone-number-input.tsx
+var import_react15 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var PhoneNumberInput = (0, import_react15.forwardRef)(function PhoneNumberInput2({
+  value,
+  defaultValue = "",
+  error,
+  errorMessage,
+  isRequired,
+  required,
+  validate,
+  validateOn,
+  onBlur,
+  onValueChange,
+  autoComplete,
+  className,
+  ...props
+}, ref) {
+  const controlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.useState)(
+    () => normalizePhoneNumber(defaultValue)
+  );
+  const currentValue = controlled ? value : uncontrolledValue;
+  const validation = useInputValidation({
+    error,
+    errorMessage,
+    isRequired,
+    required,
+    validate,
+    validateOn,
+    builtInValidator: validatePhoneNumber
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    TextInput,
+    {
+      ...props,
+      ref,
+      className: ["fe-phone-number-input", className].filter(Boolean).join(" "),
+      type: "tel",
+      inputMode: "tel",
+      autoComplete: autoComplete ?? "tel",
+      value: currentValue,
+      isRequired,
+      required,
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PhoneIcon, { size: 18 }),
+      error: validation.error,
+      onValueChange: (nextValue) => {
+        const normalizedValue = normalizePhoneNumber(nextValue);
+        if (!controlled) setUncontrolledValue(normalizedValue);
+        validation.onValueChange(normalizedValue);
+        onValueChange?.(normalizedValue);
+      },
+      onBlur: (event) => {
+        const normalizedValue = normalizePhoneNumber(event.currentTarget.value);
+        validation.onBlur(normalizedValue);
+        onBlur?.(event);
+      }
+    }
+  );
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
+
 // packages/form-controls/src/controls/TextArea/text-area.tsx
-var import_react10 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var TextArea = (0, import_react10.forwardRef)(
+var import_react16 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TextArea = (0, import_react16.forwardRef)(
   function TextArea2({
     value,
     defaultValue = "",
@@ -979,13 +1761,13 @@ var TextArea = (0, import_react10.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react10.useId)();
+    const generatedId = (0, import_react16.useId)();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react10.useState)(defaultValue);
-    const textareaRef = (0, import_react10.useRef)(null);
+    const [internalValue, setInternalValue] = (0, import_react16.useState)(defaultValue);
+    const textareaRef = (0, import_react16.useRef)(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -1003,8 +1785,8 @@ var TextArea = (0, import_react10.forwardRef)(
       textarea.style.height = "auto";
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
-    (0, import_react10.useImperativeHandle)(ref, () => textareaRef.current, []);
-    (0, import_react10.useLayoutEffect)(() => {
+    (0, import_react16.useImperativeHandle)(ref, () => textareaRef.current, []);
+    (0, import_react16.useLayoutEffect)(() => {
       if (autosize && textareaRef.current) {
         resizeToContent(textareaRef.current);
       }
@@ -1014,7 +1796,7 @@ var TextArea = (0, import_react10.forwardRef)(
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         className: [
@@ -1024,7 +1806,7 @@ var TextArea = (0, import_react10.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -1034,8 +1816,8 @@ var TextArea = (0, import_react10.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-area__control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fe-text-area__control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "textarea",
               {
                 ref: textareaRef,
@@ -1058,24 +1840,24 @@ var TextArea = (0, import_react10.forwardRef)(
                 ...props
               }
             ),
-            isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-field__required", children: "*" })
+            isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-field__required", children: "*" })
             ] }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-area__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -1092,10 +1874,25 @@ var TextArea = (0, import_react10.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // packages/form-controls/src/controls/Selection/selection.tsx
-var import_react11 = require("react");
+var import_react17 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Selection = (0, import_react11.forwardRef)(
+
+// packages/overlay/src/getPortalZIndex.ts
+var DEFAULT_PORTAL_Z_INDEX = 1e3;
+function getPortalZIndex(anchor) {
+  if (!anchor || typeof window === "undefined") return DEFAULT_PORTAL_Z_INDEX;
+  let highestAncestorZIndex = DEFAULT_PORTAL_Z_INDEX - 1;
+  for (let element = anchor; element; element = element.parentElement) {
+    const zIndex = Number.parseInt(window.getComputedStyle(element).zIndex, 10);
+    if (Number.isFinite(zIndex))
+      highestAncestorZIndex = Math.max(highestAncestorZIndex, zIndex);
+  }
+  return Math.max(DEFAULT_PORTAL_Z_INDEX, highestAncestorZIndex + 1);
+}
+
+// packages/form-controls/src/controls/Selection/selection.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Selection = (0, import_react17.forwardRef)(
   function Selection2({
     className,
     label,
@@ -1124,7 +1921,7 @@ var Selection = (0, import_react11.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react11.useId)();
+    const generatedId = (0, import_react17.useId)();
     const triggerId = id ?? generatedId + "-trigger";
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
@@ -1142,7 +1939,7 @@ var Selection = (0, import_react11.forwardRef)(
       label ? labelId : void 0
     );
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react11.useState)(
+    const [internalValue, setInternalValue] = (0, import_react17.useState)(
       defaultValue ?? (multiple ? [] : "")
     );
     const selectedValue = isControlled ? value : internalValue;
@@ -1150,13 +1947,13 @@ var Selection = (0, import_react11.forwardRef)(
     const selectedOptions = options.filter(
       (option) => selectedValues.some((item) => String(item) === String(option.value))
     );
-    const [open, setOpen] = (0, import_react11.useState)(false);
-    const [query, setQuery] = (0, import_react11.useState)("");
-    const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
-    const rootRef = (0, import_react11.useRef)(null);
-    const menuRef = (0, import_react11.useRef)(null);
-    const [menuPosition, setMenuPosition] = (0, import_react11.useState)(null);
-    (0, import_react11.useEffect)(() => {
+    const [open, setOpen] = (0, import_react17.useState)(false);
+    const [query, setQuery] = (0, import_react17.useState)("");
+    const [activeIndex, setActiveIndex] = (0, import_react17.useState)(0);
+    const rootRef = (0, import_react17.useRef)(null);
+    const menuRef = (0, import_react17.useRef)(null);
+    const [menuPosition, setMenuPosition] = (0, import_react17.useState)(null);
+    (0, import_react17.useEffect)(() => {
       const close = (event) => {
         const target = event.target;
         if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target))
@@ -1165,7 +1962,7 @@ var Selection = (0, import_react11.forwardRef)(
       document.addEventListener("mousedown", close);
       return () => document.removeEventListener("mousedown", close);
     }, []);
-    (0, import_react11.useLayoutEffect)(() => {
+    (0, import_react17.useLayoutEffect)(() => {
       if (!open) return;
       const updateMenuPosition = () => {
         const rect = rootRef.current?.getBoundingClientRect();
@@ -1173,7 +1970,8 @@ var Selection = (0, import_react11.forwardRef)(
           setMenuPosition({
             top: rect.bottom + 7,
             left: rect.left,
-            width: rect.width
+            width: rect.width,
+            zIndex: getPortalZIndex(rootRef.current)
           });
       };
       updateMenuPosition();
@@ -1242,7 +2040,7 @@ var Selection = (0, import_react11.forwardRef)(
       }
       if (event.key === "Escape") setOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "div",
       {
         ref,
@@ -1257,7 +2055,7 @@ var Selection = (0, import_react11.forwardRef)(
         ].filter(Boolean).join(" "),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -1267,8 +2065,8 @@ var Selection = (0, import_react11.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
-            name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
+            name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "input",
               {
                 type: "hidden",
@@ -1277,7 +2075,7 @@ var Selection = (0, import_react11.forwardRef)(
               },
               String(item)
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -1295,7 +2093,7 @@ var Selection = (0, import_react11.forwardRef)(
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                     "span",
                     {
                       className: [
@@ -1303,30 +2101,30 @@ var Selection = (0, import_react11.forwardRef)(
                         !selectedOptions.length && "is-placeholder",
                         tag && selectedOptions.length > 1 && "is-tags"
                       ].filter(Boolean).join(" "),
-                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                         "span",
                         {
                           className: "fe-selection__tag",
                           children: [
                             option.label,
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
                         item,
                         index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
-                        isRequired && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: placeholder }),
+                        isRequired && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
                 ]
               }
             ),
-            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "button",
               {
                 type: "button",
@@ -1336,7 +2134,7 @@ var Selection = (0, import_react11.forwardRef)(
               }
             ),
             open && menuPosition && (0, import_react_dom2.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                 "div",
                 {
                   ref: menuRef,
@@ -1346,14 +2144,15 @@ var Selection = (0, import_react11.forwardRef)(
                     position: "fixed",
                     top: menuPosition.top,
                     left: menuPosition.left,
-                    width: menuPosition.width
+                    width: menuPosition.width,
+                    zIndex: menuPosition.zIndex
                   },
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
                   children: [
-                    searchable && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fe-selection__search", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    searchable && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fe-selection__search", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                         "input",
                         {
                           autoFocus: true,
@@ -1367,11 +2166,11 @@ var Selection = (0, import_react11.forwardRef)(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
                       const isSelected = selectedValues.some(
                         (item) => String(item) === String(option.value)
                       );
-                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -1385,8 +2184,8 @@ var Selection = (0, import_react11.forwardRef)(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: option.label }),
-                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: option.label }),
+                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                               "span",
                               {
                                 className: "fe-selection__check",
@@ -1398,14 +2197,14 @@ var Selection = (0, import_react11.forwardRef)(
                         },
                         String(option.value)
                       );
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
+                    }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
                   ]
                 }
               ),
               document.body
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -1422,8 +2221,8 @@ var Selection = (0, import_react11.forwardRef)(
 Selection.displayName = "Selection";
 
 // packages/form-controls/src/controls/NumberInput/number-input.tsx
-var import_react12 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
@@ -1480,7 +2279,7 @@ function normalizeNumberInput(raw, options) {
     value
   };
 }
-var NumberInput = (0, import_react12.forwardRef)(
+var NumberInput = (0, import_react18.forwardRef)(
   function NumberInput2({
     value,
     defaultValue = null,
@@ -1517,14 +2316,14 @@ var NumberInput = (0, import_react12.forwardRef)(
     onKeyDown,
     ...props
   }, ref) {
-    const inputRef = (0, import_react12.useRef)(null);
-    const generatedId = (0, import_react12.useId)();
+    const inputRef = (0, import_react18.useRef)(null);
+    const generatedId = (0, import_react18.useId)();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react12.useState)(defaultValue);
-    const [focused, setFocused] = (0, import_react12.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react18.useState)(defaultValue);
+    const [focused, setFocused] = (0, import_react18.useState)(false);
     const actualValue = isControlled ? value ?? null : internalValue;
-    const [text, setText] = (0, import_react12.useState)(
+    const [text, setText] = (0, import_react18.useState)(
       actualValue === null ? "" : formatNumber(
         actualValue,
         decimals,
@@ -1547,7 +2346,7 @@ var NumberInput = (0, import_react12.forwardRef)(
     );
     const resolvedPrefix = prefix ?? Prefix;
     const resolvedSuffix = suffix ?? Suffix;
-    (0, import_react12.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (!focused)
         setText(
           actualValue === null ? "" : formatNumber(
@@ -1601,7 +2400,7 @@ var NumberInput = (0, import_react12.forwardRef)(
     const stepIsUsable = Number.isFinite(step) && step > 0;
     const disableIncrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || max !== void 0 && actualValue !== null && actualValue >= max;
     const disableDecrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || min !== void 0 && actualValue !== null && actualValue <= min;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         className: [
@@ -1610,7 +2409,7 @@ var NumberInput = (0, import_react12.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -1620,10 +2419,10 @@ var NumberInput = (0, import_react12.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__input-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "fe-number-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "fe-number-input__input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "input",
                 {
                   ref: (node) => {
@@ -1659,41 +2458,41 @@ var NumberInput = (0, import_react12.forwardRef)(
                   "aria-describedby": describedBy
                 }
               ),
-              isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "span",
                 {
                   className: "fe-number-input__placeholder",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: placeholder }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-field__required", children: "*" })
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-field__required", children: "*" })
                   ]
                 }
               )
             ] }),
-            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
             endAdornment,
-            showStepper && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__stepper", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "fe-number-input__stepper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronUpIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronUpIcon, { size: 12 }),
                   "aria-label": incrementLabel,
                   disabled: disableIncrement,
                   onMouseDown: (event) => event.preventDefault(),
                   onClick: () => adjustValue(1)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronDownIcon, { size: 12 }),
                   "aria-label": decrementLabel,
                   disabled: disableDecrement,
                   onMouseDown: (event) => event.preventDefault(),
@@ -1702,7 +2501,7 @@ var NumberInput = (0, import_react12.forwardRef)(
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -1719,8 +2518,8 @@ var NumberInput = (0, import_react12.forwardRef)(
 NumberInput.displayName = "NumberInput";
 
 // packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
-var import_react13 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function CurrencyInput({
   suffix = "VND",
   currencies,
@@ -1731,13 +2530,13 @@ function CurrencyInput({
   disabled,
   ...props
 }) {
-  const [internalCurrency, setInternalCurrency] = (0, import_react13.useState)(
+  const [internalCurrency, setInternalCurrency] = (0, import_react19.useState)(
     defaultCurrency ?? currencies?.[0]?.code ?? ""
   );
   const selectedCurrency = currency ?? internalCurrency;
   const current = currencies?.find((item) => item.code === selectedCurrency);
   const currencySuffix = current?.suffix ?? current?.code ?? suffix;
-  const endAdornment = currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  const endAdornment = currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Selection,
     {
       className: "fe-currency-input__currency",
@@ -1756,8 +2555,8 @@ function CurrencyInput({
         onCurrencyChange?.(next);
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     NumberInput,
     {
       ...props,
@@ -1769,8 +2568,8 @@ function CurrencyInput({
 }
 
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
-var import_react14 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -1806,7 +2605,7 @@ function DateTimePicker(props) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
-  const generatedId = (0, import_react14.useId)();
+  const generatedId = (0, import_react20.useId)();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
   const messageId2 = generatedId + "-message";
@@ -1824,28 +2623,28 @@ function DateTimePicker(props) {
   );
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = (0, import_react14.useState)(
+  const [singleInternal, setSingleInternal] = (0, import_react20.useState)(
     (!isRange ? props.defaultValue : null) ?? null
   );
-  const [rangeInternal, setRangeInternal] = (0, import_react14.useState)(
+  const [rangeInternal, setRangeInternal] = (0, import_react20.useState)(
     (isRange ? props.defaultValue : void 0) ?? [null, null]
   );
   const singleValue = !isRange ? props.value ?? singleInternal : null;
   const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
-  const [open, setOpen] = (0, import_react14.useState)(false);
-  const [month, setMonth] = (0, import_react14.useState)(
+  const [open, setOpen] = (0, import_react20.useState)(false);
+  const [month, setMonth] = (0, import_react20.useState)(
     () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
   );
-  const [editingEnd, setEditingEnd] = (0, import_react14.useState)(false);
-  const rootRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [editingEnd, setEditingEnd] = (0, import_react20.useState)(false);
+  const rootRef = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const setSingle = (next) => {
@@ -1901,7 +2700,7 @@ function DateTimePicker(props) {
       setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -1911,7 +2710,7 @@ function DateTimePicker(props) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           FieldLabel,
           {
             id: labelId,
@@ -1921,7 +2720,7 @@ function DateTimePicker(props) {
             isRequired
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "button",
           {
             id: triggerId,
@@ -1935,29 +2734,29 @@ function DateTimePicker(props) {
             "aria-expanded": open,
             onClick: () => setOpen((current) => !current),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "span",
                 {
                   className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
                   children: [
                     shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
-                    isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                    isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "fe-datetime-picker__popper",
             role: "dialog",
             "aria-label": "Date and time picker",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-datetime-picker__month", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-datetime-picker__month", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1968,11 +2767,11 @@ function DateTimePicker(props) {
                     children: "\u2039"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: month.toLocaleDateString(locale, {
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: month.toLocaleDateString(locale, {
                   month: "long",
                   year: "numeric"
                 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1984,12 +2783,12 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: day }, day)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: day }, day)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
                 const inMonth = day.getMonth() === month.getMonth();
                 const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
                 const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
-                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2004,8 +2803,8 @@ function DateTimePicker(props) {
                   day.toISOString()
                 );
               }) }),
-              isRange && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              isRange && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2014,7 +2813,7 @@ function DateTimePicker(props) {
                     children: "Start"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2024,9 +2823,9 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "fe-datetime-picker__time", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("label", { className: "fe-datetime-picker__time", children: [
                 "Time",
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "input",
                   {
                     type: "time",
@@ -2039,7 +2838,7 @@ function DateTimePicker(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           FieldMessage,
           {
             id: messageId2,
@@ -2054,9 +2853,9 @@ function DateTimePicker(props) {
 }
 
 // packages/form-controls/src/controls/Checkbox/checkbox.tsx
-var import_react15 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Checkbox = (0, import_react15.forwardRef)(
+var import_react21 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Checkbox = (0, import_react21.forwardRef)(
   function Checkbox2({
     label,
     labelPosition = "right",
@@ -2072,10 +2871,10 @@ var Checkbox = (0, import_react15.forwardRef)(
       disabled && "fe-checkbox--disabled",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__label", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fe-checkbox__content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-checkbox__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "fe-checkbox__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "input",
           {
             ref,
@@ -2086,8 +2885,8 @@ var Checkbox = (0, import_react15.forwardRef)(
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-checkbox__label", children: label })
       ] })
     ] });
   }
@@ -2095,9 +2894,9 @@ var Checkbox = (0, import_react15.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // packages/form-controls/src/controls/RadioButton/radio-button.tsx
-var import_react16 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var RadioButton = (0, import_react16.forwardRef)(
+var import_react22 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var RadioButton = (0, import_react22.forwardRef)(
   function RadioButton2({
     label,
     labelPosition = "right",
@@ -2113,10 +2912,10 @@ var RadioButton = (0, import_react16.forwardRef)(
       disabled && "fe-radio-button--disabled",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__label", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "fe-radio-button__content", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-radio-button__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "fe-radio-button__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             ref,
@@ -2127,8 +2926,8 @@ var RadioButton = (0, import_react16.forwardRef)(
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-radio-button__label", children: label })
       ] })
     ] });
   }
@@ -2136,9 +2935,9 @@ var RadioButton = (0, import_react16.forwardRef)(
 RadioButton.displayName = "RadioButton";
 
 // packages/form-controls/src/controls/RadioGroup/radio-group.tsx
-var import_react17 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var RadioGroup = (0, import_react17.forwardRef)(
+var import_react23 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react23.forwardRef)(
   function RadioGroup2({
     label,
     labelPosition = "top",
@@ -2156,7 +2955,7 @@ var RadioGroup = (0, import_react17.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react17.useId)();
+    const generatedId = (0, import_react23.useId)();
     const groupName = name ?? `fe-radio-group-${generatedId}`;
     const labelId = `${id ?? generatedId}-label`;
     const isControlled = value !== void 0;
@@ -2170,12 +2969,12 @@ var RadioGroup = (0, import_react17.forwardRef)(
     const handleChange = (option, event) => {
       if (event.target.checked) onChange?.(option.value, option, event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: classes, ...props, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: classes, ...props, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "div",
         {
           id,
@@ -2187,7 +2986,7 @@ var RadioGroup = (0, import_react17.forwardRef)(
           children: options.map((option) => {
             const optionDisabled = disabled || option.disabled;
             const optionValue = String(option.value);
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               RadioButton,
               {
                 name: groupName,
@@ -2204,9 +3003,9 @@ var RadioGroup = (0, import_react17.forwardRef)(
           })
         }
       ),
-      label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+      label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] })
     ] });
   }
@@ -2214,29 +3013,29 @@ var RadioGroup = (0, import_react17.forwardRef)(
 RadioGroup.displayName = "RadioGroup";
 
 // packages/expandable-section/src/index.tsx
-var import_react18 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react18.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react24.useState)(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = (0, import_react18.useId)();
+  const id = (0, import_react24.useId)();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -2249,15 +3048,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var pixels = (value) => typeof value === "number" ? `${value}px` : value;
 function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
   const resolvedVariant = shape ?? variant;
@@ -2268,7 +3067,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -2280,16 +3079,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -2299,9 +3098,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-var import_react19 = require("react");
+var import_react25 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Modal({
   open,
   onClose,
@@ -2312,60 +3111,87 @@ function Modal({
   actions = [],
   size = "medium",
   closeOnBackdropClick = true,
+  closeOnEscape = true,
   closeButton = true,
   closeLabel = "Close modal",
+  initialFocusRef,
+  restoreFocus = true,
   className,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }) {
-  const titleId = (0, import_react19.useId)();
-  const panelRef = (0, import_react19.useRef)(null);
-  (0, import_react19.useEffect)(() => {
-    if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    panelRef.current?.focus();
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose, open]);
+  const titleId = (0, import_react25.useId)();
+  const descriptionId = (0, import_react25.useId)();
+  const panelRef = (0, import_react25.useRef)(null);
+  useModalOverlay({
+    open,
+    onClose,
+    panelRef,
+    priority: 1100,
+    closeOnEscape,
+    initialFocusRef,
+    restoreFocus
+  });
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
-      if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
-        ref: panelRef,
-        className: ["fe-modal", `fe-modal--${size}`, className].filter(Boolean).join(" "),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": title ? titleId : void 0,
-        "aria-label": title ? void 0 : "Modal",
-        tabIndex: -1,
-        ...props,
-        children: [
-          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: description })
-            ] }),
-            closeButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { ...action, children: label }, index)) })
-          ] })
-        ]
+        className: "fe-modal-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick)
+            onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "div",
+          {
+            ref: panelRef,
+            className: ["fe-modal", `fe-modal--${size}`, className].filter(Boolean).join(" "),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": describedBy,
+            "aria-label": ariaLabel ?? (title ? void 0 : "Modal"),
+            tabIndex: -1,
+            ...props,
+            children: [
+              (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("header", { className: "fe-modal__header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fe-modal__heading", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { id: titleId, children: title }),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { id: descriptionId, children: description })
+                ] }),
+                closeButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: onClose
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fe-modal__body", children }),
+              hasFooter && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("footer", { className: "fe-modal__footer", children: [
+                footer && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
+                actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { ...action, children: label }, index)) })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
+    ),
     document.body
   );
 }
 
 // packages/progress/src/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
   const indeterminate = value === null || value === void 0;
   const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -2375,17 +3201,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
-    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("output", { className: "fe-progress__value", children: visibleValue })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
 function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
   const usesCustomColor = Boolean(color);
@@ -2394,16 +3220,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-var import_react20 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -2436,22 +3262,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = (0, import_react20.useState)(entries);
-  (0, import_react20.useEffect)(() => {
+  const [visibleEntries, setVisibleEntries] = (0, import_react26.useState)(entries);
+  (0, import_react26.useEffect)(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fe-message__content", children: entry.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -2465,8 +3291,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-var import_react21 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react27 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Snackbar({
   open,
   message: message2,
@@ -2480,12 +3306,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  (0, import_react21.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -2494,16 +3320,16 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
 
 // packages/avatar/src/index.tsx
-var import_react22 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var FALLBACK_AVATARS = [
   {
     background: "#E0E7FF",
@@ -2836,7 +3662,7 @@ function AvatarFallbackIcon({ avatar }) {
     shirt,
     skin
   } = avatar;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "svg",
     {
       className: "fe-avatar__fallback-icon",
@@ -2844,15 +3670,15 @@ function AvatarFallbackIcon({ avatar }) {
       focusable: "false",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("rect", { width: "24", height: "24", fill: background }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { width: "24", height: "24", fill: background }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M3 24c.52-3.79 3.58-6.25 9-6.25S20.48 20.21 21 24",
             fill: shirt
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M8.1 17.65h7.8l1.05 2.05H7.05l1.05-2.05Z",
@@ -2860,38 +3686,38 @@ function AvatarFallbackIcon({ avatar }) {
             opacity: ".72"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
-        hairStyle === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
+        hairStyle === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M6.75 10.25C6.75 6.34 9.02 4 12.15 4c3.22 0 5.1 2.33 5.1 5.54-1.6-1.41-3.46-2.1-5.59-2.1-1.63 0-3.27.56-4.91 1.68Z",
             fill: hair
           }
         ),
-        hairStyle === 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        hairStyle === 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M6.6 10.1c.16-3.93 2.57-6.2 5.62-6.2 3.57 0 5.3 2.75 5.08 6.32-1.42-1.23-2.91-1.82-4.48-1.82-2.4 0-3.9.65-6.22 1.7Z",
             fill: hair
           }
         ),
-        hairStyle === 2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        hairStyle === 2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M6.8 10.55C6.8 6.28 9.43 4 12.2 4c3.46 0 5.13 2.83 4.93 6.38-1.38-1.58-3.03-2.38-4.92-2.38-1.81 0-3.61.85-5.41 2.55Z",
             fill: hair
           }
         ),
-        hairStyle === 3 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        hairStyle === 3 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M6.66 10.1C6.94 6.12 9.18 4 12.1 4c3.77 0 5.2 2.95 5.18 6.21-1.5-1.07-3.1-1.6-4.8-1.6-2.18 0-3.98.5-5.82 1.49Z",
             fill: hair
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        expression === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        expression === 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M10.25 13.2c1.08.66 2.42.66 3.5 0",
@@ -2901,7 +3727,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        expression === 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M10.5 13.2h3",
@@ -2911,7 +3737,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        expression === 2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "path",
           {
             d: "M10.6 13.38c.84-.44 1.96-.44 2.8 0",
@@ -2921,11 +3747,11 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 3 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
-        glasses && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "10", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "14", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
+        expression === 3 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
+        glasses && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "10", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "14", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
         ] })
       ]
     }
@@ -2944,10 +3770,10 @@ function Avatar({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const [generatedFallbackIndex] = (0, import_react22.useState)(
+  const [generatedFallbackIndex] = (0, import_react28.useState)(
     () => Math.floor(Math.random() * FALLBACK_AVATARS.length)
   );
-  const [failedImageSrc, setFailedImageSrc] = (0, import_react22.useState)();
+  const [failedImageSrc, setFailedImageSrc] = (0, import_react28.useState)();
   const imageSrc = src?.trim();
   const trimmedContent = content?.trim() ?? "";
   const showImage = Boolean(imageSrc && failedImageSrc !== imageSrc);
@@ -2959,7 +3785,7 @@ function Avatar({
     ...style
   };
   const fallbackLabel = (alt ?? trimmedContent) || "Avatar";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "span",
     {
       className: ["fe-avatar", `fe-avatar--${shape}`, className].filter(Boolean).join(" "),
@@ -2968,7 +3794,7 @@ function Avatar({
       "aria-label": showImage ? ariaLabel : ariaLabel ?? fallbackLabel,
       ...props,
       children: [
-        showImage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        showImage && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "img",
           {
             className: "fe-avatar__image",
@@ -2977,8 +3803,8 @@ function Avatar({
             onError: () => setFailedImageSrc(imageSrc)
           }
         ),
-        !showImage && initials && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
-        !showImage && !initials && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AvatarFallbackIcon, { avatar: selectedFallback })
+        !showImage && initials && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
+        !showImage && !initials && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AvatarFallbackIcon, { avatar: selectedFallback })
       ]
     }
   );
@@ -2991,7 +3817,7 @@ function AvatarGroup({
   role,
   ...props
 }) {
-  const avatars = import_react22.Children.toArray(children).filter(import_react22.isValidElement);
+  const avatars = import_react28.Children.toArray(children).filter(import_react28.isValidElement);
   const hasMaxCount = typeof maxCount === "number" && Number.isFinite(maxCount) && maxCount > 0;
   const itemLimit = hasMaxCount ? Math.floor(maxCount) : avatars.length;
   const hasOverflow = avatars.length > itemLimit;
@@ -3004,7 +3830,7 @@ function AvatarGroup({
     "--fe-avatar-font-size": resolveFontSize(firstAvatarSize)
   };
   const singleContent = avatars.length === 1 ? avatars[0]?.props.content?.trim() ?? "" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: ["fe-avatar-group", className].filter(Boolean).join(" "),
@@ -3012,8 +3838,8 @@ function AvatarGroup({
       role: role ?? "group",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fe-avatar-group__items", children: [
-          visibleAvatars.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fe-avatar-group__items", children: [
+          visibleAvatars.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "span",
             {
               className: "fe-avatar-group__item",
@@ -3022,7 +3848,7 @@ function AvatarGroup({
             },
             avatar.key ?? index
           )),
-          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "span",
             {
               className: "fe-avatar-group__more",
@@ -3036,11 +3862,633 @@ function AvatarGroup({
             }
           )
         ] }),
-        singleContent && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-avatar-group__content", children: singleContent })
+        singleContent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fe-avatar-group__content", children: singleContent })
       ]
     }
   );
 }
+
+// packages/file-upload/src/index.tsx
+var import_react29 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var FILE_UPLOAD_ACCEPTS = {
+  all: [],
+  image: [
+    "image/*",
+    ".avif",
+    ".bmp",
+    ".gif",
+    ".heic",
+    ".heif",
+    ".ico",
+    ".jpeg",
+    ".jpg",
+    ".png",
+    ".svg",
+    ".tif",
+    ".tiff",
+    ".webp"
+  ],
+  pdf: [".pdf"],
+  word: [".doc", ".docm", ".docx", ".dot", ".dotx", ".odt", ".rtf"],
+  spreadsheet: [".csv", ".ods", ".xls", ".xlsb", ".xlsm", ".xlsx"],
+  presentation: [".odp", ".pot", ".potx", ".pps", ".ppsx", ".ppt", ".pptx"],
+  document: [
+    ".pdf",
+    ".doc",
+    ".docm",
+    ".docx",
+    ".dot",
+    ".dotx",
+    ".odt",
+    ".rtf",
+    ".csv",
+    ".xls",
+    ".xlsb",
+    ".xlsx",
+    ".xlsm",
+    ".ods",
+    ".pot",
+    ".potx",
+    ".pps",
+    ".ppsx",
+    ".ppt",
+    ".pptx",
+    ".odp"
+  ],
+  text: [".log", ".md", ".rtf", ".text", ".txt"],
+  csv: [".csv"],
+  json: [".json"],
+  xml: [".xml"],
+  code: [
+    ".c",
+    ".cpp",
+    ".cs",
+    ".css",
+    ".go",
+    ".html",
+    ".java",
+    ".js",
+    ".jsx",
+    ".php",
+    ".py",
+    ".rb",
+    ".rs",
+    ".scss",
+    ".sh",
+    ".sql",
+    ".swift",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".yml",
+    ".yaml"
+  ],
+  archive: [".7z", ".bz2", ".gz", ".rar", ".tar", ".tgz", ".xz", ".zip"],
+  audio: [
+    "audio/*",
+    ".aac",
+    ".aiff",
+    ".flac",
+    ".m4a",
+    ".mp3",
+    ".ogg",
+    ".opus",
+    ".wav",
+    ".wma"
+  ],
+  video: [
+    "video/*",
+    ".avi",
+    ".mkv",
+    ".mov",
+    ".mp4",
+    ".mpeg",
+    ".mpg",
+    ".webm",
+    ".wmv"
+  ],
+  font: [".ttf", ".otf", ".woff", ".woff2"],
+  email: [".eml", ".msg"]
+};
+function fileSignature(file) {
+  return `${file.name}-${file.size}-${file.lastModified}-${file.type}`;
+}
+function normalizeAccept(accept) {
+  if (!accept) return [];
+  const groups = typeof accept === "string" ? [accept] : accept;
+  return [...new Set(groups.flatMap((group) => FILE_UPLOAD_ACCEPTS[group]))];
+}
+function isAcceptedFile(file, accept) {
+  if (!accept.length) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return accept.some((entry) => {
+    if (entry.startsWith(".")) return name.endsWith(entry);
+    if (entry.endsWith("/*")) return type.startsWith(entry.slice(0, -1));
+    return type === entry;
+  });
+}
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 1024) return `${bytes || 0} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileVisual({ file }) {
+  const [previewUrl, setPreviewUrl] = (0, import_react29.useState)();
+  const isImage = file.type.startsWith("image/");
+  (0, import_react29.useEffect)(() => {
+    if (!isImage || typeof URL.createObjectURL !== "function") return;
+    const objectUrl = URL.createObjectURL(file);
+    setPreviewUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file, isImage]);
+  if (previewUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("img", { className: "fe-file-upload__thumbnail", src: previewUrl, alt: "" });
+  }
+  const extension = file.name.includes(".") ? file.name.slice(
+    file.name.lastIndexOf(".") + 1,
+    file.name.lastIndexOf(".") + 5
+  ) : "file";
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__file-type", "aria-hidden": "true", children: extension });
+}
+var FileUpload = (0, import_react29.forwardRef)(
+  function FileUpload2({
+    value,
+    defaultValue = [],
+    onChange,
+    onAccept,
+    onReject,
+    onRemove,
+    accept,
+    maxSize = Infinity,
+    maxFiles = Infinity,
+    multiple = true,
+    disabled = false,
+    preventDuplicate = true,
+    label = "Upload files",
+    description,
+    dropLabel = "Drop files here",
+    browseLabel = "Browse files",
+    removeLabel = (file) => `Remove ${file.name}`,
+    showFileList = true,
+    inputProps,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, forwardedRef) {
+    const generatedId = (0, import_react29.useId)();
+    const inputId = `${generatedId}-input`;
+    const descriptionId = `${generatedId}-description`;
+    const inputRef = (0, import_react29.useRef)(null);
+    const dragDepthRef = (0, import_react29.useRef)(0);
+    const [uncontrolledFiles, setUncontrolledFiles] = (0, import_react29.useState)(() => [
+      ...defaultValue
+    ]);
+    const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
+    const [rejections, setRejections] = (0, import_react29.useState)([]);
+    const files = value === void 0 ? uncontrolledFiles : [...value];
+    const acceptList = (0, import_react29.useMemo)(() => normalizeAccept(accept), [accept]);
+    const nativeAccept = acceptList.join(",") || void 0;
+    const allowedFileCount = multiple ? maxFiles : 1;
+    const safeMaxFiles = Number.isFinite(allowedFileCount) ? Math.max(0, Math.floor(allowedFileCount)) : Infinity;
+    const helperText = description ?? [
+      acceptList.length ? `Accepted: ${acceptList.join(", ")}` : void 0,
+      Number.isFinite(maxSize) ? `Up to ${formatFileSize(maxSize)} per file` : void 0
+    ].filter(Boolean).join(" \u2022 ");
+    const assignInputRef = (node) => {
+      inputRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    };
+    const commitFiles = (nextFiles) => {
+      if (value === void 0) setUncontrolledFiles(nextFiles);
+      onChange?.(nextFiles);
+    };
+    const addFiles = (fileList) => {
+      if (disabled) return;
+      const candidates = Array.from(fileList ?? []);
+      const nextRejections = [];
+      const accepted = [];
+      const knownFiles = new Set(files.map(fileSignature));
+      for (const file of candidates) {
+        const signature = fileSignature(file);
+        if (!isAcceptedFile(file, acceptList)) {
+          nextRejections.push({
+            file,
+            code: "accept",
+            message: `${file.name} is not an accepted file type.`
+          });
+        } else if (file.size > maxSize) {
+          nextRejections.push({
+            file,
+            code: "max-size",
+            message: `${file.name} exceeds ${formatFileSize(maxSize)}.`
+          });
+        } else if (preventDuplicate && knownFiles.has(signature)) {
+          nextRejections.push({
+            file,
+            code: "duplicate",
+            message: `${file.name} is already in the list.`
+          });
+        } else if (files.length + accepted.length >= safeMaxFiles) {
+          nextRejections.push({
+            file,
+            code: "max-files",
+            message: `Only ${safeMaxFiles} file${safeMaxFiles === 1 ? "" : "s"} can be selected.`
+          });
+        } else {
+          knownFiles.add(signature);
+          accepted.push(file);
+        }
+      }
+      setRejections(nextRejections);
+      if (nextRejections.length) onReject?.(nextRejections);
+      if (!accepted.length) return;
+      commitFiles([...files, ...accepted]);
+      onAccept?.(accepted);
+    };
+    const openFileDialog = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const removeFile = (file, index) => {
+      if (disabled) return;
+      onRemove?.(file, index);
+      commitFiles(files.filter((_, fileIndex) => fileIndex !== index));
+    };
+    const handleDragEnter = (event) => {
+      event.preventDefault();
+      if (disabled) return;
+      dragDepthRef.current += 1;
+      setIsDragging(true);
+    };
+    const handleDragLeave = (event) => {
+      event.preventDefault();
+      dragDepthRef.current -= 1;
+      if (dragDepthRef.current <= 0) {
+        dragDepthRef.current = 0;
+        setIsDragging(false);
+      }
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      dragDepthRef.current = 0;
+      setIsDragging(false);
+      addFiles(event.dataTransfer.files);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      "div",
+      {
+        ...props,
+        className: ["fe-file-upload", className].filter(Boolean).join(" "),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { className: "fe-file-upload__label", htmlFor: inputId, children: label }),
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { id: descriptionId, className: "fe-file-upload__description", children: helperText }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            "input",
+            {
+              ...inputProps,
+              ref: assignInputRef,
+              id: inputId,
+              type: "file",
+              className: "fe-file-upload__input",
+              accept: nativeAccept,
+              multiple,
+              disabled,
+              "aria-label": ariaLabel,
+              "aria-describedby": helperText ? descriptionId : void 0,
+              onChange: (event) => {
+                addFiles(event.target.files);
+                event.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "div",
+            {
+              className: [
+                "fe-file-upload__dropzone",
+                isDragging && "fe-file-upload__dropzone--dragging",
+                disabled && "fe-file-upload__dropzone--disabled"
+              ].filter(Boolean).join(" "),
+              onDragEnter: handleDragEnter,
+              onDragOver: (event) => event.preventDefault(),
+              onDragLeave: handleDragLeave,
+              onDrop: handleDrop,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__drop-icon", "aria-hidden": "true", children: "\u2191" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__drop-label", children: dropLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__drop-hint", children: "or choose from your device" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  Button,
+                  {
+                    hierarchy: "secondary-gray",
+                    disabled,
+                    onClick: openFileDialog,
+                    children: browseLabel
+                  }
+                )
+              ]
+            }
+          ),
+          rejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fe-file-upload__errors", role: "alert", children: rejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { children: rejection.message }, `${fileSignature(rejection.file)}-${rejection.code}`)) }),
+          showFileList && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fe-file-upload__list", "aria-label": "Selected files", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+            "li",
+            {
+              className: "fe-file-upload__item",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__visual", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FileVisual, { file }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "fe-file-upload__file-details", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__file-name", title: file.name, children: file.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fe-file-upload__file-size", children: formatFileSize(file.size) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                  Button,
+                  {
+                    hierarchy: "tertiary-color",
+                    color: "error",
+                    destructive: true,
+                    size: "24",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, { size: 14 }),
+                    "aria-label": removeLabel(file),
+                    disabled,
+                    onClick: () => removeFile(file, index)
+                  }
+                )
+              ]
+            },
+            `${fileSignature(file)}-${index}`
+          )) })
+        ]
+      }
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+
+// packages/file-preview/src/index.tsx
+var import_react30 = require("react");
+var import_react_dom4 = require("react-dom");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function clampIndex(index, length) {
+  if (!length) return 0;
+  return Math.min(Math.max(Math.floor(index), 0), length - 1);
+}
+function hasExtension(file, extensions) {
+  const name = file.name.toLowerCase();
+  return extensions.some((extension) => name.endsWith(extension));
+}
+function getFilePreviewKind(file) {
+  const type = file.type.toLowerCase();
+  if (type.startsWith("image/") || hasExtension(file, [".svg"])) return "image";
+  if (type.startsWith("video/")) return "video";
+  if (type.startsWith("audio/")) return "audio";
+  if (type === "application/pdf" || hasExtension(file, [".pdf"])) return "pdf";
+  return "unsupported";
+}
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function getFileExtension(file) {
+  const dotIndex = file.name.lastIndexOf(".");
+  return dotIndex >= 0 ? file.name.slice(dotIndex + 1).toUpperCase() : "FILE";
+}
+function useFileObjectUrl(file) {
+  const [preview, setPreview] = (0, import_react30.useState)();
+  (0, import_react30.useEffect)(() => {
+    if (!file || typeof URL.createObjectURL !== "function") {
+      setPreview(void 0);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreview({ file, url });
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+  if (!preview || preview.file !== file) return void 0;
+  return preview.url;
+}
+function startLocalDownload(file) {
+  if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") {
+    return;
+  }
+  const url = URL.createObjectURL(file);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = file.name;
+  anchor.hidden = true;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function PreviewContent({ file }) {
+  const kind = getFilePreviewKind(file);
+  const url = useFileObjectUrl(file);
+  if (url && kind === "image") {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "fe-file-preview__image", src: url, alt: file.name });
+  }
+  if (url && kind === "video") {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("video", { className: "fe-file-preview__video", controls: true, src: url, children: "Your browser cannot play this video." });
+  }
+  if (url && kind === "audio") {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("audio", { className: "fe-file-preview__audio", controls: true, src: url });
+  }
+  if (url && kind === "pdf") {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "iframe",
+      {
+        className: "fe-file-preview__pdf",
+        title: `Preview ${file.name}`,
+        src: `${url}#view=FitH`
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fe-file-preview__unsupported", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fe-file-preview__file-type", "aria-hidden": "true", children: getFileExtension(file) }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { children: "Preview is not available for this file type." }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: file.name })
+  ] });
+}
+function FilePreview({
+  open,
+  files,
+  activeIndex,
+  defaultActiveIndex = 0,
+  onActiveIndexChange,
+  onClose,
+  onEscape,
+  onDelete,
+  onDownload,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  closeLabel = "Close file preview",
+  downloadLabel = "Download",
+  deleteLabel = "Delete",
+  hideDownload = false,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const titleId = (0, import_react30.useId)();
+  const panelRef = (0, import_react30.useRef)(null);
+  const [uncontrolledIndex, setUncontrolledIndex] = (0, import_react30.useState)(defaultActiveIndex);
+  const resolvedIndex = clampIndex(
+    activeIndex ?? uncontrolledIndex,
+    files.length
+  );
+  const activeFile = files[resolvedIndex];
+  const hasPrevious = resolvedIndex > 0;
+  const hasNext = resolvedIndex < files.length - 1;
+  const requestClose = (reason) => {
+    if (reason === "escape") onEscape?.();
+    onClose(reason);
+  };
+  useModalOverlay({
+    open,
+    onClose: () => requestClose("escape"),
+    panelRef,
+    priority: 1200,
+    closeOnEscape
+  });
+  (0, import_react30.useEffect)(() => {
+    if (activeIndex === void 0) {
+      setUncontrolledIndex((index) => clampIndex(index, files.length));
+    }
+  }, [activeIndex, files.length]);
+  const changeActiveIndex = (nextIndex) => {
+    const next = clampIndex(nextIndex, files.length);
+    const nextFile = files[next];
+    if (!nextFile || next === resolvedIndex) return;
+    if (activeIndex === void 0) setUncontrolledIndex(next);
+    onActiveIndexChange?.(next, nextFile);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowLeft" && hasPrevious) {
+      event.preventDefault();
+      changeActiveIndex(resolvedIndex - 1);
+    }
+    if (event.key === "ArrowRight" && hasNext) {
+      event.preventDefault();
+      changeActiveIndex(resolvedIndex + 1);
+    }
+  };
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        className: "fe-file-preview-backdrop",
+        role: "presentation",
+        onMouseDown: (event) => {
+          if (event.target === event.currentTarget && closeOnBackdropClick) {
+            requestClose("backdrop");
+          }
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "div",
+          {
+            ...props,
+            ref: panelRef,
+            className: ["fe-file-preview", className].filter(Boolean).join(" "),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": activeFile ? titleId : void 0,
+            "aria-label": ariaLabel ?? (activeFile ? void 0 : "File preview"),
+            tabIndex: -1,
+            onKeyDown: handleKeyDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("header", { className: "fe-file-preview__header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fe-file-preview__heading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { id: titleId, children: activeFile?.name ?? "File preview" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-label": `${resolvedIndex + 1} of ${files.length} files`, children: files.length ? `${resolvedIndex + 1} / ${files.length}` : "0 / 0" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  Button,
+                  {
+                    hierarchy: "tertiary-gray",
+                    size: "32",
+                    iconOnly: true,
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CloseIcon, {}),
+                    "aria-label": closeLabel,
+                    onClick: () => requestClose("close")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fe-file-preview__body", children: [
+                activeFile ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PreviewContent, { file: activeFile }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "fe-file-preview__empty", children: "No files to preview." }),
+                activeFile && files.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Button,
+                    {
+                      className: "fe-file-preview__navigation fe-file-preview__navigation--previous",
+                      hierarchy: "secondary-gray",
+                      size: "40",
+                      iconOnly: true,
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronDownIcon, {}),
+                      "aria-label": "Previous file",
+                      disabled: !hasPrevious,
+                      onClick: () => changeActiveIndex(resolvedIndex - 1)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Button,
+                    {
+                      className: "fe-file-preview__navigation fe-file-preview__navigation--next",
+                      hierarchy: "secondary-gray",
+                      size: "40",
+                      iconOnly: true,
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronDownIcon, {}),
+                      "aria-label": "Next file",
+                      disabled: !hasNext,
+                      onClick: () => changeActiveIndex(resolvedIndex + 1)
+                    }
+                  )
+                ] })
+              ] }),
+              activeFile && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("footer", { className: "fe-file-preview__footer", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "fe-file-preview__metadata", children: [
+                  getFilePreviewKind(activeFile),
+                  " \xB7",
+                  " ",
+                  formatFileSize2(activeFile.size)
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fe-file-preview__actions", children: [
+                  !hideDownload && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Button,
+                    {
+                      hierarchy: "secondary-gray",
+                      onClick: () => {
+                        onDownload?.(activeFile, resolvedIndex);
+                        startLocalDownload(activeFile);
+                      },
+                      children: downloadLabel
+                    }
+                  ),
+                  onDelete && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Button,
+                    {
+                      hierarchy: "secondary-color",
+                      color: "error",
+                      destructive: true,
+                      onClick: () => onDelete(activeFile, resolvedIndex),
+                      children: deleteLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -3055,14 +4503,25 @@ function AvatarGroup({
   CurrencyInput,
   DateTimePicker,
   Drawer,
+  DrawerWidths,
+  EmailInput,
   ExpandableSection,
+  EyeIcon,
+  EyeOffIcon,
+  FILE_UPLOAD_ACCEPTS,
+  FilePreview,
+  FileUpload,
   Loading,
+  MailboxIcon,
   Message,
   Modal,
   MoreHorizontalIcon,
   MoreVerticalIcon,
   NumberInput,
   Pagination,
+  PasswordInput,
+  PhoneIcon,
+  PhoneNumberInput,
   PlusIcon,
   ProgressBar,
   RadioButton,
@@ -3082,6 +4541,7 @@ function AvatarGroup({
   TableHead,
   TableHeader,
   TableRow,
+  Tabs,
   TextArea,
   TextInput,
   Toggle,
@@ -3093,7 +4553,9 @@ function AvatarGroup({
   chevron_right,
   chevron_up,
   copy,
+  formatFileSize,
   formatNumber,
+  getFilePreviewKind,
   getIconSize,
   key,
   lock,
@@ -3101,9 +4563,13 @@ function AvatarGroup({
   log_out,
   message,
   minus_square,
+  normalizePhoneNumber,
   plus,
   plus_square,
   search,
   trash,
+  validateEmail,
+  validatePassword,
+  validatePhoneNumber,
   x_close
 });