@dragunio/fe-libs 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -97,11 +97,78 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useMemo,
+  useMemo as useMemo2,
   useRef,
-  useState
+  useState as useState2
 } from "react";
+
+// packages/pagination/src/index.tsx
+import { useMemo, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } 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) {
+  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] = useState(() => 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)),
+    [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__ */ 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(
+      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__ */ 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) })
+  ] });
+}
+
+// packages/table/src/index.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var TableContext = createContext({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
@@ -119,9 +186,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);
   });
 }
@@ -136,19 +203,31 @@ 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 = useMemo(
+  const generatedSizes = useMemo2(
     () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
     [headers, data, defaultColumnSizes, safeMinWidth]
   );
-  const [uncontrolledSizes, setUncontrolledSizes] = useState(generatedSizes);
+  const [uncontrolledSizes, setUncontrolledSizes] = useState2(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] = useState2(() => 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 = useRef();
-  const [isResizing, setIsResizing] = useState(false);
-  const sizes = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
+  const [isResizing, setIsResizing] = useState2(false);
+  const sizes2 = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
   useEffect(() => {
     if (columnSizes) return;
     setUncontrolledSizes((currentSizes) => {
@@ -156,12 +235,15 @@ function DataTable({
       return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
     });
   }, [columnSizes, generatedSizes]);
+  useEffect(() => {
+    if (page === void 0 && uncontrolledPage > totalPages) setUncontrolledPage(totalPages);
+  }, [page, totalPages, uncontrolledPage]);
   const updateColumnSize = 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]);
+  }, [columnSizes, onColumnResize, safeMinWidth, sizes2]);
   useEffect(() => {
     const onPointerMove = (event) => {
       const activeResize = resizeState.current;
@@ -181,74 +263,96 @@ function DataTable({
       window.removeEventListener("pointercancel", stopResizing);
     };
   }, [updateColumnSize]);
-  return /* @__PURE__ */ jsx3("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: /* @__PURE__ */ jsxs3("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-    /* @__PURE__ */ jsx3("colgroup", { children: sizes.map((size, index) => /* @__PURE__ */ jsx3("col", { style: { width: `${size}px` } }, index)) }),
-    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs3("th", { scope: "col", children: [
-      /* @__PURE__ */ jsx3("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-      /* @__PURE__ */ jsx3(
-        "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__ */ 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: [
+    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(
+          "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__ */ jsx3("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx3("td", { children: row[columnIndex] }, columnIndex)) }, rowIndex)) })
-  ] }) });
+        )
+      ] }, 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)) })
+    ] }),
+    resolvedPaginationPosition !== "top-right" && paginationControl
+  ] });
 }
-function Table({ headers, data, striped, children, ...props }) {
-  if (headers || data) return /* @__PURE__ */ jsx3(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, ...props });
-  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx3("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__ */ 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 }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx3("thead", { ...props });
+  return /* @__PURE__ */ jsx4("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx3("tbody", { ...props });
+  return /* @__PURE__ */ jsx4("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
   const { striped } = useContext(TableContext);
-  return /* @__PURE__ */ jsx3("tr", { "data-striped": striped || void 0, ...props, children });
+  return /* @__PURE__ */ jsx4("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ jsx3("td", { ...props, children });
+  return /* @__PURE__ */ jsx4("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ jsx3("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ jsx4("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ jsx3("caption", { ...props });
+  return /* @__PURE__ */ jsx4("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var Toggle = forwardRef2(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__ */ jsxs4("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ jsx4("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
-    /* @__PURE__ */ jsx4("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ jsx4("span", { className: "fe-toggle__label", children: label })
+  return /* @__PURE__ */ jsxs5("label", { className: classes, style: toggleStyle, children: [
+    /* @__PURE__ */ jsx5("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ jsx5("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx5("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
@@ -256,7 +360,7 @@ Toggle.displayName = "Toggle";
 // packages/drawer/src/index.tsx
 import { useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
   useEffect2(() => {
     if (!open) return;
@@ -268,15 +372,15 @@ 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__ */ jsx5("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+  return createPortal(/* @__PURE__ */ jsx6("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ jsxs5("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__ */ jsxs5("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ jsx5("h2", { children: title }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+  }, 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" })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ jsx5("footer", { className: "fe-drawer__footer", children: footer })
+    /* @__PURE__ */ jsx6("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx6("footer", { className: "fe-drawer__footer", children: footer })
   ] }) }), document.body);
 }
 
@@ -285,29 +389,120 @@ import {
   forwardRef as forwardRef3,
   useEffect as useEffect3,
   useId,
+  useLayoutEffect,
   useRef as useRef2,
-  useState as useState2
+  useState as useState3
 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx7, jsxs as jsxs7 } from "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 = forwardRef3(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 = useId();
+  const inputId = id ?? `${generatedId}-input`;
+  const labelId = `${generatedId}-label`;
+  const messageId2 = `${generatedId}-message`;
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState3(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__ */ jsxs7("label", { className: ["fe-text-input", hasError && "fe-text-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx7("span", { id: labelId, className: "fe-text-input__label", children: label }),
+    /* @__PURE__ */ jsxs7("span", { className: "fe-text-input__control", children: [
+      /* @__PURE__ */ jsx7("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__ */ jsx7(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx7(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-input__clear" })
+    ] }),
+    displayedMessage && /* @__PURE__ */ jsx7("span", { id: messageId2, className: hasError ? "fe-text-input__error" : "fe-text-input__helper", children: displayedMessage })
+  ] });
+});
+TextInput.displayName = "TextInput";
+var TextArea = forwardRef3(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 = useId();
+  const inputId = id ?? `${generatedId}-input`;
+  const labelId = `${generatedId}-label`;
+  const messageId2 = `${generatedId}-message`;
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState3(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__ */ jsxs7("label", { className: ["fe-text-area", hasError && "fe-text-area--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx7("span", { id: labelId, className: "fe-text-area__label", children: label }),
+    /* @__PURE__ */ jsxs7("span", { className: "fe-text-area__control", children: [
+      /* @__PURE__ */ jsx7("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__ */ jsx7(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx7(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-area__clear" })
+    ] }),
+    displayedMessage && /* @__PURE__ */ jsx7("span", { id: messageId2, className: hasError ? "fe-text-area__error" : "fe-text-area__helper", children: displayedMessage })
+  ] });
+});
+TextArea.displayName = "TextArea";
 var Selection = forwardRef3(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 = useId();
   const listboxId = id ?? generatedId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState2(defaultValue ?? (multiple ? [] : ""));
+  const [internalValue, setInternalValue] = useState3(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] = useState2(false);
-  const [query, setQuery] = useState2("");
-  const [activeIndex, setActiveIndex] = useState2(0);
+  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const [activeIndex, setActiveIndex] = useState3(0);
   const rootRef = useRef2(null);
+  const menuRef = useRef2(null);
+  const [menuPosition, setMenuPosition] = useState3(null);
   useEffect3(() => {
     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);
   }, []);
+  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);
@@ -344,39 +539,39 @@ var Selection = forwardRef3(function Selection2({ className, label, helperText,
     }
     if (event.key === "Escape") setOpen(false);
   };
-  return /* @__PURE__ */ jsxs6("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__ */ jsx6("span", { className: "fe-selection__label", children: label }),
-    /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: "fe-selection__control", children: [
-      name && selectedValues.map((item) => /* @__PURE__ */ jsx6("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
-      /* @__PURE__ */ jsxs6("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__ */ jsx6("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__ */ jsxs6("span", { className: "fe-selection__tag", children: [
+  return /* @__PURE__ */ jsxs7("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__ */ jsx7("span", { className: "fe-selection__label", children: label }),
+    /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: "fe-selection__control", children: [
+      name && selectedValues.map((item) => /* @__PURE__ */ jsx7("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
+      /* @__PURE__ */ jsxs7("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__ */ jsx7("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__ */ jsxs7("span", { className: "fe-selection__tag", children: [
           option.label,
-          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\xD7" })
-        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs6("span", { children: [
+          /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xD7" })
+        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs7("span", { children: [
           item,
           index < displayLabel.length - 1 ? ", " : ""
         ] }, index)) : placeholder }),
-        /* @__PURE__ */ jsx6("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx6("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+        /* @__PURE__ */ jsx7("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx7("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
       ] }),
-      clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx6("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
-      open && /* @__PURE__ */ jsxs6("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
-        searchable && /* @__PURE__ */ jsxs6("div", { className: "fe-selection__search", children: [
-          /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u2315" }),
-          /* @__PURE__ */ jsx6("input", { autoFocus: true, value: query, onChange: (event) => {
+      clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
+      open && menuPosition && createPortal2(/* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "fe-selection__search", children: [
+          /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2315" }),
+          /* @__PURE__ */ jsx7("input", { autoFocus: true, value: query, onChange: (event) => {
             setQuery(event.target.value);
             setActiveIndex(0);
           }, placeholder: "Search\u2026", "aria-label": "Search options" })
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+        /* @__PURE__ */ jsx7("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
           const isSelected = selectedValues.some((item) => String(item) === String(option.value));
-          return /* @__PURE__ */ jsxs6("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__ */ jsx6("span", { children: option.label }),
-            isSelected && /* @__PURE__ */ jsx6("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
+          return /* @__PURE__ */ jsxs7("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__ */ jsx7("span", { children: option.label }),
+            isSelected && /* @__PURE__ */ jsx7("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
           ] }, String(option.value));
-        }) : /* @__PURE__ */ jsx6("p", { className: "fe-selection__empty", children: "No matching options" }) })
-      ] })
+        }) : /* @__PURE__ */ jsx7("p", { className: "fe-selection__empty", children: "No matching options" }) })
+      ] }), document.body)
     ] }),
-    helperText && /* @__PURE__ */ jsx6("span", { className: "fe-selection__helper", children: helperText })
+    helperText && /* @__PURE__ */ jsx7("span", { className: "fe-selection__helper", children: helperText })
   ] });
 });
 Selection.displayName = "Selection";
@@ -413,12 +608,18 @@ 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 = forwardRef3(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, className, onBlur, onFocus, ...props }, ref) {
+var NumberInput = forwardRef3(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 = useId();
+  const messageId2 = `${generatedId}-message`;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState2(defaultValue);
-  const [focused, setFocused] = useState2(false);
+  const [internalValue, setInternalValue] = useState3(defaultValue);
+  const [focused, setFocused] = useState3(false);
   const actualValue = isControlled ? value ?? null : internalValue;
-  const [text, setText] = useState2(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
+  const [text, setText] = useState3(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);
   useEffect3(() => {
     if (!focused) setText(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
   }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
@@ -429,32 +630,32 @@ var NumberInput = forwardRef3(function NumberInput2({ value, defaultValue = null
     if (!isControlled) setInternalValue(nextValue);
     onValueChange?.(nextValue);
   };
-  return /* @__PURE__ */ jsxs6("label", { className: ["fe-number-input", error && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx6("span", { className: "fe-number-input__label", children: label }),
-    /* @__PURE__ */ jsx6("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, "aria-invalid": error || void 0, onFocus: (event) => {
+  return /* @__PURE__ */ jsxs7("label", { className: ["fe-number-input", hasError && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx7("span", { className: "fe-number-input__label", children: label }),
+    /* @__PURE__ */ jsx7("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__ */ jsx6("span", { className: "fe-number-input__helper", children: helperText })
+    }, ...props, "aria-invalid": hasError || void 0, "aria-describedby": describedBy }),
+    displayedMessage && /* @__PURE__ */ jsx7("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] = useState2(defaultCurrency ?? currencies?.[0]?.code ?? "");
+  const [internalCurrency, setInternalCurrency] = useState3(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__ */ jsxs6("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx6(NumberInput, { ...props, className: "fe-currency-input__number" }),
-    currencies?.length ? /* @__PURE__ */ jsx6("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
+  return /* @__PURE__ */ jsxs7("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx7(NumberInput, { ...props, className: "fe-currency-input__number" }),
+    currencies?.length ? /* @__PURE__ */ jsx7("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__ */ jsx6("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ jsx6("span", { className: "fe-currency-input__suffix", children: currencySuffix })
+    }, children: currencies.map((item) => /* @__PURE__ */ jsx7("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ jsx7("span", { className: "fe-currency-input__suffix", children: currencySuffix })
   ] });
 }
 var pad = (value) => String(value).padStart(2, "0");
@@ -477,13 +678,13 @@ 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] = useState2((!isRange ? props.defaultValue : null) ?? null);
-  const [rangeInternal, setRangeInternal] = useState2((isRange ? props.defaultValue : void 0) ?? [null, null]);
+  const [singleInternal, setSingleInternal] = useState3((!isRange ? props.defaultValue : null) ?? null);
+  const [rangeInternal, setRangeInternal] = useState3((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] = useState2(false);
-  const [month, setMonth] = useState2(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
-  const [editingEnd, setEditingEnd] = useState2(false);
+  const [open, setOpen] = useState3(false);
+  const [month, setMonth] = useState3(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
+  const [editingEnd, setEditingEnd] = useState3(false);
   const rootRef = useRef2(null);
   useEffect3(() => {
     const onPointerDown = (event) => {
@@ -527,42 +728,42 @@ function DateTimePicker(props) {
     if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx6("span", { className: "fe-datetime-picker__label", children: label }),
-    /* @__PURE__ */ jsxs6("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
-      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: "\u25F7" }),
-      /* @__PURE__ */ jsx6("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
+  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
+    label && /* @__PURE__ */ jsx7("span", { className: "fe-datetime-picker__label", children: label }),
+    /* @__PURE__ */ jsxs7("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
+      /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u25F7" }),
+      /* @__PURE__ */ jsx7("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
     ] }),
-    open && /* @__PURE__ */ jsxs6("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "fe-datetime-picker__month", children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
-        /* @__PURE__ */ jsx6("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
-        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
+    open && /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__month", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
+        /* @__PURE__ */ jsx7("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
+        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
       ] }),
-      /* @__PURE__ */ jsx6("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx6("span", { children: day }, day)) }),
-      /* @__PURE__ */ jsx6("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+      /* @__PURE__ */ jsx7("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx7("span", { children: day }, day)) }),
+      /* @__PURE__ */ jsx7("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__ */ jsx6("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__ */ jsx7("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__ */ jsxs6("div", { className: "fe-datetime-picker__range-tabs", children: [
-        /* @__PURE__ */ jsx6("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
-        /* @__PURE__ */ jsx6("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
+      isRange && /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__range-tabs", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
       ] }),
-      /* @__PURE__ */ jsxs6("label", { className: "fe-datetime-picker__time", children: [
+      /* @__PURE__ */ jsxs7("label", { className: "fe-datetime-picker__time", children: [
         "Time",
-        /* @__PURE__ */ jsx6("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
+        /* @__PURE__ */ jsx7("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
-import { cloneElement, useId as useId2, useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { cloneElement, useId as useId2, useState as useState4 } 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] = useState3(false);
+  const [visible, setVisible] = useState4(false);
   const id = useId2();
   const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
@@ -577,17 +778,17 @@ 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/expandable-section/src/index.tsx
-import { useId as useId3, useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useId as useId3, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = useState4(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState5(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
   const id = useId3();
   const toggle = () => {
@@ -596,26 +797,304 @@ function ExpandableSection({ title, children, expanded, defaultExpanded = false,
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ jsxs8("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ jsxs8("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ jsx8("span", { children: title }),
-      /* @__PURE__ */ jsx8("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ jsxs9("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs9("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx9("span", { children: title }),
+      /* @__PURE__ */ jsx9("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx9("div", { className: "fe-expandable-section__content-inner", children }) })
+  ] });
+}
+
+// packages/loading/src/index.tsx
+import { jsx as jsx10, jsxs as jsxs10 } from "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__ */ jsxs10("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ jsx10("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx10("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ jsx10("span", { className: "fe-loading__sr-only", children: "Loading" })
+  ] });
+}
+
+// packages/skeleton/src/index.tsx
+import { Fragment as Fragment2, jsx as jsx11 } 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;
+  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__ */ jsx11(Fragment2, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx11(
+    "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__ */ jsx11(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+}
+function SkeletonSquare({ size = 80, ...props }) {
+  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+}
+function SkeletonBox({ width = "100%", height = 80, ...props }) {
+  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "box", width, height, ...props });
+}
+function SkeletonLine({ width = "100%", height = 12, ...props }) {
+  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "line", width, height, ...props });
+}
+var Skeleton = Object.assign(SkeletonBase, {
+  Circle: SkeletonCircle,
+  Square: SkeletonSquare,
+  Box: SkeletonBox,
+  Line: SkeletonLine
+});
+
+// packages/modal/src/index.tsx
+import { useEffect as useEffect4, useId as useId4, useRef as useRef3 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx12, jsxs as jsxs11 } from "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 = useId4();
+  const panelRef = useRef3(null);
+  useEffect4(() => {
+    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 createPortal3(
+    /* @__PURE__ */ jsx12("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+      if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
+    }, children: /* @__PURE__ */ jsxs11(
+      "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__ */ jsxs11("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ jsx12("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ jsx12("p", { children: description })
+            ] }),
+            closeButton && /* @__PURE__ */ jsx12(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx12(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ jsxs11("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ jsx12("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ jsx12("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx12(Button, { ...action, children: label }, index)) })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// packages/progress/src/index.tsx
+import { jsx as jsx13, jsxs as jsxs12 } 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));
+  const progressStyle = {
+    "--fe-progress-value": `${percentage}%`,
+    "--fe-progress-color": color,
+    ...style
+  };
+  const visibleValue = `${Math.round(percentage)}%`;
+  return /* @__PURE__ */ jsxs12("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs12("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ jsx13("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ jsx13("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ jsx8("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx8("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "fe-progress__indicator" }) })
+  ] });
+}
+
+// packages/chip/src/index.tsx
+import { jsx as jsx14, jsxs as jsxs13 } 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);
+  const chipStyle = {
+    ...usesCustomColor ? { "--fe-chip-custom-color": color } : {},
+    ...style
+  };
+  const resolvedStatus = statuses.includes(status) ? status : "default";
+  return /* @__PURE__ */ jsxs13("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ jsx14("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx14("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ jsx14(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx14(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
+
+// packages/message/src/index.tsx
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "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] = useState6(entries);
+  useEffect5(() => {
+    const listener = (nextEntries) => setVisibleEntries(nextEntries);
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx15("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs14("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx15("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ jsxs14("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ jsx15("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ jsx15("div", { className: "fe-message__content", children: entry.content })
+    ] }),
+    entry.action && /* @__PURE__ */ jsx15("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ jsx15(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
+import { useEffect as useEffect6 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "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";
+  useEffect6(() => {
+    if (!open || autoHideDuration === null) return void 0;
+    const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
+    return () => window.clearTimeout(timer);
+  }, [open, autoHideDuration, onClose]);
+  useEffect6(() => {
+    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__ */ jsx16("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs15("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx16("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ jsx16("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ jsx16(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  ] }) });
+}
 export {
   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,
@@ -623,8 +1102,11 @@ export {
   TableHead,
   TableHeader,
   TableRow,
+  TextArea,
+  TextInput,
   Toggle,
   Tooltip,
   formatNumber,
-  getIconSize
+  getIconSize,
+  message
 };