@dragunio/fe-libs 0.1.2 → 0.1.4

package/dist/index.js

@@ -22,15 +22,27 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   ChevronDownIcon: () => ChevronDownIcon,
+  Chip: () => Chip,
   CloseIcon: () => CloseIcon,
   CurrencyInput: () => CurrencyInput,
   DateTimePicker: () => DateTimePicker,
   Drawer: () => Drawer,
   ExpandableSection: () => ExpandableSection,
+  Loading: () => Loading,
+  Message: () => Message,
+  Modal: () => Modal,
   NumberInput: () => NumberInput,
+  Pagination: () => Pagination,
   PlusIcon: () => PlusIcon,
+  ProgressBar: () => ProgressBar,
   SearchIcon: () => SearchIcon,
   Selection: () => Selection,
+  Skeleton: () => Skeleton,
+  SkeletonBox: () => SkeletonBox,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonLine: () => SkeletonLine,
+  SkeletonSquare: () => SkeletonSquare,
+  Snackbar: () => Snackbar,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCaption: () => TableCaption,
@@ -38,10 +50,13 @@ __export(index_exports, {
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
   TableRow: () => TableRow,
+  TextArea: () => TextArea,
+  TextInput: () => TextInput,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
   formatNumber: () => formatNumber,
-  getIconSize: () => getIconSize
+  getIconSize: () => getIconSize,
+  message: () => message
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -138,9 +153,76 @@ function SearchIcon(props) {
 }
 
 // packages/table/src/index.tsx
+var import_react3 = require("react");
+
+// packages/pagination/src/index.tsx
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TableContext = (0, import_react2.createContext)({ striped: false });
+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) {
+  const visibleCount = boundaryCount * 2 + siblingCount * 2 + 3;
+  if (totalPages <= visibleCount) return range(1, totalPages);
+  const startPages = range(1, boundaryCount);
+  const endPages = range(totalPages - boundaryCount + 1, totalPages);
+  const siblingsStart = Math.max(Math.min(page - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), totalPages - boundaryCount - 1);
+  return [
+    ...startPages,
+    ...siblingsStart > boundaryCount + 2 ? ["start-ellipsis"] : siblingsStart === boundaryCount + 2 ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < totalPages - boundaryCount - 1 ? ["end-ellipsis"] : siblingsEnd === totalPages - boundaryCount - 1 ? [totalPages - boundaryCount] : [],
+    ...endPages
+  ];
+}
+function Pagination({
+  page,
+  defaultPage = 1,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  disabled = false,
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  className,
+  ...props
+}) {
+  const safeTotalPages = Math.max(1, Math.floor(totalPages));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react2.useState)(() => clamp(defaultPage, 1, safeTotalPages));
+  const currentPage = clamp(page ?? uncontrolledPage, 1, safeTotalPages);
+  const items = (0, import_react2.useMemo)(
+    () => getItems(safeTotalPages, currentPage, Math.max(0, siblingCount), Math.max(0, boundaryCount)),
+    [safeTotalPages, currentPage, siblingCount, boundaryCount]
+  );
+  const selectPage = (nextPage) => {
+    const resolvedPage = clamp(nextPage, 1, safeTotalPages);
+    if (page === void 0) setUncontrolledPage(resolvedPage);
+    if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
+    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Button,
+      {
+        className: "fe-pagination__button",
+        hierarchy: item === currentPage ? "primary" : "secondary-gray",
+        size: "40",
+        "aria-label": `Page ${item}`,
+        "aria-current": item === currentPage ? "page" : void 0,
+        disabled,
+        onClick: () => selectPage(item),
+        children: item
+      },
+      item
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
+  ] });
+}
+
+// packages/table/src/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TableContext = (0, import_react3.createContext)({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
 function getColumnCount(headers, data) {
@@ -149,7 +231,7 @@ function getColumnCount(headers, data) {
 function getText(value) {
   if (typeof value === "string" || typeof value === "number") return String(value);
   if (Array.isArray(value)) return value.map(getText).join("");
-  if ((0, import_react2.isValidElement)(value)) return getText(value.props.children);
+  if ((0, import_react3.isValidElement)(value)) return getText(value.props.children);
   return "";
 }
 function autoColumnSize(columnIndex, headers, data) {
@@ -157,9 +239,9 @@ function autoColumnSize(columnIndex, headers, data) {
   const longestText = values.reduce((longest, value) => Math.max(longest, getText(value).length), 0);
   return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, longestText * 8 + 40));
 }
-function getInitialColumnSizes(headers, data, sizes, minColumnWidth = MIN_COLUMN_WIDTH) {
+function getInitialColumnSizes(headers, data, sizes2, minColumnWidth = MIN_COLUMN_WIDTH) {
   return Array.from({ length: getColumnCount(headers, data) }, (_, columnIndex) => {
-    const suppliedSize = sizes?.[columnIndex];
+    const suppliedSize = sizes2?.[columnIndex];
     return typeof suppliedSize === "number" && Number.isFinite(suppliedSize) ? Math.min(MAX_COLUMN_WIDTH, Math.max(minColumnWidth, suppliedSize)) : autoColumnSize(columnIndex, headers, data);
   });
 }
@@ -174,33 +256,48 @@ function DataTable({
   columnSizes,
   onColumnResize,
   minColumnWidth = MIN_COLUMN_WIDTH,
+  pagination,
+  pageSize,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  paginationPosition = "bottom-right",
   className,
   ...props
 }) {
   const columnCount = getColumnCount(headers, data);
   const safeMinWidth = Math.max(1, minColumnWidth);
-  const generatedSizes = (0, import_react2.useMemo)(
+  const generatedSizes = (0, import_react3.useMemo)(
     () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
     [headers, data, defaultColumnSizes, safeMinWidth]
   );
-  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react2.useState)(generatedSizes);
-  const resizeState = (0, import_react2.useRef)();
-  const [isResizing, setIsResizing] = (0, import_react2.useState)(false);
-  const sizes = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
-  (0, import_react2.useEffect)(() => {
+  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react3.useState)(generatedSizes);
+  const shouldPaginate = pagination ?? pageSize !== void 0;
+  const safePageSize = Math.max(1, Math.floor(pageSize ?? 10));
+  const totalPages = Math.max(1, Math.ceil(data.length / safePageSize));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react3.useState)(() => Math.min(Math.max(1, defaultPage), totalPages));
+  const currentPage = Math.min(Math.max(1, page ?? uncontrolledPage), totalPages);
+  const pagedData = shouldPaginate ? data.slice((currentPage - 1) * safePageSize, currentPage * safePageSize) : data;
+  const resizeState = (0, import_react3.useRef)();
+  const [isResizing, setIsResizing] = (0, import_react3.useState)(false);
+  const sizes2 = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
+  (0, import_react3.useEffect)(() => {
     if (columnSizes) return;
     setUncontrolledSizes((currentSizes) => {
       const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
       return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
     });
   }, [columnSizes, generatedSizes]);
-  const updateColumnSize = (0, import_react2.useCallback)((columnIndex, nextSize) => {
+  (0, import_react3.useEffect)(() => {
+    if (page === void 0 && uncontrolledPage > totalPages) setUncontrolledPage(totalPages);
+  }, [page, totalPages, uncontrolledPage]);
+  const updateColumnSize = (0, import_react3.useCallback)((columnIndex, nextSize) => {
     const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
-    const nextSizes = sizes.map((size, index) => index === columnIndex ? clampedSize : size);
+    const nextSizes = sizes2.map((size, index) => index === columnIndex ? clampedSize : size);
     if (!columnSizes) setUncontrolledSizes(nextSizes);
     onColumnResize?.(nextSizes, columnIndex);
-  }, [columnSizes, onColumnResize, safeMinWidth, sizes]);
-  (0, import_react2.useEffect)(() => {
+  }, [columnSizes, onColumnResize, safeMinWidth, sizes2]);
+  (0, import_react3.useEffect)(() => {
     const onPointerMove = (event) => {
       const activeResize = resizeState.current;
       if (!activeResize) return;
@@ -219,84 +316,106 @@ function DataTable({
       window.removeEventListener("pointercancel", stopResizing);
     };
   }, [updateColumnSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("colgroup", { children: sizes.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: `${size}px` } }, index)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("th", { scope: "col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "span",
-        {
-          className: "fe-table__resize-handle",
-          role: "separator",
-          "aria-label": `Resize ${getText(headers[columnIndex]) || `column ${columnIndex + 1}`}`,
-          "aria-orientation": "vertical",
-          "aria-valuemin": safeMinWidth,
-          "aria-valuemax": MAX_COLUMN_WIDTH,
-          "aria-valuenow": sizes[columnIndex] ?? safeMinWidth,
-          tabIndex: 0,
-          onPointerDown: (event) => {
-            event.preventDefault();
-            resizeState.current = { columnIndex, startX: event.clientX, startWidth: sizes[columnIndex] ?? safeMinWidth };
-            setIsResizing(true);
-            event.currentTarget.setPointerCapture(event.pointerId);
-          },
-          onKeyDown: (event) => {
-            if (event.key === "ArrowLeft") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) - 16);
-            if (event.key === "ArrowRight") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) + 16);
+  const changePage = (nextPage) => {
+    if (page === void 0) setUncontrolledPage(nextPage);
+    if (nextPage !== currentPage) onPageChange?.(nextPage);
+  };
+  const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
+  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
+    resolvedPaginationPosition === "top-right" && paginationControl,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("col", { style: { width: `${size}px` } }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("th", { scope: "col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: "fe-table__resize-handle",
+            role: "separator",
+            "aria-label": `Resize ${getText(headers[columnIndex]) || `column ${columnIndex + 1}`}`,
+            "aria-orientation": "vertical",
+            "aria-valuemin": safeMinWidth,
+            "aria-valuemax": MAX_COLUMN_WIDTH,
+            "aria-valuenow": sizes2[columnIndex] ?? safeMinWidth,
+            tabIndex: 0,
+            onPointerDown: (event) => {
+              event.preventDefault();
+              resizeState.current = { columnIndex, startX: event.clientX, startWidth: sizes2[columnIndex] ?? safeMinWidth };
+              setIsResizing(true);
+              event.currentTarget.setPointerCapture(event.pointerId);
+            },
+            onKeyDown: (event) => {
+              if (event.key === "ArrowLeft") updateColumnSize(columnIndex, (sizes2[columnIndex] ?? safeMinWidth) - 16);
+              if (event.key === "ArrowRight") updateColumnSize(columnIndex, (sizes2[columnIndex] ?? safeMinWidth) + 16);
+            }
           }
-        }
-      )
-    ] }, columnIndex)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, rowIndex)) })
-  ] }) });
+        )
+      ] }, columnIndex)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
+    ] }),
+    resolvedPaginationPosition !== "top-right" && paginationControl
+  ] });
 }
-function Table({ headers, data, striped, children, ...props }) {
-  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+function Table({
+  headers,
+  data,
+  striped,
+  children,
+  pagination,
+  pageSize,
+  page,
+  defaultPage,
+  onPageChange,
+  paginationPosition,
+  ...props
+}) {
+  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
-  const { striped } = (0, import_react2.useContext)(TableContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
+  const { striped } = (0, import_react3.useContext)(TableContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("caption", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
-var import_react3 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Toggle = (0, import_react3.forwardRef)(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Toggle = (0, import_react4.forwardRef)(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
   const classes = ["fe-toggle", className].filter(Boolean).join(" ");
   const toggleStyle = {
     "--fe-toggle-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "fe-toggle__label", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: classes, style: toggleStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
 
 // packages/drawer/src/index.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -306,40 +425,130 @@ 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 (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("footer", { className: "fe-drawer__footer", children: footer })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("footer", { className: "fe-drawer__footer", children: footer })
   ] }) }), document.body);
 }
 
 // packages/form-controls/src/index.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Selection = (0, import_react5.forwardRef)(function Selection2({ className, label, helperText, error, options, placeholder = "Select an option", size = "medium", id, value, defaultValue, onChange, multiple = false, searchable = false, tag = false, clearable = false, disabled = false, name, onKeyDown, ...props }, ref) {
-  const generatedId = (0, import_react5.useId)();
+var import_react6 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function getFieldError(error, errorMessage) {
+  if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
+  if (typeof error !== "boolean") return error;
+  return error ? "Invalid value" : void 0;
+}
+function getDescribedBy(existing, messageId2) {
+  return [existing, messageId2].filter(Boolean).join(" ") || void 0;
+}
+var TextInput = (0, import_react6.forwardRef)(function TextInput2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear input", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+  const generatedId = (0, import_react6.useId)();
+  const inputId = id ?? `${generatedId}-input`;
+  const labelId = `${generatedId}-label`;
+  const messageId2 = `${generatedId}-message`;
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
+  const currentValue = controlled ? value : internalValue;
+  const fieldError = getFieldError(error, errorMessage);
+  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+  const displayedMessage = hasError ? fieldError : helperText;
+  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
+  const clear = () => {
+    if (!controlled) setInternalValue("");
+    onValueChange?.("");
+    onClear?.();
+  };
+  const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-text-input", hasError && "fe-text-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: labelId, className: "fe-text-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-text-input__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
+        if (!controlled) setInternalValue(event.target.value);
+        onValueChange?.(event.target.value);
+        onChange?.(event);
+      }, ...props }),
+      clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-input__clear" })
+    ] }),
+    displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-text-input__error" : "fe-text-input__helper", children: displayedMessage })
+  ] });
+});
+TextInput.displayName = "TextInput";
+var TextArea = (0, import_react6.forwardRef)(function TextArea2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear text area", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+  const generatedId = (0, import_react6.useId)();
+  const inputId = id ?? `${generatedId}-input`;
+  const labelId = `${generatedId}-label`;
+  const messageId2 = `${generatedId}-message`;
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
+  const currentValue = controlled ? value : internalValue;
+  const fieldError = getFieldError(error, errorMessage);
+  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+  const displayedMessage = hasError ? fieldError : helperText;
+  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
+  const clear = () => {
+    if (!controlled) setInternalValue("");
+    onValueChange?.("");
+    onClear?.();
+  };
+  const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-text-area", hasError && "fe-text-area--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: labelId, className: "fe-text-area__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-text-area__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("textarea", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
+        if (!controlled) setInternalValue(event.target.value);
+        onValueChange?.(event.target.value);
+        onChange?.(event);
+      }, ...props }),
+      clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-area__clear" })
+    ] }),
+    displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-text-area__error" : "fe-text-area__helper", children: displayedMessage })
+  ] });
+});
+TextArea.displayName = "TextArea";
+var Selection = (0, import_react6.forwardRef)(function Selection2({ className, label, helperText, error, options, placeholder = "Select an option", size = "medium", id, value, defaultValue, onChange, multiple = false, searchable = false, tag = false, clearable = false, disabled = false, name, onKeyDown, ...props }, ref) {
+  const generatedId = (0, import_react6.useId)();
   const listboxId = id ?? generatedId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(defaultValue ?? (multiple ? [] : ""));
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue ?? (multiple ? [] : ""));
   const selectedValue = isControlled ? value : internalValue;
   const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
   const selectedOptions = options.filter((option) => selectedValues.some((item) => String(item) === String(option.value)));
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [query, setQuery] = (0, import_react5.useState)("");
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(0);
-  const rootRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
+  const rootRef = (0, import_react6.useRef)(null);
+  const menuRef = (0, import_react6.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
     const close = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
     };
     document.addEventListener("mousedown", close);
     return () => document.removeEventListener("mousedown", close);
   }, []);
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!open) return;
+    const updateMenuPosition = () => {
+      const rect = rootRef.current?.getBoundingClientRect();
+      if (rect) setMenuPosition({ top: rect.bottom + 7, left: rect.left, width: rect.width });
+    };
+    updateMenuPosition();
+    window.addEventListener("resize", updateMenuPosition);
+    document.addEventListener("scroll", updateMenuPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateMenuPosition);
+      document.removeEventListener("scroll", updateMenuPosition, true);
+    };
+  }, [open]);
   const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
   const commit = (next) => {
     if (!isControlled) setInternalValue(next);
@@ -376,39 +585,39 @@ var Selection = (0, import_react5.forwardRef)(function Selection2({ className, l
     }
     if (event.key === "Escape") setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: ["fe-selection", `fe-selection--${size}`, open && "fe-selection--open", clearable && selectedOptions.length > 0 && "fe-selection--clearable", error && "fe-selection--error", disabled && "fe-selection--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
-      name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "fe-selection__trigger", disabled, "aria-invalid": error || void 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, onClick: () => setOpen((current) => !current), onKeyDown: onTriggerKeyDown, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: ["fe-selection__value", !selectedOptions.length && "is-placeholder", tag && selectedOptions.length > 1 && "is-tags"].filter(Boolean).join(" "), children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "fe-selection__tag", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: ["fe-selection", `fe-selection--${size}`, open && "fe-selection--open", clearable && selectedOptions.length > 0 && "fe-selection--clearable", error && "fe-selection--error", disabled && "fe-selection--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
+      name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "fe-selection__trigger", disabled, "aria-invalid": error || void 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, onClick: () => setOpen((current) => !current), onKeyDown: onTriggerKeyDown, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: ["fe-selection__value", !selectedOptions.length && "is-placeholder", tag && selectedOptions.length > 1 && "is-tags"].filter(Boolean).join(" "), children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "fe-selection__tag", children: [
           option.label,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
-        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
           item,
           index < displayLabel.length - 1 ? ", " : ""
         ] }, index)) : placeholder }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
       ] }),
-      clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
-      open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
-        searchable && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-selection__search", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { autoFocus: true, value: query, onChange: (event) => {
+      clearable && selectedOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
+      open && menuPosition && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: menuRef, id: listboxId, className: "fe-selection__menu", style: { position: "fixed", top: menuPosition.top, left: menuPosition.left, width: menuPosition.width }, role: "listbox", "aria-multiselectable": multiple || void 0, children: [
+        searchable && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-selection__search", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { autoFocus: true, value: query, onChange: (event) => {
             setQuery(event.target.value);
             setActiveIndex(0);
           }, placeholder: "Search\u2026", "aria-label": "Search options" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
           const isSelected = selectedValues.some((item) => String(item) === String(option.value));
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: [isSelected && "is-selected", index === activeIndex && "is-active"].filter(Boolean).join(" "), role: "option", "aria-selected": isSelected, disabled: option.disabled, onMouseMove: () => setActiveIndex(index), onClick: () => choose(option), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label }),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: [isSelected && "is-selected", index === activeIndex && "is-active"].filter(Boolean).join(" "), role: "option", "aria-selected": isSelected, disabled: option.disabled, onMouseMove: () => setActiveIndex(index), onClick: () => choose(option), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: option.label }),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
           ] }, String(option.value));
-        }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
-      ] })
+        }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
+      ] }), document.body)
     ] }),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-selection__helper", children: helperText })
+    helperText && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-selection__helper", children: helperText })
   ] });
 });
 Selection.displayName = "Selection";
@@ -445,13 +654,19 @@ function normalizeNumberInput(raw, options) {
   if (value !== numericValue) return { display: formatNumber(value, decimals, thousandSeparator, decimalSeparator), value };
   return { display: `${negative ? "-" : ""}${groupInteger(integer || "0", thousandSeparator)}${hasDecimal ? `${decimalSeparator}${fraction}` : ""}`, value };
 }
-var NumberInput = (0, import_react5.forwardRef)(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, className, onBlur, onFocus, ...props }, ref) {
+var NumberInput = (0, import_react6.forwardRef)(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, errorMessage, className, onBlur, onFocus, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const generatedId = (0, import_react6.useId)();
+  const messageId2 = `${generatedId}-message`;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react5.useState)(defaultValue);
-  const [focused, setFocused] = (0, import_react5.useState)(false);
+  const [internalValue, setInternalValue] = (0, import_react6.useState)(defaultValue);
+  const [focused, setFocused] = (0, import_react6.useState)(false);
   const actualValue = isControlled ? value ?? null : internalValue;
-  const [text, setText] = (0, import_react5.useState)(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
-  (0, import_react5.useEffect)(() => {
+  const [text, setText] = (0, import_react6.useState)(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
+  const fieldError = getFieldError(error, errorMessage);
+  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+  const displayedMessage = hasError ? fieldError : helperText;
+  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
+  (0, import_react6.useEffect)(() => {
     if (!focused) setText(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
   }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
   const updateValue = (nextText) => {
@@ -461,32 +676,32 @@ var NumberInput = (0, import_react5.forwardRef)(function NumberInput2({ value, d
     if (!isControlled) setInternalValue(nextValue);
     onValueChange?.(nextValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: ["fe-number-input", error && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-number-input__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, "aria-invalid": error || void 0, onFocus: (event) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: ["fe-number-input", hasError && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-number-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, onFocus: (event) => {
       setFocused(true);
       onFocus?.(event);
     }, onChange: (event) => updateValue(event.target.value), onBlur: (event) => {
       setFocused(false);
       onBlur?.(event);
-    }, ...props }),
-    helperText && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-number-input__helper", children: helperText })
+    }, ...props, "aria-invalid": hasError || void 0, "aria-describedby": describedBy }),
+    displayedMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: messageId2, className: hasError ? "fe-number-input__error" : "fe-number-input__helper", children: displayedMessage })
   ] });
 });
 NumberInput.displayName = "NumberInput";
 function CurrencyInput({ suffix = "VND", currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }) {
-  const [internalCurrency, setInternalCurrency] = (0, import_react5.useState)(defaultCurrency ?? currencies?.[0]?.code ?? "");
+  const [internalCurrency, setInternalCurrency] = (0, import_react6.useState)(defaultCurrency ?? currencies?.[0]?.code ?? "");
   const selectedCurrency = currency ?? internalCurrency;
   const current = currencies?.find((item) => item.code === selectedCurrency);
   const currencySuffix = current?.suffix ?? current?.code ?? suffix;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NumberInput, { ...props, className: "fe-currency-input__number" }),
-    currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NumberInput, { ...props, className: "fe-currency-input__number" }),
+    currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
       const next = currencies.find((item) => item.code === event.target.value);
       if (!next) return;
       if (currency === void 0) setInternalCurrency(next.code);
       onCurrencyChange?.(next);
-    }, children: currencies.map((item) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix })
+    }, children: currencies.map((item) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix })
   ] });
 }
 var pad = (value) => String(value).padStart(2, "0");
@@ -509,15 +724,15 @@ function DateTimePicker(props) {
   const { label, format = "dd/MM/yyyy HH:mm", disabled, placeholder, locale = "en-US", className, mode = "single" } = props;
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = (0, import_react5.useState)((!isRange ? props.defaultValue : null) ?? null);
-  const [rangeInternal, setRangeInternal] = (0, import_react5.useState)((isRange ? props.defaultValue : void 0) ?? [null, null]);
+  const [singleInternal, setSingleInternal] = (0, import_react6.useState)((!isRange ? props.defaultValue : null) ?? null);
+  const [rangeInternal, setRangeInternal] = (0, import_react6.useState)((isRange ? props.defaultValue : void 0) ?? [null, null]);
   const singleValue = !isRange ? props.value ?? singleInternal : null;
   const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
-  const [open, setOpen] = (0, import_react5.useState)(false);
-  const [month, setMonth] = (0, import_react5.useState)(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
-  const [editingEnd, setEditingEnd] = (0, import_react5.useState)(false);
-  const rootRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [open, setOpen] = (0, import_react6.useState)(false);
+  const [month, setMonth] = (0, import_react6.useState)(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
+  const [editingEnd, setEditingEnd] = (0, import_react6.useState)(false);
+  const rootRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
@@ -559,44 +774,44 @@ function DateTimePicker(props) {
     if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-datetime-picker__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-datetime-picker__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__month", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
+    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__month", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: day }, day)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: day }, day)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
         const inMonth = day.getMonth() === month.getMonth();
         const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
         const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: [!inMonth && "is-other-month", selected && "is-selected", inRange && "is-in-range"].filter(Boolean).join(" "), onClick: () => selectDay(day), children: day.getDate() }, day.toISOString());
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: [!inMonth && "is-other-month", selected && "is-selected", inRange && "is-in-range"].filter(Boolean).join(" "), onClick: () => selectDay(day), children: day.getDate() }, day.toISOString());
       }) }),
-      isRange && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
+      isRange && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "fe-datetime-picker__time", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "fe-datetime-picker__time", children: [
         "Time",
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
       ] })
     ] })
   ] });
 }
 
 // packages/tooltip/src/index.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
-  const [visible, setVisible] = (0, import_react6.useState)(false);
-  const id = (0, import_react6.useId)();
-  const trigger = (0, import_react6.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const id = (0, import_react7.useId)();
+  const trigger = (0, import_react7.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
     setVisible(true);
   }, onMouseLeave: (event) => {
@@ -609,46 +824,324 @@ function Tooltip({ content, children, placement = "top", disabled, className, ..
     children.props.onBlur?.(event);
     setVisible(false);
   } });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
     trigger,
-    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
   ] });
 }
 
 // packages/expandable-section/src/index.tsx
-var import_react7 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react7.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react8.useState)(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = (0, import_react7.useId)();
+  const id = (0, import_react8.useId)();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+  ] });
+}
+
+// packages/loading/src/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var sizes = {
+  small: "16px",
+  medium: "24px",
+  large: "40px"
+};
+function Loading({ size = "medium", color = "#2878f0", label, className, style, ...props }) {
+  const diameter = typeof size === "number" ? `${size}px` : sizes[size];
+  const loadingStyle = {
+    "--fe-loading-size": diameter,
+    "--fe-loading-color": color,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
+  ] });
+}
+
+// packages/skeleton/src/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var pixels = (value) => typeof value === "number" ? `${value}px` : value;
+function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
+  const resolvedVariant = shape ?? variant;
+  const resolvedWidth = pixels(width) ?? (resolvedVariant === "circle" ? "40px" : "100%");
+  const resolvedHeight = pixels(height) ?? (resolvedVariant === "circle" ? resolvedWidth : resolvedVariant === "line" ? "12px" : "80px");
+  const skeletonStyle = {
+    "--fe-skeleton-width": resolvedWidth,
+    "--fe-skeleton-height": resolvedHeight,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
+      style: skeletonStyle,
+      "aria-hidden": "true",
+      ...props
+    },
+    index
+  )) });
+}
+function SkeletonCircle({ size = 40, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+}
+function SkeletonSquare({ size = 80, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+}
+function SkeletonBox({ width = "100%", height = 80, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
+}
+function SkeletonLine({ width = "100%", height = 12, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
+}
+var Skeleton = Object.assign(SkeletonBase, {
+  Circle: SkeletonCircle,
+  Square: SkeletonSquare,
+  Box: SkeletonBox,
+  Line: SkeletonLine
+});
+
+// packages/modal/src/index.tsx
+var import_react9 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  actions = [],
+  size = "medium",
+  closeOnBackdropClick = true,
+  closeButton = true,
+  closeLabel = "Close modal",
+  className,
+  ...props
+}) {
+  const titleId = (0, import_react9.useId)();
+  const panelRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    panelRef.current?.focus();
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose, open]);
+  if (!open || typeof document === "undefined") return null;
+  const hasFooter = footer || actions.length > 0;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+      if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        className: ["fe-modal", `fe-modal--${size}`, className].filter(Boolean).join(" "),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-label": title ? void 0 : "Modal",
+        tabIndex: -1,
+        ...props,
+        children: [
+          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: description })
+            ] }),
+            closeButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { ...action, children: label }, index)) })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// packages/progress/src/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
+  const indeterminate = value === null || value === void 0;
+  const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
+  const progressStyle = {
+    "--fe-progress-value": `${percentage}%`,
+    "--fe-progress-color": color,
+    ...style
+  };
+  const visibleValue = `${Math.round(percentage)}%`;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-progress__indicator" }) })
+  ] });
+}
+
+// packages/chip/src/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
+function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
+  const usesCustomColor = Boolean(color);
+  const chipStyle = {
+    ...usesCustomColor ? { "--fe-chip-custom-color": color } : {},
+    ...style
+  };
+  const resolvedStatus = statuses.includes(status) ? status : "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
+
+// packages/message/src/index.tsx
+var import_react10 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var messageId = 0;
+var entries = [];
+var listeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+var publish = () => listeners.forEach((listener) => listener(entries));
+function dismiss(id) {
+  const timer = timers.get(id);
+  if (timer) window.clearTimeout(timer);
+  timers.delete(id);
+  const entry = entries.find((item) => item.id === id);
+  entries = entries.filter((item) => item.id !== id);
+  entry?.onClose?.();
+  publish();
+}
+function show({ duration = 4500, severity = "info", ...options }) {
+  const id = ++messageId;
+  entries = [...entries, { id, duration, severity, ...options }];
+  publish();
+  if (duration !== null) timers.set(id, window.setTimeout(() => dismiss(id), duration));
+  return id;
+}
+var message = {
+  show,
+  success: (content, options = {}) => show({ content, severity: "success", ...options }),
+  info: (content, options = {}) => show({ content, severity: "info", ...options }),
+  warning: (content, options = {}) => show({ content, severity: "warning", ...options }),
+  error: (content, options = {}) => show({ content, severity: "error", ...options }),
+  dismiss,
+  clear: () => [...entries].forEach((entry) => dismiss(entry.id))
+};
+var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
+function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
+  const [visibleEntries, setVisibleEntries] = (0, import_react10.useState)(entries);
+  (0, import_react10.useEffect)(() => {
+    const listener = (nextEntries) => setVisibleEntries(nextEntries);
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fe-message__content", children: entry.content })
+    ] }),
+    entry.action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+  ] }, entry.id)) });
+}
+((Message2) => {
+  Message2.show = message.show;
+  Message2.success = message.success;
+  Message2.info = message.info;
+  Message2.warning = message.warning;
+  Message2.error = message.error;
+  Message2.dismiss = message.dismiss;
+  Message2.clear = message.clear;
+})(Message || (Message = {}));
+
+// packages/snackbar/src/index.tsx
+var import_react11 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Snackbar({
+  open,
+  message: message2,
+  autoHideDuration = 5e3,
+  onClose,
+  action,
+  anchorOrigin = {},
+  closeLabel = "Close notification",
+  className,
+  ...props
+}) {
+  const vertical = anchorOrigin.vertical ?? "bottom";
+  const horizontal = anchorOrigin.horizontal ?? "center";
+  (0, import_react11.useEffect)(() => {
+    if (!open || autoHideDuration === null) return void 0;
+    const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
+    return () => window.clearTimeout(timer);
+  }, [open, autoHideDuration, onClose]);
+  (0, import_react11.useEffect)(() => {
+    if (!open) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose?.("escapeKeyDown");
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   ChevronDownIcon,
+  Chip,
   CloseIcon,
   CurrencyInput,
   DateTimePicker,
   Drawer,
   ExpandableSection,
+  Loading,
+  Message,
+  Modal,
   NumberInput,
+  Pagination,
   PlusIcon,
+  ProgressBar,
   SearchIcon,
   Selection,
+  Skeleton,
+  SkeletonBox,
+  SkeletonCircle,
+  SkeletonLine,
+  SkeletonSquare,
+  Snackbar,
   Table,
   TableBody,
   TableCaption,
@@ -656,8 +1149,11 @@ function ExpandableSection({ title, children, expanded, defaultExpanded = false,
   TableHead,
   TableHeader,
   TableRow,
+  TextArea,
+  TextInput,
   Toggle,
   Tooltip,
   formatNumber,
-  getIconSize
+  getIconSize,
+  message
 });