@dragunio/fe-libs 0.1.7 → 0.1.8

package/dist/index.mjs

@@ -23,7 +23,7 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-GT4546FD.mjs";
+} from "./chunk-HM3V3DVO.mjs";
 
 // packages/button/src/index.tsx
 import { forwardRef } from "react";
@@ -107,9 +107,23 @@ function ButtonBar({
   const rootRef = useRef(null);
   const moreMenuId = 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,
@@ -133,18 +147,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__ */ 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__ */ jsx2("span", { className: "fe-button-bar__menu-icon", children: prefix }) : prefix
       }
     );
   };
@@ -182,7 +198,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__ */ jsx2(
+                  "div",
+                  {
+                    "aria-orientation": "horizontal",
+                    className: "fe-button-bar__menu-divider",
+                    role: "separator"
+                  },
+                  `divider-${index}`
+                ) : renderAction(item, true)
+              )
             }
           )
         ] })
@@ -191,21 +217,223 @@ function ButtonBar({
   );
 }
 
+// packages/tabs/src/index.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback,
+  useEffect as useEffect2,
+  useId as useId2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "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 = forwardRef2(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 = useId2();
+  const listRef = useRef2(null);
+  const tabRefs = useRef2(/* @__PURE__ */ new Map());
+  const [uncontrolledValue, setUncontrolledValue] = useState2(
+    () => findSelectableTab(items, defaultValue)?.id
+  );
+  const [scrollState, setScrollState] = useState2({
+    hasOverflow: false,
+    canScrollBackward: false,
+    canScrollForward: false
+  });
+  const activeTab = findSelectableTab(items, value ?? uncontrolledValue);
+  const activeIndex = activeTab ? items.findIndex((item) => item.id === activeTab.id) : -1;
+  useEffect2(() => {
+    if (value === void 0 && activeTab?.id !== uncontrolledValue) {
+      setUncontrolledValue(activeTab?.id);
+    }
+  }, [activeTab?.id, uncontrolledValue, value]);
+  const updateScrollState = 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
+    });
+  }, []);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    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__ */ jsxs3("div", { ...props, className: classes, ref, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "fe-tabs__navigation", children: [
+      showScrollButtons && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          "aria-label": previousScrollLabel,
+          className: "fe-tabs__scroll-button",
+          disabled: !scrollState.canScrollBackward,
+          hierarchy: "tertiary-gray",
+          icon: /* @__PURE__ */ jsx3(chevron_left, { size: 18 }),
+          iconOnly: true,
+          onClick: () => scrollTabs(-1),
+          size: "32"
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "fe-tabs__scroller", ref: listRef, children: /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+              "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__ */ jsx3(
+        Button,
+        {
+          "aria-label": nextScrollLabel,
+          className: "fe-tabs__scroll-button",
+          disabled: !scrollState.canScrollForward,
+          hierarchy: "tertiary-gray",
+          icon: /* @__PURE__ */ jsx3(chevron_right, { size: 18 }),
+          iconOnly: true,
+          onClick: () => scrollTabs(1),
+          size: "32"
+        }
+      )
+    ] }),
+    items.map(
+      (item, index) => hasPanel(item) ? /* @__PURE__ */ jsx3(
+        "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
 import {
   createContext,
   isValidElement,
-  useCallback,
+  useCallback as useCallback2,
   useContext,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState3
+  useRef as useRef3,
+  useState as useState4
 } from "react";
 
 // packages/pagination/src/index.tsx
-import { useMemo, useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useMemo, useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "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) {
@@ -237,7 +465,7 @@ function Pagination({
   ...props
 }) {
   const safeTotalPages = Math.max(1, Math.floor(totalPages));
-  const [uncontrolledPage, setUncontrolledPage] = useState2(() => clamp(defaultPage, 1, safeTotalPages));
+  const [uncontrolledPage, setUncontrolledPage] = useState3(() => clamp(defaultPage, 1, safeTotalPages));
   const currentPage = clamp(page ?? uncontrolledPage, 1, safeTotalPages);
   const items = useMemo(
     () => getItems(safeTotalPages, currentPage, Math.max(0, siblingCount), Math.max(0, boundaryCount)),
@@ -248,9 +476,9 @@ function Pagination({
     if (page === void 0) setUncontrolledPage(resolvedPage);
     if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
   };
-  return /* @__PURE__ */ jsxs3("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
-    /* @__PURE__ */ jsx3(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__ */ jsx3("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
+    /* @__PURE__ */ jsx4(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__ */ jsx4("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ jsx4(
       Button,
       {
         className: "fe-pagination__button",
@@ -264,12 +492,12 @@ function Pagination({
       },
       item
     )),
-    /* @__PURE__ */ jsx3(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__ */ jsx4(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
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var TableContext = createContext({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
@@ -319,33 +547,33 @@ function DataTable({
     () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
     [headers, data, defaultColumnSizes, safeMinWidth]
   );
-  const [uncontrolledSizes, setUncontrolledSizes] = useState3(generatedSizes);
+  const [uncontrolledSizes, setUncontrolledSizes] = useState4(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] = useState3(() => Math.min(Math.max(1, defaultPage), totalPages));
+  const [uncontrolledPage, setUncontrolledPage] = useState4(() => 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 = useRef2();
-  const [isResizing, setIsResizing] = useState3(false);
+  const resizeState = useRef3();
+  const [isResizing, setIsResizing] = useState4(false);
   const sizes2 = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
-  useEffect2(() => {
+  useEffect3(() => {
     if (columnSizes) return;
     setUncontrolledSizes((currentSizes) => {
       const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
       return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
     });
   }, [columnSizes, generatedSizes]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (page === void 0 && uncontrolledPage > totalPages) setUncontrolledPage(totalPages);
   }, [page, totalPages, uncontrolledPage]);
-  const updateColumnSize = useCallback((columnIndex, nextSize) => {
+  const updateColumnSize = useCallback2((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]);
-  useEffect2(() => {
+  useEffect3(() => {
     const onPointerMove = (event) => {
       const activeResize = resizeState.current;
       if (!activeResize) return;
@@ -369,14 +597,14 @@ function DataTable({
     if (nextPage !== currentPage) onPageChange?.(nextPage);
   };
   const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
-  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ jsx4("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ jsx4(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
-  return /* @__PURE__ */ jsxs4("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
+  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ jsx5("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ jsx5(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
+  return /* @__PURE__ */ jsxs5("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
     resolvedPaginationPosition === "top-right" && paginationControl,
-    /* @__PURE__ */ jsxs4("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-      /* @__PURE__ */ jsx4("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ jsx4("col", { style: { width: `${size}px` } }, index)) }),
-      /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsx4("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs4("th", { scope: "col", children: [
-        /* @__PURE__ */ jsx4("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-        /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs5("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+      /* @__PURE__ */ jsx5("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ jsx5("col", { style: { width: `${size}px` } }, index)) }),
+      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs5("th", { scope: "col", children: [
+        /* @__PURE__ */ jsx5("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+        /* @__PURE__ */ jsx5(
           "span",
           {
             className: "fe-table__resize-handle",
@@ -400,7 +628,7 @@ function DataTable({
           }
         )
       ] }, columnIndex)) }) }),
-      /* @__PURE__ */ jsx4("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ jsx4("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx4("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
+      /* @__PURE__ */ jsx5("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ jsx5("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx5("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
     ] }),
     resolvedPaginationPosition !== "top-right" && paginationControl
   ] });
@@ -418,35 +646,35 @@ function Table({
   paginationPosition,
   ...props
 }) {
-  if (headers || data) return /* @__PURE__ */ jsx4(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
-  return /* @__PURE__ */ jsx4(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx4("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+  if (headers || data) return /* @__PURE__ */ jsx5(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
+  return /* @__PURE__ */ jsx5(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx5("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx4("thead", { ...props });
+  return /* @__PURE__ */ jsx5("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx4("tbody", { ...props });
+  return /* @__PURE__ */ jsx5("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
   const { striped } = useContext(TableContext);
-  return /* @__PURE__ */ jsx4("tr", { "data-striped": striped || void 0, ...props, children });
+  return /* @__PURE__ */ jsx5("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ jsx4("td", { ...props, children });
+  return /* @__PURE__ */ jsx5("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ jsx4("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ jsx5("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ jsx4("caption", { ...props });
+  return /* @__PURE__ */ jsx5("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
 import {
-  forwardRef as forwardRef2
+  forwardRef as forwardRef3
 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var Toggle = forwardRef2(function Toggle2({
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Toggle = forwardRef3(function Toggle2({
   color = "#16a34a",
   label,
   labelPosition = "right",
@@ -460,9 +688,9 @@ var Toggle = forwardRef2(function Toggle2({
     "--fe-toggle-color": color,
     ...style
   };
-  return /* @__PURE__ */ jsxs5("label", { className: classes, style: toggleStyle, children: [
-    label && labelPosition === "top" && /* @__PURE__ */ jsx5("span", { className: "fe-toggle__label", children: label }),
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("label", { className: classes, style: toggleStyle, children: [
+    label && labelPosition === "top" && /* @__PURE__ */ jsx6("span", { className: "fe-toggle__label", children: label }),
+    /* @__PURE__ */ jsx6(
       "input",
       {
         ref,
@@ -473,18 +701,18 @@ var Toggle = forwardRef2(function Toggle2({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx5("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && labelPosition === "right" && /* @__PURE__ */ jsx5("span", { className: "fe-toggle__label", children: label })
+    /* @__PURE__ */ jsx6("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && labelPosition === "right" && /* @__PURE__ */ jsx6("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
 
 // packages/drawer/src/index.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -494,27 +722,27 @@ function Drawer({ open, onClose, title, footer, side = "right", width = 400, ful
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return createPortal(/* @__PURE__ */ jsx6("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+  return createPortal(/* @__PURE__ */ jsx7("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ jsxs6("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__ */ jsxs6("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ jsx6("h2", { children: title }),
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+  }, children: /* @__PURE__ */ jsxs7("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__ */ jsxs7("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ jsx7("h2", { children: title }),
+      /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ jsx6("footer", { className: "fe-drawer__footer", children: footer })
+    /* @__PURE__ */ jsx7("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx7("footer", { className: "fe-drawer__footer", children: footer })
   ] }) }), document.body);
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-import { forwardRef as forwardRef3, useId as useId3, useState as useState5 } from "react";
+import { forwardRef as forwardRef4, useId as useId4, useState as useState6 } from "react";
 
 // packages/tooltip/src/index.tsx
-import { cloneElement, useId as useId2, useState as useState4 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { cloneElement, useId as useId3, useState as useState5 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
-  const [visible, setVisible] = useState4(false);
-  const id = useId2();
+  const [visible, setVisible] = useState5(false);
+  const id = useId3();
   const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
     setVisible(true);
@@ -528,14 +756,14 @@ function Tooltip({ content, children, placement = "top", disabled, className, ..
     children.props.onBlur?.(event);
     setVisible(false);
   } });
-  return /* @__PURE__ */ jsxs7("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+  return /* @__PURE__ */ jsxs8("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
     trigger,
-    visible && !disabled && /* @__PURE__ */ jsx7("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+    visible && !disabled && /* @__PURE__ */ jsx8("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
   ] });
 }
 
 // packages/form-controls/src/controls/Field/field.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
   if (typeof error !== "boolean") return error;
@@ -552,10 +780,10 @@ function FieldLabel({
   isRequired = false
 }) {
   if (!label) return null;
-  return /* @__PURE__ */ jsxs8("span", { className: "fe-field__label", children: [
-    /* @__PURE__ */ jsx8("span", { id, children: label }),
-    isRequired && /* @__PURE__ */ jsx8("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
-    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ jsx8(Tooltip, { content: description, children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9("span", { className: "fe-field__label", children: [
+    /* @__PURE__ */ jsx9("span", { id, children: label }),
+    isRequired && /* @__PURE__ */ jsx9("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
+    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ jsx9(Tooltip, { content: description, children: /* @__PURE__ */ jsx9(
       "span",
       {
         className: "fe-field__info",
@@ -574,7 +802,7 @@ function FieldMessage({
   descriptionDisplay
 }) {
   if (error !== void 0 && error !== false && error !== null)
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "span",
       {
         id,
@@ -584,13 +812,13 @@ function FieldMessage({
       }
     );
   if (description && descriptionDisplay === "inline")
-    return /* @__PURE__ */ jsx8("span", { id, className: "fe-field__message", children: description });
+    return /* @__PURE__ */ jsx9("span", { id, className: "fe-field__message", children: description });
   return null;
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var TextInput = forwardRef3(
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var TextInput = forwardRef4(
   function TextInput2({
     value,
     defaultValue = "",
@@ -620,12 +848,12 @@ var TextInput = forwardRef3(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId3();
+    const generatedId = useId4();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState5(defaultValue);
+    const [internalValue, setInternalValue] = useState6(defaultValue);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -646,7 +874,7 @@ var TextInput = forwardRef3(
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         className: [
@@ -655,7 +883,7 @@ var TextInput = forwardRef3(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             FieldLabel,
             {
               id: labelId,
@@ -665,10 +893,10 @@ var TextInput = forwardRef3(
               isRequired
             }
           ),
-          /* @__PURE__ */ jsxs9("span", { className: "fe-text-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ jsx9("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
-            /* @__PURE__ */ jsxs9("span", { className: "fe-text-input__input-wrap", children: [
-              /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs10("span", { className: "fe-text-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ jsx10("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ jsxs10("span", { className: "fe-text-input__input-wrap", children: [
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   ref,
@@ -690,26 +918,26 @@ var TextInput = forwardRef3(
                   ...props
                 }
               ),
-              isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs9("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx9("span", { children: placeholder }),
-                /* @__PURE__ */ jsx9("span", { className: "fe-field__required", children: "*" })
+              isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs10("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx10("span", { children: placeholder }),
+                /* @__PURE__ */ jsx10("span", { className: "fe-field__required", children: "*" })
               ] })
             ] }),
-            resolvedSuffix && /* @__PURE__ */ jsx9("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx9(
+            resolvedSuffix && /* @__PURE__ */ jsx10("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx10(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ jsx9(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ jsx10(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-input__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             FieldMessage,
             {
               id: messageId2,
@@ -727,15 +955,15 @@ TextInput.displayName = "TextInput";
 
 // packages/form-controls/src/controls/TextArea/text-area.tsx
 import {
-  forwardRef as forwardRef4,
-  useId as useId4,
+  forwardRef as forwardRef5,
+  useId as useId5,
   useImperativeHandle,
   useLayoutEffect,
-  useRef as useRef3,
-  useState as useState6
+  useRef as useRef4,
+  useState as useState7
 } from "react";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var TextArea = forwardRef4(
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+var TextArea = forwardRef5(
   function TextArea2({
     value,
     defaultValue = "",
@@ -762,13 +990,13 @@ var TextArea = forwardRef4(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId4();
+    const generatedId = useId5();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState6(defaultValue);
-    const textareaRef = useRef3(null);
+    const [internalValue, setInternalValue] = useState7(defaultValue);
+    const textareaRef = useRef4(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -797,7 +1025,7 @@ var TextArea = forwardRef4(
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: [
@@ -807,7 +1035,7 @@ var TextArea = forwardRef4(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             FieldLabel,
             {
               id: labelId,
@@ -817,8 +1045,8 @@ var TextArea = forwardRef4(
               isRequired
             }
           ),
-          /* @__PURE__ */ jsxs10("span", { className: "fe-text-area__control", children: [
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsxs11("span", { className: "fe-text-area__control", children: [
+            /* @__PURE__ */ jsx11(
               "textarea",
               {
                 ref: textareaRef,
@@ -841,24 +1069,24 @@ var TextArea = forwardRef4(
                 ...props
               }
             ),
-            isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs10("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsx10("span", { children: placeholder }),
-              /* @__PURE__ */ jsx10("span", { className: "fe-field__required", children: "*" })
+            isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs11("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx11("span", { children: placeholder }),
+              /* @__PURE__ */ jsx11("span", { className: "fe-field__required", children: "*" })
             ] }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx10(
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx11(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ jsx10(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ jsx11(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-area__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             FieldMessage,
             {
               id: messageId2,
@@ -876,16 +1104,16 @@ TextArea.displayName = "TextArea";
 
 // packages/form-controls/src/controls/Selection/selection.tsx
 import {
-  forwardRef as forwardRef5,
-  useEffect as useEffect4,
-  useId as useId5,
+  forwardRef as forwardRef6,
+  useEffect as useEffect5,
+  useId as useId6,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef4,
-  useState as useState7
+  useRef as useRef5,
+  useState as useState8
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var Selection = forwardRef5(
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+var Selection = forwardRef6(
   function Selection2({
     className,
     label,
@@ -914,7 +1142,7 @@ var Selection = forwardRef5(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId5();
+    const generatedId = useId6();
     const triggerId = id ?? generatedId + "-trigger";
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
@@ -932,7 +1160,7 @@ var Selection = forwardRef5(
       label ? labelId : void 0
     );
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState7(
+    const [internalValue, setInternalValue] = useState8(
       defaultValue ?? (multiple ? [] : "")
     );
     const selectedValue = isControlled ? value : internalValue;
@@ -940,13 +1168,13 @@ var Selection = forwardRef5(
     const selectedOptions = options.filter(
       (option) => selectedValues.some((item) => String(item) === String(option.value))
     );
-    const [open, setOpen] = useState7(false);
-    const [query, setQuery] = useState7("");
-    const [activeIndex, setActiveIndex] = useState7(0);
-    const rootRef = useRef4(null);
-    const menuRef = useRef4(null);
-    const [menuPosition, setMenuPosition] = useState7(null);
-    useEffect4(() => {
+    const [open, setOpen] = useState8(false);
+    const [query, setQuery] = useState8("");
+    const [activeIndex, setActiveIndex] = useState8(0);
+    const rootRef = useRef5(null);
+    const menuRef = useRef5(null);
+    const [menuPosition, setMenuPosition] = useState8(null);
+    useEffect5(() => {
       const close = (event) => {
         const target = event.target;
         if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target))
@@ -1032,7 +1260,7 @@ var Selection = forwardRef5(
       }
       if (event.key === "Escape") setOpen(false);
     };
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         ref,
@@ -1047,7 +1275,7 @@ var Selection = forwardRef5(
         ].filter(Boolean).join(" "),
         ...props,
         children: [
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             FieldLabel,
             {
               id: labelId,
@@ -1057,8 +1285,8 @@ var Selection = forwardRef5(
               isRequired
             }
           ),
-          /* @__PURE__ */ jsxs11("div", { ref: rootRef, className: "fe-selection__control", children: [
-            name && selectedValues.map((item) => /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsxs12("div", { ref: rootRef, className: "fe-selection__control", children: [
+            name && selectedValues.map((item) => /* @__PURE__ */ jsx12(
               "input",
               {
                 type: "hidden",
@@ -1067,7 +1295,7 @@ var Selection = forwardRef5(
               },
               String(item)
             )),
-            /* @__PURE__ */ jsxs11(
+            /* @__PURE__ */ jsxs12(
               "button",
               {
                 id: triggerId,
@@ -1085,7 +1313,7 @@ var Selection = forwardRef5(
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
                 children: [
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12(
                     "span",
                     {
                       className: [
@@ -1093,30 +1321,30 @@ var Selection = forwardRef5(
                         !selectedOptions.length && "is-placeholder",
                         tag && selectedOptions.length > 1 && "is-tags"
                       ].filter(Boolean).join(" "),
-                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsxs11(
+                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsxs12(
                         "span",
                         {
                           className: "fe-selection__tag",
                           children: [
                             option.label,
-                            /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\xD7" })
+                            /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\xD7" })
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs11("span", { children: [
+                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs12("span", { children: [
                         item,
                         index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
-                        /* @__PURE__ */ jsx11("span", { children: placeholder }),
-                        isRequired && /* @__PURE__ */ jsx11("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                      ] }, index)) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+                        /* @__PURE__ */ jsx12("span", { children: placeholder }),
+                        isRequired && /* @__PURE__ */ jsx12("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ jsx11("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx11("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+                  /* @__PURE__ */ jsx12("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx12("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
                 ]
               }
             ),
-            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx11(
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx12(
               "button",
               {
                 type: "button",
@@ -1126,7 +1354,7 @@ var Selection = forwardRef5(
               }
             ),
             open && menuPosition && createPortal2(
-              /* @__PURE__ */ jsxs11(
+              /* @__PURE__ */ jsxs12(
                 "div",
                 {
                   ref: menuRef,
@@ -1141,9 +1369,9 @@ var Selection = forwardRef5(
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
                   children: [
-                    searchable && /* @__PURE__ */ jsxs11("div", { className: "fe-selection__search", children: [
-                      /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: "\u2315" }),
-                      /* @__PURE__ */ jsx11(
+                    searchable && /* @__PURE__ */ jsxs12("div", { className: "fe-selection__search", children: [
+                      /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: "\u2315" }),
+                      /* @__PURE__ */ jsx12(
                         "input",
                         {
                           autoFocus: true,
@@ -1157,11 +1385,11 @@ var Selection = forwardRef5(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx11("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+                    /* @__PURE__ */ jsx12("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
                       const isSelected = selectedValues.some(
                         (item) => String(item) === String(option.value)
                       );
-                      return /* @__PURE__ */ jsxs11(
+                      return /* @__PURE__ */ jsxs12(
                         "button",
                         {
                           type: "button",
@@ -1175,8 +1403,8 @@ var Selection = forwardRef5(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ jsx11("span", { children: option.label }),
-                            isSelected && /* @__PURE__ */ jsx11(
+                            /* @__PURE__ */ jsx12("span", { children: option.label }),
+                            isSelected && /* @__PURE__ */ jsx12(
                               "span",
                               {
                                 className: "fe-selection__check",
@@ -1188,14 +1416,14 @@ var Selection = forwardRef5(
                         },
                         String(option.value)
                       );
-                    }) : /* @__PURE__ */ jsx11("p", { className: "fe-selection__empty", children: "No matching options" }) })
+                    }) : /* @__PURE__ */ jsx12("p", { className: "fe-selection__empty", children: "No matching options" }) })
                   ]
                 }
               ),
               document.body
             )
           ] }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx12(
             FieldMessage,
             {
               id: messageId2,
@@ -1213,13 +1441,13 @@ Selection.displayName = "Selection";
 
 // packages/form-controls/src/controls/NumberInput/number-input.tsx
 import {
-  forwardRef as forwardRef6,
-  useEffect as useEffect5,
-  useId as useId6,
-  useRef as useRef5,
-  useState as useState8
+  forwardRef as forwardRef7,
+  useEffect as useEffect6,
+  useId as useId7,
+  useRef as useRef6,
+  useState as useState9
 } from "react";
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
@@ -1276,7 +1504,7 @@ function normalizeNumberInput(raw, options) {
     value
   };
 }
-var NumberInput = forwardRef6(
+var NumberInput = forwardRef7(
   function NumberInput2({
     value,
     defaultValue = null,
@@ -1313,14 +1541,14 @@ var NumberInput = forwardRef6(
     onKeyDown,
     ...props
   }, ref) {
-    const inputRef = useRef5(null);
-    const generatedId = useId6();
+    const inputRef = useRef6(null);
+    const generatedId = useId7();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = useState8(defaultValue);
-    const [focused, setFocused] = useState8(false);
+    const [internalValue, setInternalValue] = useState9(defaultValue);
+    const [focused, setFocused] = useState9(false);
     const actualValue = isControlled ? value ?? null : internalValue;
-    const [text, setText] = useState8(
+    const [text, setText] = useState9(
       actualValue === null ? "" : formatNumber(
         actualValue,
         decimals,
@@ -1343,7 +1571,7 @@ var NumberInput = forwardRef6(
     );
     const resolvedPrefix = prefix ?? Prefix;
     const resolvedSuffix = suffix ?? Suffix;
-    useEffect5(() => {
+    useEffect6(() => {
       if (!focused)
         setText(
           actualValue === null ? "" : formatNumber(
@@ -1397,7 +1625,7 @@ var NumberInput = forwardRef6(
     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__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       "div",
       {
         className: [
@@ -1406,7 +1634,7 @@ var NumberInput = forwardRef6(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             FieldLabel,
             {
               id: labelId,
@@ -1416,10 +1644,10 @@ var NumberInput = forwardRef6(
               isRequired
             }
           ),
-          /* @__PURE__ */ jsxs12("span", { className: "fe-number-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ jsx12("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
-            /* @__PURE__ */ jsxs12("span", { className: "fe-number-input__input-wrap", children: [
-              /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ jsx13("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__input-wrap", children: [
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   ref: (node) => {
@@ -1455,41 +1683,41 @@ var NumberInput = forwardRef6(
                   "aria-describedby": describedBy
                 }
               ),
-              isRequired && placeholder && !text && /* @__PURE__ */ jsxs12(
+              isRequired && placeholder && !text && /* @__PURE__ */ jsxs13(
                 "span",
                 {
                   className: "fe-number-input__placeholder",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx12("span", { children: placeholder }),
-                    /* @__PURE__ */ jsx12("span", { className: "fe-field__required", children: "*" })
+                    /* @__PURE__ */ jsx13("span", { children: placeholder }),
+                    /* @__PURE__ */ jsx13("span", { className: "fe-field__required", children: "*" })
                   ]
                 }
               )
             ] }),
-            resolvedSuffix && /* @__PURE__ */ jsx12("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            resolvedSuffix && /* @__PURE__ */ jsx13("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
             endAdornment,
-            showStepper && /* @__PURE__ */ jsxs12("span", { className: "fe-number-input__stepper", children: [
-              /* @__PURE__ */ jsx12(
+            showStepper && /* @__PURE__ */ jsxs13("span", { className: "fe-number-input__stepper", children: [
+              /* @__PURE__ */ jsx13(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ jsx12(ChevronUpIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ jsx13(ChevronUpIcon, { size: 12 }),
                   "aria-label": incrementLabel,
                   disabled: disableIncrement,
                   onMouseDown: (event) => event.preventDefault(),
                   onClick: () => adjustValue(1)
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 Button,
                 {
                   hierarchy: "tertiary-gray",
                   size: "24",
                   iconOnly: true,
-                  icon: /* @__PURE__ */ jsx12(ChevronDownIcon, { size: 12 }),
+                  icon: /* @__PURE__ */ jsx13(ChevronDownIcon, { size: 12 }),
                   "aria-label": decrementLabel,
                   disabled: disableDecrement,
                   onMouseDown: (event) => event.preventDefault(),
@@ -1498,7 +1726,7 @@ var NumberInput = forwardRef6(
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             FieldMessage,
             {
               id: messageId2,
@@ -1515,8 +1743,8 @@ var NumberInput = forwardRef6(
 NumberInput.displayName = "NumberInput";
 
 // packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function CurrencyInput({
   suffix = "VND",
   currencies,
@@ -1527,13 +1755,13 @@ function CurrencyInput({
   disabled,
   ...props
 }) {
-  const [internalCurrency, setInternalCurrency] = useState9(
+  const [internalCurrency, setInternalCurrency] = useState10(
     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__ */ jsx13(
+  const endAdornment = currencies?.length ? /* @__PURE__ */ jsx14(
     Selection,
     {
       className: "fe-currency-input__currency",
@@ -1552,8 +1780,8 @@ function CurrencyInput({
         onCurrencyChange?.(next);
       }
     }
-  ) : /* @__PURE__ */ jsx13("span", { className: "fe-currency-input__suffix", children: currencySuffix });
-  return /* @__PURE__ */ jsx13(
+  ) : /* @__PURE__ */ jsx14("span", { className: "fe-currency-input__suffix", children: currencySuffix });
+  return /* @__PURE__ */ jsx14(
     NumberInput,
     {
       ...props,
@@ -1565,8 +1793,8 @@ function CurrencyInput({
 }
 
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
-import { useEffect as useEffect6, useId as useId7, useRef as useRef6, useState as useState10 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useId as useId8, useRef as useRef7, useState as useState11 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "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()));
@@ -1602,7 +1830,7 @@ function DateTimePicker(props) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
-  const generatedId = useId7();
+  const generatedId = useId8();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
   const messageId2 = generatedId + "-message";
@@ -1620,28 +1848,28 @@ function DateTimePicker(props) {
   );
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = useState10(
+  const [singleInternal, setSingleInternal] = useState11(
     (!isRange ? props.defaultValue : null) ?? null
   );
-  const [rangeInternal, setRangeInternal] = useState10(
+  const [rangeInternal, setRangeInternal] = useState11(
     (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] = useState10(false);
-  const [month, setMonth] = useState10(
+  const [open, setOpen] = useState11(false);
+  const [month, setMonth] = useState11(
     () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
   );
-  const [editingEnd, setEditingEnd] = useState10(false);
-  const rootRef = useRef6(null);
-  useEffect6(() => {
+  const [editingEnd, setEditingEnd] = useState11(false);
+  const rootRef = useRef7(null);
+  useEffect7(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const setSingle = (next) => {
@@ -1697,7 +1925,7 @@ function DateTimePicker(props) {
       setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: rootRef,
@@ -1707,7 +1935,7 @@ function DateTimePicker(props) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           FieldLabel,
           {
             id: labelId,
@@ -1717,7 +1945,7 @@ function DateTimePicker(props) {
             isRequired
           }
         ),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "button",
           {
             id: triggerId,
@@ -1731,29 +1959,29 @@ function DateTimePicker(props) {
             "aria-expanded": open,
             onClick: () => setOpen((current) => !current),
             children: [
-              /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", children: "\u25F7" }),
-              /* @__PURE__ */ jsxs13(
+              /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u25F7" }),
+              /* @__PURE__ */ jsxs14(
                 "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__ */ jsx14("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                    isRequired && placeholder && !shownValue && /* @__PURE__ */ jsx15("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxs13(
+        open && /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "fe-datetime-picker__popper",
             role: "dialog",
             "aria-label": "Date and time picker",
             children: [
-              /* @__PURE__ */ jsxs13("div", { className: "fe-datetime-picker__month", children: [
-                /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__month", children: [
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -1764,11 +1992,11 @@ function DateTimePicker(props) {
                     children: "\u2039"
                   }
                 ),
-                /* @__PURE__ */ jsx14("strong", { children: month.toLocaleDateString(locale, {
+                /* @__PURE__ */ jsx15("strong", { children: month.toLocaleDateString(locale, {
                   month: "long",
                   year: "numeric"
                 }) }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -1780,12 +2008,12 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx14("span", { children: day }, day)) }),
-              /* @__PURE__ */ jsx14("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+              /* @__PURE__ */ jsx15("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx15("span", { children: day }, day)) }),
+              /* @__PURE__ */ jsx15("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__ */ jsx14(
+                return /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -1800,8 +2028,8 @@ function DateTimePicker(props) {
                   day.toISOString()
                 );
               }) }),
-              isRange && /* @__PURE__ */ jsxs13("div", { className: "fe-datetime-picker__range-tabs", children: [
-                /* @__PURE__ */ jsx14(
+              isRange && /* @__PURE__ */ jsxs14("div", { className: "fe-datetime-picker__range-tabs", children: [
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -1810,7 +2038,7 @@ function DateTimePicker(props) {
                     children: "Start"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     type: "button",
@@ -1820,9 +2048,9 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs13("label", { className: "fe-datetime-picker__time", children: [
+              /* @__PURE__ */ jsxs14("label", { className: "fe-datetime-picker__time", children: [
                 "Time",
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   "input",
                   {
                     type: "time",
@@ -1835,7 +2063,7 @@ function DateTimePicker(props) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           FieldMessage,
           {
             id: messageId2,
@@ -1850,9 +2078,9 @@ function DateTimePicker(props) {
 }
 
 // packages/form-controls/src/controls/Checkbox/checkbox.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef7(
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var Checkbox = forwardRef8(
   function Checkbox2({
     label,
     labelPosition = "right",
@@ -1868,10 +2096,10 @@ var Checkbox = forwardRef7(
       disabled && "fe-checkbox--disabled",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs14("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ jsx15("span", { className: "fe-checkbox__label", children: label }),
-      /* @__PURE__ */ jsxs14("span", { className: "fe-checkbox__content", children: [
-        /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs15("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__label", children: label }),
+      /* @__PURE__ */ jsxs15("span", { className: "fe-checkbox__content", children: [
+        /* @__PURE__ */ jsx16(
           "input",
           {
             ref,
@@ -1882,8 +2110,8 @@ var Checkbox = forwardRef7(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx15("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ jsx15("span", { className: "fe-checkbox__label", children: label })
+        /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx16("span", { className: "fe-checkbox__label", children: label })
       ] })
     ] });
   }
@@ -1891,9 +2119,9 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // packages/form-controls/src/controls/RadioButton/radio-button.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
-var RadioButton = forwardRef8(
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+var RadioButton = forwardRef9(
   function RadioButton2({
     label,
     labelPosition = "right",
@@ -1909,10 +2137,10 @@ var RadioButton = forwardRef8(
       disabled && "fe-radio-button--disabled",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs15("label", { className: classes, style, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ jsx16("span", { className: "fe-radio-button__label", children: label }),
-      /* @__PURE__ */ jsxs15("span", { className: "fe-radio-button__content", children: [
-        /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsxs16("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__label", children: label }),
+      /* @__PURE__ */ jsxs16("span", { className: "fe-radio-button__content", children: [
+        /* @__PURE__ */ jsx17(
           "input",
           {
             ref,
@@ -1923,8 +2151,8 @@ var RadioButton = forwardRef8(
             ...props
           }
         ),
-        /* @__PURE__ */ jsx16("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
-        label && labelPosition === "right" && /* @__PURE__ */ jsx16("span", { className: "fe-radio-button__label", children: label })
+        /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx17("span", { className: "fe-radio-button__label", children: label })
       ] })
     ] });
   }
@@ -1932,9 +2160,9 @@ var RadioButton = forwardRef8(
 RadioButton.displayName = "RadioButton";
 
 // packages/form-controls/src/controls/RadioGroup/radio-group.tsx
-import { forwardRef as forwardRef9, useId as useId8 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
-var RadioGroup = forwardRef9(
+import { forwardRef as forwardRef10, useId as useId9 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+var RadioGroup = forwardRef10(
   function RadioGroup2({
     label,
     labelPosition = "top",
@@ -1952,7 +2180,7 @@ var RadioGroup = forwardRef9(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = useId8();
+    const generatedId = useId9();
     const groupName = name ?? `fe-radio-group-${generatedId}`;
     const labelId = `${id ?? generatedId}-label`;
     const isControlled = value !== void 0;
@@ -1966,12 +2194,12 @@ var RadioGroup = forwardRef9(
     const handleChange = (option, event) => {
       if (event.target.checked) onChange?.(option.value, option, event);
     };
-    return /* @__PURE__ */ jsxs16("div", { ref, className: classes, ...props, children: [
-      label && labelPosition === "top" && /* @__PURE__ */ jsxs16("span", { id: labelId, className: "fe-radio-group__label", children: [
+    return /* @__PURE__ */ jsxs17("div", { ref, className: classes, ...props, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsxs17("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ jsx17("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ jsx18("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           id,
@@ -1983,7 +2211,7 @@ var RadioGroup = forwardRef9(
           children: options.map((option) => {
             const optionDisabled = disabled || option.disabled;
             const optionValue = String(option.value);
-            return /* @__PURE__ */ jsx17(
+            return /* @__PURE__ */ jsx18(
               RadioButton,
               {
                 name: groupName,
@@ -2000,9 +2228,9 @@ var RadioGroup = forwardRef9(
           })
         }
       ),
-      label && labelPosition === "right" && /* @__PURE__ */ jsxs16("span", { id: labelId, className: "fe-radio-group__label", children: [
+      label && labelPosition === "right" && /* @__PURE__ */ jsxs17("span", { id: labelId, className: "fe-radio-group__label", children: [
         label,
-        isRequired && /* @__PURE__ */ jsx17("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+        isRequired && /* @__PURE__ */ jsx18("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
       ] })
     ] });
   }
@@ -2010,29 +2238,29 @@ var RadioGroup = forwardRef9(
 RadioGroup.displayName = "RadioGroup";
 
 // packages/expandable-section/src/index.tsx
-import { useId as useId9, useState as useState11 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState12 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = useState11(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState12(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = useId9();
+  const id = useId10();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ jsxs17("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ jsxs17("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ jsx18("span", { children: title }),
-      /* @__PURE__ */ jsx18("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ jsxs18("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs18("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx19("span", { children: title }),
+      /* @__PURE__ */ jsx19("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsx18("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx18("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ jsx19("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx19("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -2045,15 +2273,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  return /* @__PURE__ */ jsxs18("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ jsx19("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ jsx19("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ jsx19("span", { className: "fe-loading__sr-only", children: "Loading" })
+  return /* @__PURE__ */ jsxs19("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ jsx20("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx20("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ jsx20("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-import { Fragment as Fragment3, jsx as jsx20 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21 } from "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;
@@ -2064,7 +2292,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ jsx20(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx21(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -2076,16 +2304,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ jsx20(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ jsx20(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ jsx20(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ jsx20(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ jsx21(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -2095,9 +2323,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-import { useEffect as useEffect7, useId as useId10, useRef as useRef7 } from "react";
+import { useEffect as useEffect8, useId as useId11, useRef as useRef8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function Modal({
   open,
   onClose,
@@ -2113,9 +2341,9 @@ function Modal({
   className,
   ...props
 }) {
-  const titleId = useId10();
-  const panelRef = useRef7(null);
-  useEffect7(() => {
+  const titleId = useId11();
+  const panelRef = useRef8(null);
+  useEffect8(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -2127,9 +2355,9 @@ function Modal({
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
   return createPortal3(
-    /* @__PURE__ */ jsx21("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+    /* @__PURE__ */ jsx22("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ jsxs19(
+    }, children: /* @__PURE__ */ jsxs20(
       "div",
       {
         ref: panelRef,
@@ -2141,17 +2369,17 @@ function Modal({
         tabIndex: -1,
         ...props,
         children: [
-          (title || description || closeButton) && /* @__PURE__ */ jsxs19("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ jsxs19("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ jsx21("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ jsx21("p", { children: description })
+          (title || description || closeButton) && /* @__PURE__ */ jsxs20("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ jsx22("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ jsx22("p", { children: description })
             ] }),
-            closeButton && /* @__PURE__ */ jsx21(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx21(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+            closeButton && /* @__PURE__ */ jsx22(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx22(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
           ] }),
-          /* @__PURE__ */ jsx21("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ jsxs19("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ jsx21("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ jsx21("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx21(Button, { ...action, children: label }, index)) })
+          /* @__PURE__ */ jsx22("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ jsxs20("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ jsx22("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ jsx22("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx22(Button, { ...action, children: label }, index)) })
           ] })
         ]
       }
@@ -2161,7 +2389,7 @@ function Modal({
 }
 
 // packages/progress/src/index.tsx
-import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "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));
@@ -2171,17 +2399,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  return /* @__PURE__ */ jsxs20("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
-    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs20("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ jsx22("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ jsx22("output", { className: "fe-progress__value", children: visibleValue })
+  return /* @__PURE__ */ jsxs21("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs21("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ jsx23("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ jsx23("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ jsx22("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__ */ jsx22("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ jsx23("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__ */ jsx23("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "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);
@@ -2190,16 +2418,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  return /* @__PURE__ */ jsxs21("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ jsx23("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx23("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ jsx23(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx23(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+  return /* @__PURE__ */ jsxs22("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ jsx24("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx24("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ jsx24(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx24(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-import { useEffect as useEffect8, useState as useState12 } from "react";
-import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState13 } from "react";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -2232,22 +2460,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = useState12(entries);
-  useEffect8(() => {
+  const [visibleEntries, setVisibleEntries] = useState13(entries);
+  useEffect9(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ jsx24("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs22("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ jsx24("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
-    /* @__PURE__ */ jsxs22("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ jsx24("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ jsx24("div", { className: "fe-message__content", children: entry.content })
+  return /* @__PURE__ */ jsx25("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs23("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx25("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ jsxs23("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ jsx25("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ jsx25("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ jsx24("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ jsx24(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ jsx25("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ jsx25(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -2261,8 +2489,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-import { useEffect as useEffect9 } from "react";
-import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useEffect as useEffect10 } from "react";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function Snackbar({
   open,
   message: message2,
@@ -2276,12 +2504,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -2290,16 +2518,16 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx25("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs23("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx25("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ jsx25("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ jsx25(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ jsx26("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs24("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx26("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ jsx26("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ jsx26(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
-import { Children, isValidElement as isValidElement2, useState as useState13 } from "react";
-import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Children, isValidElement as isValidElement2, useState as useState14 } from "react";
+import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
 var FALLBACK_AVATARS = [
   {
     background: "#E0E7FF",
@@ -2632,7 +2860,7 @@ function AvatarFallbackIcon({ avatar }) {
     shirt,
     skin
   } = avatar;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "svg",
     {
       className: "fe-avatar__fallback-icon",
@@ -2640,15 +2868,15 @@ function AvatarFallbackIcon({ avatar }) {
       focusable: "false",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx26("rect", { width: "24", height: "24", fill: background }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27("rect", { width: "24", height: "24", fill: background }),
+        /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M3 24c.52-3.79 3.58-6.25 9-6.25S20.48 20.21 21 24",
             fill: shirt
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M8.1 17.65h7.8l1.05 2.05H7.05l1.05-2.05Z",
@@ -2656,38 +2884,38 @@ function AvatarFallbackIcon({ avatar }) {
             opacity: ".72"
           }
         ),
-        /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
-        hairStyle === 0 && /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
+        hairStyle === 0 && /* @__PURE__ */ jsx27(
           "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__ */ jsx26(
+        hairStyle === 1 && /* @__PURE__ */ jsx27(
           "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__ */ jsx26(
+        hairStyle === 2 && /* @__PURE__ */ jsx27(
           "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__ */ jsx26(
+        hairStyle === 3 && /* @__PURE__ */ jsx27(
           "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__ */ jsx26("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        /* @__PURE__ */ jsx26("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
-        expression === 0 && /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        /* @__PURE__ */ jsx27("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        expression === 0 && /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M10.25 13.2c1.08.66 2.42.66 3.5 0",
@@ -2697,7 +2925,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 1 && /* @__PURE__ */ jsx26(
+        expression === 1 && /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M10.5 13.2h3",
@@ -2707,7 +2935,7 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 2 && /* @__PURE__ */ jsx26(
+        expression === 2 && /* @__PURE__ */ jsx27(
           "path",
           {
             d: "M10.6 13.38c.84-.44 1.96-.44 2.8 0",
@@ -2717,11 +2945,11 @@ function AvatarFallbackIcon({ avatar }) {
             strokeLinecap: "round"
           }
         ),
-        expression === 3 && /* @__PURE__ */ jsx26("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
-        glasses && /* @__PURE__ */ jsxs24("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
-          /* @__PURE__ */ jsx26("circle", { cx: "10", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ jsx26("circle", { cx: "14", cy: "10.55", r: "1.45" }),
-          /* @__PURE__ */ jsx26("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
+        expression === 3 && /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
+        glasses && /* @__PURE__ */ jsxs25("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
+          /* @__PURE__ */ jsx27("circle", { cx: "10", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ jsx27("circle", { cx: "14", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ jsx27("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
         ] })
       ]
     }
@@ -2740,10 +2968,10 @@ function Avatar({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const [generatedFallbackIndex] = useState13(
+  const [generatedFallbackIndex] = useState14(
     () => Math.floor(Math.random() * FALLBACK_AVATARS.length)
   );
-  const [failedImageSrc, setFailedImageSrc] = useState13();
+  const [failedImageSrc, setFailedImageSrc] = useState14();
   const imageSrc = src?.trim();
   const trimmedContent = content?.trim() ?? "";
   const showImage = Boolean(imageSrc && failedImageSrc !== imageSrc);
@@ -2755,7 +2983,7 @@ function Avatar({
     ...style
   };
   const fallbackLabel = (alt ?? trimmedContent) || "Avatar";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "span",
     {
       className: ["fe-avatar", `fe-avatar--${shape}`, className].filter(Boolean).join(" "),
@@ -2764,7 +2992,7 @@ function Avatar({
       "aria-label": showImage ? ariaLabel : ariaLabel ?? fallbackLabel,
       ...props,
       children: [
-        showImage && /* @__PURE__ */ jsx26(
+        showImage && /* @__PURE__ */ jsx27(
           "img",
           {
             className: "fe-avatar__image",
@@ -2773,8 +3001,8 @@ function Avatar({
             onError: () => setFailedImageSrc(imageSrc)
           }
         ),
-        !showImage && initials && /* @__PURE__ */ jsx26("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
-        !showImage && !initials && /* @__PURE__ */ jsx26(AvatarFallbackIcon, { avatar: selectedFallback })
+        !showImage && initials && /* @__PURE__ */ jsx27("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
+        !showImage && !initials && /* @__PURE__ */ jsx27(AvatarFallbackIcon, { avatar: selectedFallback })
       ]
     }
   );
@@ -2800,7 +3028,7 @@ function AvatarGroup({
     "--fe-avatar-font-size": resolveFontSize(firstAvatarSize)
   };
   const singleContent = avatars.length === 1 ? avatars[0]?.props.content?.trim() ?? "" : "";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: ["fe-avatar-group", className].filter(Boolean).join(" "),
@@ -2808,8 +3036,8 @@ function AvatarGroup({
       role: role ?? "group",
       ...props,
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "fe-avatar-group__items", children: [
-          visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs25("div", { className: "fe-avatar-group__items", children: [
+          visibleAvatars.map((avatar, index) => /* @__PURE__ */ jsx27(
             "span",
             {
               className: "fe-avatar-group__item",
@@ -2818,7 +3046,7 @@ function AvatarGroup({
             },
             avatar.key ?? index
           )),
-          hasOverflow && /* @__PURE__ */ jsxs24(
+          hasOverflow && /* @__PURE__ */ jsxs25(
             "span",
             {
               className: "fe-avatar-group__more",
@@ -2832,7 +3060,7 @@ function AvatarGroup({
             }
           )
         ] }),
-        singleContent && /* @__PURE__ */ jsx26("span", { className: "fe-avatar-group__content", children: singleContent })
+        singleContent && /* @__PURE__ */ jsx27("span", { className: "fe-avatar-group__content", children: singleContent })
       ]
     }
   );
@@ -2877,6 +3105,7 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  Tabs,
   TextArea,
   TextInput,
   Toggle,